@janiscommerce/ui-web 0.0.12 → 0.0.15

package/index.umd.js

@@ -1,12 +1,13 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.main = {}, global.React));
-})(this, (function (exports, React) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.main = {}, global.React, global.require$$1));
+})(this, (function (exports, React, require$$1) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+  var require$$1__default = /*#__PURE__*/_interopDefaultLegacy(require$$1);
 
   function ownKeys(object, enumerableOnly) {
     var keys = Object.keys(object);
@@ -34,6 +35,31 @@
     return target;
   }
 
+  function _classCallCheck$2(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+
+  function _defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  function _createClass$2(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    Object.defineProperty(Constructor, "prototype", {
+      writable: false
+    });
+    return Constructor;
+  }
+
   function _defineProperty(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
@@ -49,8 +75,8 @@
     return obj;
   }
 
-  function _extends() {
-    _extends = Object.assign || function (target) {
+  function _extends$1() {
+    _extends$1 = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
 
@@ -64,7 +90,54 @@
       return target;
     };
 
-    return _extends.apply(this, arguments);
+    return _extends$1.apply(this, arguments);
+  }
+
+  function _inherits$2(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+      throw new TypeError("Super expression must either be null or a function");
+    }
+
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+      constructor: {
+        value: subClass,
+        writable: true,
+        configurable: true
+      }
+    });
+    Object.defineProperty(subClass, "prototype", {
+      writable: false
+    });
+    if (superClass) _setPrototypeOf(subClass, superClass);
+  }
+
+  function _getPrototypeOf(o) {
+    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+      return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _getPrototypeOf(o);
+  }
+
+  function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
+
+    return _setPrototypeOf(o, p);
+  }
+
+  function _isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+
+    try {
+      Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+      return true;
+    } catch (e) {
+      return false;
+    }
   }
 
   function _objectWithoutPropertiesLoose(source, excluded) {
@@ -103,6 +176,43 @@
     return target;
   }
 
+  function _assertThisInitialized(self) {
+    if (self === void 0) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+
+    return self;
+  }
+
+  function _possibleConstructorReturn$2(self, call) {
+    if (call && (typeof call === "object" || typeof call === "function")) {
+      return call;
+    } else if (call !== void 0) {
+      throw new TypeError("Derived constructors may only return object or undefined");
+    }
+
+    return _assertThisInitialized(self);
+  }
+
+  function _createSuper(Derived) {
+    var hasNativeReflectConstruct = _isNativeReflectConstruct();
+
+    return function _createSuperInternal() {
+      var Super = _getPrototypeOf(Derived),
+          result;
+
+      if (hasNativeReflectConstruct) {
+        var NewTarget = _getPrototypeOf(this).constructor;
+
+        result = Reflect.construct(Super, arguments, NewTarget);
+      } else {
+        result = Super.apply(this, arguments);
+      }
+
+      return _possibleConstructorReturn$2(this, result);
+    };
+  }
+
   function _taggedTemplateLiteral(strings, raw) {
     if (!raw) {
       raw = strings.slice(0);
@@ -176,6 +286,10 @@
 
   var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
+  function getDefaultExportFromCjs (x) {
+  	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+  }
+
   var propTypes = {exports: {}};
 
   /**
@@ -1631,11 +1745,11 @@
    * This source code is licensed under the MIT license found in the
    * LICENSE file in the root directory of this source tree.
    */
-  var b$2=60103,c$1=60106,d$1=60107,e$1=60108,f$1=60114,g$2=60109,h$1=60110,k$2=60112,l$1=60113,m$1=60120,n$1=60115,p$1=60116,q$2=60121,r$1=60122,u=60117,v$2=60129,w$2=60131;
-  if("function"===typeof Symbol&&Symbol.for){var x$2=Symbol.for;b$2=x$2("react.element");c$1=x$2("react.portal");d$1=x$2("react.fragment");e$1=x$2("react.strict_mode");f$1=x$2("react.profiler");g$2=x$2("react.provider");h$1=x$2("react.context");k$2=x$2("react.forward_ref");l$1=x$2("react.suspense");m$1=x$2("react.suspense_list");n$1=x$2("react.memo");p$1=x$2("react.lazy");q$2=x$2("react.block");r$1=x$2("react.server.block");u=x$2("react.fundamental");v$2=x$2("react.debug_trace_mode");w$2=x$2("react.legacy_hidden");}
-  function y$2(a){if("object"===typeof a&&null!==a){var t=a.$$typeof;switch(t){case b$2:switch(a=a.type,a){case d$1:case f$1:case e$1:case l$1:case m$1:return a;default:switch(a=a&&a.$$typeof,a){case h$1:case k$2:case p$1:case n$1:case g$2:return a;default:return t}}case c$1:return t}}}var z$2=g$2,A$1=b$2,B$1=k$2,C$1=d$1,D$1=p$1,E$1=n$1,F$1=c$1,G$1=f$1,H$1=e$1,I$1=l$1;reactIs_production_min$1.ContextConsumer=h$1;reactIs_production_min$1.ContextProvider=z$2;reactIs_production_min$1.Element=A$1;reactIs_production_min$1.ForwardRef=B$1;reactIs_production_min$1.Fragment=C$1;reactIs_production_min$1.Lazy=D$1;reactIs_production_min$1.Memo=E$1;reactIs_production_min$1.Portal=F$1;reactIs_production_min$1.Profiler=G$1;reactIs_production_min$1.StrictMode=H$1;
-  reactIs_production_min$1.Suspense=I$1;reactIs_production_min$1.isAsyncMode=function(){return !1};reactIs_production_min$1.isConcurrentMode=function(){return !1};reactIs_production_min$1.isContextConsumer=function(a){return y$2(a)===h$1};reactIs_production_min$1.isContextProvider=function(a){return y$2(a)===g$2};reactIs_production_min$1.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===b$2};reactIs_production_min$1.isForwardRef=function(a){return y$2(a)===k$2};reactIs_production_min$1.isFragment=function(a){return y$2(a)===d$1};reactIs_production_min$1.isLazy=function(a){return y$2(a)===p$1};reactIs_production_min$1.isMemo=function(a){return y$2(a)===n$1};
-  reactIs_production_min$1.isPortal=function(a){return y$2(a)===c$1};reactIs_production_min$1.isProfiler=function(a){return y$2(a)===f$1};reactIs_production_min$1.isStrictMode=function(a){return y$2(a)===e$1};reactIs_production_min$1.isSuspense=function(a){return y$2(a)===l$1};reactIs_production_min$1.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===d$1||a===f$1||a===v$2||a===e$1||a===l$1||a===m$1||a===w$2||"object"===typeof a&&null!==a&&(a.$$typeof===p$1||a.$$typeof===n$1||a.$$typeof===g$2||a.$$typeof===h$1||a.$$typeof===k$2||a.$$typeof===u||a.$$typeof===q$2||a[0]===r$1)?!0:!1};
+  var b$3=60103,c$2=60106,d$2=60107,e$1=60108,f$2=60114,g$3=60109,h$2=60110,k$2=60112,l$1=60113,m$2=60120,n$1=60115,p$2=60116,q$3=60121,r$1=60122,u$1=60117,v$3=60129,w$3=60131;
+  if("function"===typeof Symbol&&Symbol.for){var x$3=Symbol.for;b$3=x$3("react.element");c$2=x$3("react.portal");d$2=x$3("react.fragment");e$1=x$3("react.strict_mode");f$2=x$3("react.profiler");g$3=x$3("react.provider");h$2=x$3("react.context");k$2=x$3("react.forward_ref");l$1=x$3("react.suspense");m$2=x$3("react.suspense_list");n$1=x$3("react.memo");p$2=x$3("react.lazy");q$3=x$3("react.block");r$1=x$3("react.server.block");u$1=x$3("react.fundamental");v$3=x$3("react.debug_trace_mode");w$3=x$3("react.legacy_hidden");}
+  function y$2(a){if("object"===typeof a&&null!==a){var t=a.$$typeof;switch(t){case b$3:switch(a=a.type,a){case d$2:case f$2:case e$1:case l$1:case m$2:return a;default:switch(a=a&&a.$$typeof,a){case h$2:case k$2:case p$2:case n$1:case g$3:return a;default:return t}}case c$2:return t}}}var z$3=g$3,A$2=b$3,B$2=k$2,C$1=d$2,D$1=p$2,E$1=n$1,F$1=c$2,G$2=f$2,H$1=e$1,I$1=l$1;reactIs_production_min$1.ContextConsumer=h$2;reactIs_production_min$1.ContextProvider=z$3;reactIs_production_min$1.Element=A$2;reactIs_production_min$1.ForwardRef=B$2;reactIs_production_min$1.Fragment=C$1;reactIs_production_min$1.Lazy=D$1;reactIs_production_min$1.Memo=E$1;reactIs_production_min$1.Portal=F$1;reactIs_production_min$1.Profiler=G$2;reactIs_production_min$1.StrictMode=H$1;
+  reactIs_production_min$1.Suspense=I$1;reactIs_production_min$1.isAsyncMode=function(){return !1};reactIs_production_min$1.isConcurrentMode=function(){return !1};reactIs_production_min$1.isContextConsumer=function(a){return y$2(a)===h$2};reactIs_production_min$1.isContextProvider=function(a){return y$2(a)===g$3};reactIs_production_min$1.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===b$3};reactIs_production_min$1.isForwardRef=function(a){return y$2(a)===k$2};reactIs_production_min$1.isFragment=function(a){return y$2(a)===d$2};reactIs_production_min$1.isLazy=function(a){return y$2(a)===p$2};reactIs_production_min$1.isMemo=function(a){return y$2(a)===n$1};
+  reactIs_production_min$1.isPortal=function(a){return y$2(a)===c$2};reactIs_production_min$1.isProfiler=function(a){return y$2(a)===f$2};reactIs_production_min$1.isStrictMode=function(a){return y$2(a)===e$1};reactIs_production_min$1.isSuspense=function(a){return y$2(a)===l$1};reactIs_production_min$1.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===d$2||a===f$2||a===v$3||a===e$1||a===l$1||a===m$2||a===w$3||"object"===typeof a&&null!==a&&(a.$$typeof===p$2||a.$$typeof===n$1||a.$$typeof===g$3||a.$$typeof===h$2||a.$$typeof===k$2||a.$$typeof===u$1||a.$$typeof===q$3||a[0]===r$1)?!0:!1};
   reactIs_production_min$1.typeOf=y$2;
 
   {
@@ -2337,12 +2451,12 @@
    * 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$1=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(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(a)||z$1(a)===l};reactIs_production_min.isConcurrentMode=A;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$1||a.$$typeof===v$1)};reactIs_production_min.typeOf=z$1;
+  var b$2="function"===typeof Symbol&&Symbol.for,c$1=b$2?Symbol.for("react.element"):60103,d$1=b$2?Symbol.for("react.portal"):60106,e=b$2?Symbol.for("react.fragment"):60107,f$1=b$2?Symbol.for("react.strict_mode"):60108,g$2=b$2?Symbol.for("react.profiler"):60114,h$1=b$2?Symbol.for("react.provider"):60109,k$1=b$2?Symbol.for("react.context"):60110,l=b$2?Symbol.for("react.async_mode"):60111,m$1=b$2?Symbol.for("react.concurrent_mode"):60111,n=b$2?Symbol.for("react.forward_ref"):60112,p$1=b$2?Symbol.for("react.suspense"):60113,q$2=b$2?
+  Symbol.for("react.suspense_list"):60120,r=b$2?Symbol.for("react.memo"):60115,t=b$2?Symbol.for("react.lazy"):60116,v$2=b$2?Symbol.for("react.block"):60121,w$2=b$2?Symbol.for("react.fundamental"):60117,x$2=b$2?Symbol.for("react.responder"):60118,y$1=b$2?Symbol.for("react.scope"):60119;
+  function z$2(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c$1:switch(a=a.type,a){case l:case m$1:case e:case g$2:case f$1:case p$1:return a;default:switch(a=a&&a.$$typeof,a){case k$1:case n:case t:case r:case h$1:return a;default:return u}}case d$1:return u}}}function A$1(a){return z$2(a)===m$1}reactIs_production_min.AsyncMode=l;reactIs_production_min.ConcurrentMode=m$1;reactIs_production_min.ContextConsumer=k$1;reactIs_production_min.ContextProvider=h$1;reactIs_production_min.Element=c$1;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$1;
+  reactIs_production_min.Profiler=g$2;reactIs_production_min.StrictMode=f$1;reactIs_production_min.Suspense=p$1;reactIs_production_min.isAsyncMode=function(a){return A$1(a)||z$2(a)===l};reactIs_production_min.isConcurrentMode=A$1;reactIs_production_min.isContextConsumer=function(a){return z$2(a)===k$1};reactIs_production_min.isContextProvider=function(a){return z$2(a)===h$1};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c$1};reactIs_production_min.isForwardRef=function(a){return z$2(a)===n};reactIs_production_min.isFragment=function(a){return z$2(a)===e};reactIs_production_min.isLazy=function(a){return z$2(a)===t};
+  reactIs_production_min.isMemo=function(a){return z$2(a)===r};reactIs_production_min.isPortal=function(a){return z$2(a)===d$1};reactIs_production_min.isProfiler=function(a){return z$2(a)===g$2};reactIs_production_min.isStrictMode=function(a){return z$2(a)===f$1};reactIs_production_min.isSuspense=function(a){return z$2(a)===p$1};
+  reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m$1||a===g$2||a===f$1||a===p$1||a===q$2||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h$1||a.$$typeof===k$1||a.$$typeof===n||a.$$typeof===w$2||a.$$typeof===x$2||a.$$typeof===y$1||a.$$typeof===v$2)};reactIs_production_min.typeOf=z$2;
 
   {
     reactIs$1.exports = reactIs_production_min;
@@ -2450,7 +2564,7 @@
 
   var hoistNonReactStatics_cjs = hoistNonReactStatics;
 
-  function y(){return (y=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 v=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},g=function(t){return null!==t&&"object"==typeof t&&"[object Object]"===(t.toString?t.toString():Object.prototype.toString.call(t))&&!reactIs$2.exports.typeOf(t)},S=Object.freeze([]),w=Object.freeze({});function E(e){return "function"==typeof e}function b(e){return e.displayName||e.name||"Component"}function _(e){return e&&"string"==typeof e.styledComponentId}var N="undefined"!=typeof process&&(process.env.REACT_APP_SC_ATTR||process.env.SC_ATTR)||"data-styled",C="undefined"!=typeof window&&"HTMLElement"in window,I=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"!=="production");function D(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 new Error("An error occurred. See https://git.io/JUIaE#"+e+" for more information."+(n.length>0?" Args: "+n.join(", "):""))}var j=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&&D(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}(),T=new Map,x=new Map,k=1,V=function(e){if(T.has(e))return T.get(e);for(;x.has(k);)k++;var t=k++;return T.set(e,t),x.set(t,e),t},z=function(e){return x.get(e)},B=function(e,t){t>=k&&(k=t+1),T.set(e,t),x.set(t,e);},M="style["+N+'][data-styled-version="5.3.5"]',G=new RegExp("^"+N+'\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)'),L=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);},F=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(G);if(a){var c=0|parseInt(a[1],10),u=a[2];0!==c&&(B(u,c),L(e,u,a[3]),e.getTag().insertRules(c,r)),r.length=0;}else r.push(i);}}},Y=function(){return "undefined"!=typeof window&&void 0!==window.__webpack_nonce__?window.__webpack_nonce__:null},q=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(N))return r}}(n),s=void 0!==o?o.nextSibling:null;r.setAttribute(N,"active"),r.setAttribute("data-styled-version","5.3.5");var i=Y();return i&&r.setAttribute("nonce",i),n.insertBefore(r,s),r},H=function(){function e(e){var t=this.element=q(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}D(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}(),$=function(){function e(e){var t=this.element=q(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}(),W=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}(),U=C,J={isServer:!C,useCSSOMInjection:!I},X=function(){function e(e,t,n){void 0===e&&(e=w),void 0===t&&(t={}),this.options=y({},J,{},e),this.gs=t,this.names=new Map(n),this.server=!!e.isServer,!this.server&&C&&U&&(U=!1,function(e){for(var t=document.querySelectorAll(M),n=0,r=t.length;n<r;n++){var o=t[n];o&&"active"!==o.getAttribute(N)&&(F(e,o),o.parentNode&&o.parentNode.removeChild(o));}}(this));}e.registerId=function(e){return V(e)};var t=e.prototype;return t.reconstructWithOptions=function(t,n){return void 0===n&&(n=!0),new e(y({},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 W(o):r?new H(o):new $(o),new j(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(V(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(V(e),n);},t.clearNames=function(e){this.names.has(e)&&this.names.get(e).clear();},t.clearRules=function(e){this.getTag().clearGroup(V(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=N+".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}(),Z=/(a)(d)/gi,K=function(e){return String.fromCharCode(e+(e>25?39:97))};function Q(e){var t,n="";for(t=Math.abs(e);t>52;t=t/52|0)n=K(t%52)+n;return (K(t%52)+n).replace(Z,"$1-$2")}var ee=function(e,t){for(var n=t.length;n;)e=33*e^t.charCodeAt(--n);return e},te=function(e){return ee(5381,e)};function ne(e){for(var t=0;t<e.length;t+=1){var n=e[t];if(E(n)&&!_(n))return !1}return !0}var re=te("5.3.5"),oe=function(){function e(e,t,n){this.rules=e,this.staticRulesId="",this.isStatic=(void 0===n||n.isStatic)&&ne(e),this.componentId=t,this.baseHash=ee(re,t),this.baseStyle=n,X.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=_e(this.rules,e,t,n).join(""),i=Q(ee(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=ee(this.baseHash,n.hash),l="",d=0;d<c;d++){var h=this.rules[d];if("string"==typeof h)l+=h;else if(h){var p=_e(h,e,t,n),f=Array.isArray(p)?p.join(""):p;u=ee(u,f+d),l+=f;}}if(l){var m=Q(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}(),se=/^\s*\/\/.*$/gm,ie=[":","[",".","#"];function ae(e){var t,n,r,o,s=void 0===e?w:e,i=s.options,a=void 0===i?w:i,c=s.plugins,u=void 0===c?S:c,l=new stylis_min(a),d=[],p=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!==ie.indexOf(s[n.length])||s.match(o)?e:"."+t};function m(e,s,i,a){void 0===a&&(a="&");var c=e.replace(se,""),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));},p,function(e){if(-2===e){var t=d;return d=[],t}}])),m.hash=u.length?u.reduce((function(e,t){return t.name||D(15),ee(e,t.name)}),5381).toString():"",m}var ce=React__default["default"].createContext();ce.Consumer;var le=React__default["default"].createContext(),de=(le.Consumer,new X),he=ae();function pe(){return React.useContext(ce)||de}function fe(){return React.useContext(le)||he}var ye=function(){function e(e,t){var n=this;this.inject=function(e,t){void 0===t&&(t=he);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 D(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=he),this.name+e.hash},e}(),ve=/([A-Z])/,ge=/([A-Z])/g,Se=/^ms-/,we=function(e){return "-"+e.toLowerCase()};function Ee(e){return ve.test(e)?e.replace(ge,we).replace(Se,"-ms-"):e}var be=function(e){return null==e||!1===e||""===e};function _e(e,n,r,o){if(Array.isArray(e)){for(var s,i=[],a=0,c=e.length;a<c;a+=1)""!==(s=_e(e[a],n,r,o))&&(Array.isArray(s)?i.push.apply(i,s):i.push(s));return i}if(be(e))return "";if(_(e))return "."+e.styledComponentId;if(E(e)){if("function"!=typeof(l=e)||l.prototype&&l.prototype.isReactComponent||!n)return e;var u=e(n);return _e(u,n,r,o)}var l;return e instanceof ye?r?(e.inject(r,o),e.getName(o)):e:g(e)?function e(t,n){var r,o,s=[];for(var i in t)t.hasOwnProperty(i)&&!be(t[i])&&(Array.isArray(t[i])&&t[i].isCss||E(t[i])?s.push(Ee(i)+":",t[i],";"):g(t[i])?s.push.apply(s,e(t[i],i)):s.push(Ee(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 Ne=function(e){return Array.isArray(e)&&(e.isCss=!0),e};function Ae(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 E(e)||g(e)?Ne(_e(v(S,[e].concat(n)))):0===n.length&&1===e.length&&"string"==typeof e[0]?e:Ne(_e(v(e,n)))}var Oe=function(e,t,n){return void 0===n&&(n=w),e.theme!==n.theme&&e.theme||t||n.theme},Re=/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,De=/(^-|-$)/g;function je(e){return e.replace(Re,"-").replace(De,"")}var Te=function(e){return Q(te(e)>>>0)};function xe(e){return "string"==typeof e&&("production"==="production")}var ke=function(e){return "function"==typeof e||"object"==typeof e&&null!==e&&!Array.isArray(e)},Ve=function(e){return "__proto__"!==e&&"constructor"!==e&&"prototype"!==e};function ze(e,t,n){var r=e[n];ke(t)&&ke(r)?Be(r,t):e[n]=t;}function Be(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(ke(i))for(var a in i)Ve(a)&&ze(e,i[a],a);}return e}var Me=React__default["default"].createContext();Me.Consumer;var Fe={};function Ye(e,t,n){var o=_(e),i=!xe(e),a=t.attrs,c=void 0===a?S:a,d=t.componentId,h=void 0===d?function(e,t){var n="string"!=typeof e?"sc":je(e);Fe[n]=(Fe[n]||0)+1;var r=n+"-"+Te("5.3.5"+n+Fe[n]);return t?t+"-"+r:r}(t.displayName,t.parentComponentId):d,p=t.displayName,v=void 0===p?function(e){return xe(e)?"styled."+e:"Styled("+b(e)+")"}(e):p,g=t.displayName&&t.componentId?je(t.displayName)+"-"+t.componentId:t.componentId||h,N=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 oe(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;var m=function(e,t,n){void 0===e&&(e=w);var r=y({},t,{theme:e}),o={};return n.forEach((function(e){var t,n,s,i=e;for(t in E(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]}(Oe(t,React.useContext(Me),a)||w,t,o),v=m[0],g=m[1],S=function(e,t,n,r){var o=pe(),s=fe(),i=t?e.generateAndInjectStyles(w,o,s):e.generateAndInjectStyles(n,o,s);return i}(i,r,v),b=n,_=g.$as||t.$as||g.as||t.as||p,N=xe(_),A=g!==t?y({},t,{},g):t,C={};for(var I in A)"$"!==I[0]&&"as"!==I&&("forwardedAs"===I?C.as=A[I]:(d?d(I,isPropValid,_):!N||isPropValid(I))&&(C[I]=A[I]));return t.style&&g.style!==t.style&&(C.style=y({},t.style,{},g.style)),C.className=Array.prototype.concat(c,h,S!==h?S:null,t.className,g.className).filter(Boolean).join(" "),C.ref=b,React.createElement(_,C)}(C,e,t,P)};return O.displayName=v,(C=React__default["default"].forwardRef(O)).attrs=N,C.componentStyle=I,C.displayName=v,C.shouldForwardProp=A,C.foldedComponentIds=o?Array.prototype.concat(e.foldedComponentIds,e.styledComponentId):S,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+"-"+(xe(e)?e:je(b(e)));return Ye(e,y({},o,{attrs:N,componentId:s}),n)},Object.defineProperty(C,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(t){this._foldedDefaultProps=o?Be({},e.defaultProps,t):t;}}),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 qe=function(e){return function e(t,r,o){if(void 0===o&&(o=w),!reactIs$2.exports.isValidElementType(r))return D(1,String(r));var s=function(){return t(r,o,Ae.apply(void 0,arguments))};return s.withConfig=function(n){return e(t,r,y({},o,{},n))},s.attrs=function(n){return e(t,r,y({},o,{attrs:Array.prototype.concat(o.attrs,n).filter(Boolean)}))},s}(Ye,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){qe[e]=qe(e);}));var styled$4 = qe;
+  function y(){return (y=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 v$1=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},g$1=function(t){return null!==t&&"object"==typeof t&&"[object Object]"===(t.toString?t.toString():Object.prototype.toString.call(t))&&!reactIs$2.exports.typeOf(t)},S=Object.freeze([]),w$1=Object.freeze({});function E(e){return "function"==typeof e}function b$1(e){return e.displayName||e.name||"Component"}function _(e){return e&&"string"==typeof e.styledComponentId}var N$1="undefined"!=typeof process&&(process.env.REACT_APP_SC_ATTR||process.env.SC_ATTR)||"data-styled",C="undefined"!=typeof window&&"HTMLElement"in window,I=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"!=="production");function D(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 new Error("An error occurred. See https://git.io/JUIaE#"+e+" for more information."+(n.length>0?" Args: "+n.join(", "):""))}var j=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&&D(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}(),T$1=new Map,x$1=new Map,k=1,V$1=function(e){if(T$1.has(e))return T$1.get(e);for(;x$1.has(k);)k++;var t=k++;return T$1.set(e,t),x$1.set(t,e),t},z$1=function(e){return x$1.get(e)},B$1=function(e,t){t>=k&&(k=t+1),T$1.set(e,t),x$1.set(t,e);},M="style["+N$1+'][data-styled-version="5.3.5"]',G$1=new RegExp("^"+N$1+'\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)'),L$1=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);},F=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(G$1);if(a){var c=0|parseInt(a[1],10),u=a[2];0!==c&&(B$1(u,c),L$1(e,u,a[3]),e.getTag().insertRules(c,r)),r.length=0;}else r.push(i);}}},Y=function(){return "undefined"!=typeof window&&void 0!==window.__webpack_nonce__?window.__webpack_nonce__:null},q$1=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(N$1))return r}}(n),s=void 0!==o?o.nextSibling:null;r.setAttribute(N$1,"active"),r.setAttribute("data-styled-version","5.3.5");var i=Y();return i&&r.setAttribute("nonce",i),n.insertBefore(r,s),r},H=function(){function e(e){var t=this.element=q$1(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}D(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}(),$$1=function(){function e(e){var t=this.element=q$1(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}(),W=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}(),U=C,J$1={isServer:!C,useCSSOMInjection:!I},X$1=function(){function e(e,t,n){void 0===e&&(e=w$1),void 0===t&&(t={}),this.options=y({},J$1,{},e),this.gs=t,this.names=new Map(n),this.server=!!e.isServer,!this.server&&C&&U&&(U=!1,function(e){for(var t=document.querySelectorAll(M),n=0,r=t.length;n<r;n++){var o=t[n];o&&"active"!==o.getAttribute(N$1)&&(F(e,o),o.parentNode&&o.parentNode.removeChild(o));}}(this));}e.registerId=function(e){return V$1(e)};var t=e.prototype;return t.reconstructWithOptions=function(t,n){return void 0===n&&(n=!0),new e(y({},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 W(o):r?new H(o):new $$1(o),new j(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(V$1(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(V$1(e),n);},t.clearNames=function(e){this.names.has(e)&&this.names.get(e).clear();},t.clearRules=function(e){this.getTag().clearGroup(V$1(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$1(o);if(void 0!==s){var i=e.names.get(s),a=t.getGroup(o);if(i&&a&&i.size){var c=N$1+".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}(),Z=/(a)(d)/gi,K$1=function(e){return String.fromCharCode(e+(e>25?39:97))};function Q(e){var t,n="";for(t=Math.abs(e);t>52;t=t/52|0)n=K$1(t%52)+n;return (K$1(t%52)+n).replace(Z,"$1-$2")}var ee=function(e,t){for(var n=t.length;n;)e=33*e^t.charCodeAt(--n);return e},te=function(e){return ee(5381,e)};function ne(e){for(var t=0;t<e.length;t+=1){var n=e[t];if(E(n)&&!_(n))return !1}return !0}var re=te("5.3.5"),oe=function(){function e(e,t,n){this.rules=e,this.staticRulesId="",this.isStatic=(void 0===n||n.isStatic)&&ne(e),this.componentId=t,this.baseHash=ee(re,t),this.baseStyle=n,X$1.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=_e(this.rules,e,t,n).join(""),i=Q(ee(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=ee(this.baseHash,n.hash),l="",d=0;d<c;d++){var h=this.rules[d];if("string"==typeof h)l+=h;else if(h){var p=_e(h,e,t,n),f=Array.isArray(p)?p.join(""):p;u=ee(u,f+d),l+=f;}}if(l){var m=Q(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}(),se=/^\s*\/\/.*$/gm,ie=[":","[",".","#"];function ae(e){var t,n,r,o,s=void 0===e?w$1:e,i=s.options,a=void 0===i?w$1:i,c=s.plugins,u=void 0===c?S:c,l=new stylis_min(a),d=[],p=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!==ie.indexOf(s[n.length])||s.match(o)?e:"."+t};function m(e,s,i,a){void 0===a&&(a="&");var c=e.replace(se,""),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));},p,function(e){if(-2===e){var t=d;return d=[],t}}])),m.hash=u.length?u.reduce((function(e,t){return t.name||D(15),ee(e,t.name)}),5381).toString():"",m}var ce=React__default["default"].createContext();ce.Consumer;var le=React__default["default"].createContext(),de=(le.Consumer,new X$1),he=ae();function pe(){return React.useContext(ce)||de}function fe(){return React.useContext(le)||he}var ye=function(){function e(e,t){var n=this;this.inject=function(e,t){void 0===t&&(t=he);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 D(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=he),this.name+e.hash},e}(),ve=/([A-Z])/,ge=/([A-Z])/g,Se=/^ms-/,we=function(e){return "-"+e.toLowerCase()};function Ee(e){return ve.test(e)?e.replace(ge,we).replace(Se,"-ms-"):e}var be=function(e){return null==e||!1===e||""===e};function _e(e,n,r,o){if(Array.isArray(e)){for(var s,i=[],a=0,c=e.length;a<c;a+=1)""!==(s=_e(e[a],n,r,o))&&(Array.isArray(s)?i.push.apply(i,s):i.push(s));return i}if(be(e))return "";if(_(e))return "."+e.styledComponentId;if(E(e)){if("function"!=typeof(l=e)||l.prototype&&l.prototype.isReactComponent||!n)return e;var u=e(n);return _e(u,n,r,o)}var l;return e instanceof ye?r?(e.inject(r,o),e.getName(o)):e:g$1(e)?function e(t,n){var r,o,s=[];for(var i in t)t.hasOwnProperty(i)&&!be(t[i])&&(Array.isArray(t[i])&&t[i].isCss||E(t[i])?s.push(Ee(i)+":",t[i],";"):g$1(t[i])?s.push.apply(s,e(t[i],i)):s.push(Ee(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 Ne=function(e){return Array.isArray(e)&&(e.isCss=!0),e};function Ae(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 E(e)||g$1(e)?Ne(_e(v$1(S,[e].concat(n)))):0===n.length&&1===e.length&&"string"==typeof e[0]?e:Ne(_e(v$1(e,n)))}var Oe=function(e,t,n){return void 0===n&&(n=w$1),e.theme!==n.theme&&e.theme||t||n.theme},Re=/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,De=/(^-|-$)/g;function je(e){return e.replace(Re,"-").replace(De,"")}var Te=function(e){return Q(te(e)>>>0)};function xe(e){return "string"==typeof e&&("production"==="production")}var ke=function(e){return "function"==typeof e||"object"==typeof e&&null!==e&&!Array.isArray(e)},Ve=function(e){return "__proto__"!==e&&"constructor"!==e&&"prototype"!==e};function ze(e,t,n){var r=e[n];ke(t)&&ke(r)?Be(r,t):e[n]=t;}function Be(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(ke(i))for(var a in i)Ve(a)&&ze(e,i[a],a);}return e}var Me=React__default["default"].createContext();Me.Consumer;var Fe={};function Ye(e,t,n){var o=_(e),i=!xe(e),a=t.attrs,c=void 0===a?S:a,d=t.componentId,h=void 0===d?function(e,t){var n="string"!=typeof e?"sc":je(e);Fe[n]=(Fe[n]||0)+1;var r=n+"-"+Te("5.3.5"+n+Fe[n]);return t?t+"-"+r:r}(t.displayName,t.parentComponentId):d,p=t.displayName,v=void 0===p?function(e){return xe(e)?"styled."+e:"Styled("+b$1(e)+")"}(e):p,g=t.displayName&&t.componentId?je(t.displayName)+"-"+t.componentId:t.componentId||h,N=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 oe(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;var m=function(e,t,n){void 0===e&&(e=w$1);var r=y({},t,{theme:e}),o={};return n.forEach((function(e){var t,n,s,i=e;for(t in E(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]}(Oe(t,React.useContext(Me),a)||w$1,t,o),v=m[0],g=m[1],S=function(e,t,n,r){var o=pe(),s=fe(),i=t?e.generateAndInjectStyles(w$1,o,s):e.generateAndInjectStyles(n,o,s);return i}(i,r,v),b=n,_=g.$as||t.$as||g.as||t.as||p,N=xe(_),A=g!==t?y({},t,{},g):t,C={};for(var I in A)"$"!==I[0]&&"as"!==I&&("forwardedAs"===I?C.as=A[I]:(d?d(I,isPropValid,_):!N||isPropValid(I))&&(C[I]=A[I]));return t.style&&g.style!==t.style&&(C.style=y({},t.style,{},g.style)),C.className=Array.prototype.concat(c,h,S!==h?S:null,t.className,g.className).filter(Boolean).join(" "),C.ref=b,React.createElement(_,C)}(C,e,t,P)};return O.displayName=v,(C=React__default["default"].forwardRef(O)).attrs=N,C.componentStyle=I,C.displayName=v,C.shouldForwardProp=A,C.foldedComponentIds=o?Array.prototype.concat(e.foldedComponentIds,e.styledComponentId):S,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+"-"+(xe(e)?e:je(b$1(e)));return Ye(e,y({},o,{attrs:N,componentId:s}),n)},Object.defineProperty(C,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(t){this._foldedDefaultProps=o?Be({},e.defaultProps,t):t;}}),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 qe=function(e){return function e(t,r,o){if(void 0===o&&(o=w$1),!reactIs$2.exports.isValidElementType(r))return D(1,String(r));var s=function(){return t(r,o,Ae.apply(void 0,arguments))};return s.withConfig=function(n){return e(t,r,y({},o,{},n))},s.attrs=function(n){return e(t,r,y({},o,{attrs:Array.prototype.concat(o.attrs,n).filter(Boolean)}))},s}(Ye,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){qe[e]=qe(e);}));var styled$9 = qe;
 
   var mainPallet = {
     primary: {
@@ -2558,7 +2672,7 @@
     yellowPressed: alert.pressed,
     transparentWhite: 'rgba(256, 256, 256, 0.5)'
   };
-  var colors = _objectSpread2(_objectSpread2({}, viewsPallet), mainPallet);
+  var palette = _objectSpread2(_objectSpread2({}, viewsPallet), mainPallet);
 
   var lodash = {exports: {}};
 
@@ -19777,8 +19891,8 @@
     var color = arguments.length > 1 ? arguments[1] : undefined;
     var currentColor = color ? "".concat(type, ".").concat(color) : type;
     var currentType = color ? type : currentColor.split('.')[0];
-    var selectedColor = lodash.exports.get(colors, currentColor);
-    selectedColor = lodash.exports.isObject(selectedColor) ? lodash.exports.get(colors, "".concat(currentType, ".main")) : selectedColor;
+    var selectedColor = lodash.exports.get(palette, currentColor);
+    selectedColor = lodash.exports.isObject(selectedColor) ? lodash.exports.get(palette, "".concat(currentType, ".main")) : selectedColor;
     return selectedColor || currentColor;
   };
 
@@ -19807,8 +19921,8 @@
       return Ae(["transition:", ";", ";"], transition, transitionProperty);
     },
     scrollbar: function scrollbar(thumbColor, shadowColor) {
-      var colors$1 = colors.colors;
-      return Ae(["&::-webkit-scrollbar{width:5px;}&::-webkit-scrollbar-track{box-shadow:inset 0 0 6px ", ";}&::-webkit-scrollbar-thumb{height:5px;width:4px;border-radius:50px;background-color:", ";}"], shadowColor || colors$1.white, thumbColor);
+      var colors = palette.colors;
+      return Ae(["&::-webkit-scrollbar{width:5px;}&::-webkit-scrollbar-track{box-shadow:inset 0 0 6px ", ";}&::-webkit-scrollbar-thumb{height:5px;width:4px;border-radius:50px;background-color:", ";}"], shadowColor || colors.white, thumbColor);
     }
   };
 
@@ -19862,17 +19976,17 @@
     }
   };
 
-  var _templateObject$2;
+  var _templateObject$4;
   var styles = {
-    Svg: styled$4.svg.withConfig({
+    Svg: styled$9.svg.withConfig({
       displayName: "styles__Svg",
       componentId: "sc-jf3e5i-0"
     })(["fill:", ";", " ", ";"], function (props) {
       return getColor$1(props.color);
-    }, mediaBreaks.onlyPrint(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n\t\t\tfill: ", ";\n\t\t"])), colors.darkGrey), function (props) {
+    }, mediaBreaks.onlyPrint(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n\t\t\tfill: ", ";\n\t\t"])), palette.darkGrey), function (props) {
       return props.styles;
     }),
-    Path: styled$4.path.withConfig({
+    Path: styled$9.path.withConfig({
       displayName: "styles__Path",
       componentId: "sc-jf3e5i-1"
     })(["fill:inherit;", ";"], function (props) {
@@ -19880,17 +19994,17 @@
     })
   };
   ({
-    Grid: styled$4.div.withConfig({
+    Grid: styled$9.div.withConfig({
       displayName: "styles__Grid",
       componentId: "sc-jf3e5i-2"
     })(["display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));grid-gap:15px;"]),
-    Item: styled$4.div.withConfig({
+    Item: styled$9.div.withConfig({
       displayName: "styles__Item",
       componentId: "sc-jf3e5i-3"
-    })(["padding:5px;border:1px dashed #ccc;cursor:default;display:grid;justify-items:center;justify-content:center;grid-row-gap:5px;", ";& ", "{", ";}&:hover{color:", ";}&:hover ", "{fill:", ";}"], mixins.transition('color'), styles.Svg, mixins.transition('fill'), colors.blue, styles.Svg, colors.blue)
+    })(["padding:5px;border:1px dashed #ccc;cursor:default;display:grid;justify-items:center;justify-content:center;grid-row-gap:5px;", ";& ", "{", ";}&:hover{color:", ";}&:hover ", "{fill:", ";}"], mixins.transition('color'), styles.Svg, mixins.transition('fill'), palette.blue, styles.Svg, palette.blue)
   });
 
-  var _excluded$4 = ["color", "name", "size", "styles", "pathStyles", "width", "height", "viewBox"];
+  var _excluded$6 = ["color", "name", "size", "styles", "pathStyles", "width", "height", "viewBox"];
 
   var Icon = function Icon(_ref) {
     var color = _ref.color,
@@ -19901,7 +20015,7 @@
         width = _ref.width,
         height = _ref.height,
         viewBox = _ref.viewBox,
-        props = _objectWithoutProperties(_ref, _excluded$4);
+        props = _objectWithoutProperties(_ref, _excluded$6);
 
     var iconProps = icons[name];
     if (!iconProps) return null;
@@ -19909,7 +20023,7 @@
         defaultSize = iconProps.size;
     var size = sizeProp || defaultSize;
     if (!path) return null;
-    return /*#__PURE__*/React__default["default"].createElement(styles.Svg, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(styles.Svg, _extends$1({
       width: width || size,
       height: height || size,
       styles: styles$1,
@@ -19962,16 +20076,16 @@
   };
 
   var getColor = function getColor(color) {
-    return isValidColor(color) ? findColor(color) : colors.blue;
+    return isValidColor(color) ? findColor(color) : palette.blue;
   };
   var getHoverColor = function getHoverColor(color) {
-    return isValidColor(color) ? findColor(color, 'hover') : colors.blueHover;
+    return isValidColor(color) ? findColor(color, 'hover') : palette.blueHover;
   };
   var getPressedColor = function getPressedColor(color) {
-    return isValidColor(color) ? findColor(color, 'pressed') : colors.bluePressed;
+    return isValidColor(color) ? findColor(color, 'pressed') : palette.bluePressed;
   };
 
-  var StyledButton = styled$4.button.withConfig({
+  var StyledButton = styled$9.button.withConfig({
     displayName: "styles",
     componentId: "sc-buf2do-0"
   })(["display:flex;align-items:center;justify-content:center;height:36px;width:", ";flex-shrink:", ";border-radius:", ";padding:", ";cursor:", ";border:", ";font-size:13px;font-weight:500;position:relative;", ";z-index:0;&:before{content:'';border-radius:50px;position:absolute;left:0;top:0;z-index:-1;width:100%;height:100%;}&:after{content:'';border-radius:50px;position:absolute;z-index:-1;width:100%;height:100%;transition:all 0.25s ", ";transform:scale(0,0);top:0;bottom:0;left:0;right:0;}&:focus:after,&:hover:after,&:active:after{transform:scale(1,1);}&:active{-webkit-tap-highlight-color:", ";}", "{margin-right:", ";fill:", ";", ";}", ";", "{fill:", ";}", ";"], function (props) {
@@ -19986,16 +20100,16 @@
     return props.disabled ? 'default' : 'pointer';
   }, function (props) {
     return props.variant === 'outlined' ? "1px solid ".concat(getColor$1('grey')) : 'none';
-  }, mixins.transition('background-color', '250ms'), timingFunctions$1.standard, colors.transparentWhite, StyledIcon, function (props) {
+  }, mixins.transition('background-color', '250ms'), timingFunctions$1.standard, palette.transparentWhite, StyledIcon, function (props) {
     return props.hasText && '8px';
-  }, colors.white, mixins.transition('fill', '250ms'), function (props) {
+  }, palette.white, mixins.transition('fill', '250ms'), function (props) {
     switch (props.variant) {
       case 'contained':
-        return Ae(["color:", ";&:before{background-color:", ";}", "{fill:", ";}&:focus:after,&:hover:after{background-color:", ";}&:active:after{background-color:", ";}&:disabled{&:before,&:after{background-color:", ";}}"], getColor$1(props.fontColor), getColor(props.color), StyledIcon, colors.white, getHoverColor(props.color), getPressedColor(props.color), colors.grey);
+        return Ae(["color:", ";&:before{background-color:", ";}", "{fill:", ";}&:focus:after,&:hover:after{background-color:", ";}&:active:after{background-color:", ";}&:disabled{&:before,&:after{background-color:", ";}}"], getColor$1(props.fontColor), getColor(props.color), StyledIcon, palette.white, getHoverColor(props.color), getPressedColor(props.color), palette.grey);
 
       case 'outlined':
       case 'cleaned':
-        return Ae(["color:", ";&:after{background-color:transparent;}", "{fill:", ";}&:focus:after,&:hover:after{background-color:", ";}&:active:after{background-color:", ";}&:disabled{color:", ";&:after{background-color:transparent;}", "{fill:", ";}}"], getColor(props.color), StyledIcon, getColor(props.color), colors.lightGreyHover, colors.lightGrey, colors.grey, StyledIcon, colors.grey);
+        return Ae(["color:", ";&:after{background-color:transparent;}", "{fill:", ";}&:focus:after,&:hover:after{background-color:", ";}&:active:after{background-color:", ";}&:disabled{color:", ";&:after{background-color:transparent;}", "{fill:", ";}}"], getColor(props.color), StyledIcon, getColor(props.color), palette.lightGreyHover, palette.lightGrey, palette.grey, StyledIcon, palette.grey);
 
       default:
         return '';
@@ -20006,7 +20120,7 @@
     return props.styles;
   });
 
-  var _excluded$3 = ["children", "color", "hideLabel", "icon", "iconColor", "iconSize", "fontColor", "rounded", "styles", "variant"];
+  var _excluded$5 = ["children", "color", "hideLabel", "icon", "iconColor", "iconSize", "fontColor", "rounded", "styles", "variant"];
 
   var Button = function Button(_ref) {
     var children = _ref.children,
@@ -20019,9 +20133,9 @@
         rounded = _ref.rounded,
         styles = _ref.styles,
         variant = _ref.variant,
-        props = _objectWithoutProperties(_ref, _excluded$3);
+        props = _objectWithoutProperties(_ref, _excluded$5);
 
-    return /*#__PURE__*/React__default["default"].createElement(StyledButton, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(StyledButton, _extends$1({
       color: color,
       iconColor: iconColor || fontColor,
       fontColor: fontColor,
@@ -20044,8 +20158,8 @@
     variant: 'cleaned'
   };
 
-  var styled$3 = {
-    Container: styled$4.label.withConfig({
+  var styled$8 = {
+    Container: styled$9.label.withConfig({
       displayName: "styles__Container",
       componentId: "sc-18bfcwf-0"
     })(["background:", ";border:1px solid ", ";border-radius:", "px;width:16px;height:16px;line-height:16px;position:relative;cursor:pointer;display:flex;transition:background ", " 0.2s;user-select:none;margin-right:12px;", ";"], function (props) {
@@ -20057,7 +20171,7 @@
     }, timingFunctions$1.standard, function (props) {
       return props.styles;
     }),
-    Input: styled$4.input.withConfig({
+    Input: styled$9.input.withConfig({
       displayName: "styles__Input",
       componentId: "sc-18bfcwf-1"
     })(["opacity:0;position:absolute;cursor:pointer;"]),
@@ -20066,7 +20180,7 @@
     })
   };
 
-  var _excluded$2 = ["autoComplete", "disabled", "defaultChecked", "onChange", "rounded", "styles", "value"];
+  var _excluded$4 = ["autoComplete", "disabled", "defaultChecked", "onChange", "rounded", "styles", "value"];
 
   var Checkbox = function Checkbox(_ref) {
     var autoComplete = _ref.autoComplete,
@@ -20076,7 +20190,7 @@
         rounded = _ref.rounded,
         styles = _ref.styles,
         value = _ref.value,
-        props = _objectWithoutProperties(_ref, _excluded$2);
+        props = _objectWithoutProperties(_ref, _excluded$4);
 
     var _useState = React.useState(!!value || defaultChecked),
         _useState2 = _slicedToArray(_useState, 2),
@@ -20091,18 +20205,18 @@
 
     var _props$checked = props.checked,
         conntroledChecked = _props$checked === void 0 ? checked : _props$checked;
-    return /*#__PURE__*/React__default["default"].createElement(styled$3.Container, {
+    return /*#__PURE__*/React__default["default"].createElement(styled$8.Container, {
       checked: conntroledChecked,
       rounded: rounded,
       styles: styles
-    }, /*#__PURE__*/React__default["default"].createElement(styled$3.Input, _extends({}, props, {
+    }, /*#__PURE__*/React__default["default"].createElement(styled$8.Input, _extends$1({}, props, {
       type: "checkbox",
       disabled: disabled,
       autoComplete: autoComplete ? 'on' : 'off',
       onChange: handleChange
     })), /*#__PURE__*/React__default["default"].createElement(Icon, {
       name: "check_bold",
-      styles: styled$3.iconCheckStyles,
+      styles: styled$8.iconCheckStyles,
       rounded: rounded
     }));
   };
@@ -20114,16 +20228,16 @@
     }
   };
 
-  var _templateObject$1;
-  var styled$2 = {
-    Chip: styled$4.button.withConfig({
+  var _templateObject$3;
+  var styled$7 = {
+    Chip: styled$9.button.withConfig({
       displayName: "styles__Chip",
       componentId: "sc-1vnh4co-0"
-    })(["padding:", ";cursor:", ";font-size:13px;color:", ";height:", ";width:", ";max-width:150px;border-radius:", ";display:inline-flex;justify-content:center;align-items:center;pointer-events:", ";white-space:nowrap;", " ", ";", " ", " ", " ", ""], function (props) {
+    })(["padding:", ";cursor:", ";font-size:13px;color:", ";height:", ";width:", ";max-width:150px;border-radius:", ";display:inline-flex;justify-content:center;align-items:center;pointer-events:", ";white-space:nowrap;.chip-icon{margin-right:", ";}", " ", ";", " ", " ", " ", ""], function (props) {
       return props.hasText ? '0 12px' : '0';
     }, function (props) {
       return props.clickable ? 'pointer' : 'default';
-    }, colors.black.main, function (props) {
+    }, palette.black.main, function (props) {
       return props.hasText ? '32px' : '36px';
     }, function (props) {
       return !props.hasText && '36px';
@@ -20131,16 +20245,18 @@
       return props.hasText ? '50px' : '50%';
     }, function (props) {
       return props.clickable ? 'auto' : 'none';
+    }, function (props) {
+      return props.hasText && '8px';
     }, function (props) {
       switch (props.variant) {
         case 'outlined':
-          return Ae(["border:1px solid ", ";color:", ";&:hover{background-color:", ";}&:hover .chip-icon,&:hover .delete-button{fill:", ";}&:active{border-color:", ";color:", ";background-color:transparent;}&:active .chip-icon,&:active .delete-button{fill:", ";}"], props.selected ? colors.primary.main : '#EAEBED', props.selected ? colors.primary.main : colors.black.main, colors.white.hover, props.selected ? colors.primary.main : colors.black.main, colors.primary.main, colors.primary.main, colors.primary.main);
+          return Ae(["border:1px solid ", ";color:", ";&:hover{background-color:", ";}&:hover .chip-icon,&:hover .delete-button{fill:", ";}&:active{border-color:", ";color:", ";background-color:transparent;}&:active .chip-icon,&:active .delete-button{fill:", ";}"], props.selected ? palette.primary.main : '#EAEBED', props.selected ? palette.primary.main : palette.black.main, palette.white.hover, props.selected ? palette.primary.main : palette.black.main, palette.primary.main, palette.primary.main, palette.primary.main);
 
         case 'contained':
-          return Ae(["background-color:", ";color:", ";.chip-icon{fill:", ";}.delete-button{fill:", ";}&:hover{background-color:", ";}&:hover .delete-button{fill:", ";}&:active{background-color:", ";color:", ";}&:active .chip-icon,&:active .delete-button{fill:", ";}&:disabled{fill:", ";color:", ";}"], props.selected ? colors.primary.main : colors.white.hover, props.selected ? colors.base.withe : colors.black.main, props.selected ? colors.base.withe : colors.black.main, props.selected ? colors.base.withe : colors.grey.dark, props.selected ? colors.primary.mainHover : colors.white.main, props.selected ? colors.base.withe : colors.black.main, colors.primary.main, colors.base.withe, colors.base.withe, colors.grey.main, colors.grey.main);
+          return Ae(["background-color:", ";color:", ";.chip-icon{fill:", ";}.delete-button{fill:", ";}&:hover{background-color:", ";}&:hover .delete-button{fill:", ";}&:active{background-color:", ";color:", ";}&:active .chip-icon,&:active .delete-button{fill:", ";}&:disabled{fill:", ";color:", ";}"], props.selected ? palette.primary.main : palette.white.hover, props.selected ? palette.base.white : palette.black.main, props.selected ? palette.base.white : palette.black.main, props.selected ? palette.base.white : palette.grey.dark, props.selected ? palette.primary.mainHover : palette.white.main, props.selected ? palette.base.white : palette.black.main, palette.primary.main, palette.base.white, palette.base.white, palette.grey.main, palette.grey.main);
 
         case 'status':
-          return Ae(["background-color:", ";color:", ";font-weight:700;border:none;height:24px;padding:0 17px;line-height:28px;max-width:170px;"], getColor$1(props.color.type || 'grey', props.color.color || 'main'), getColor$1(props.sizeColor.type || 'white', props.sizeColor.color || 'main'));
+          return Ae(["background-color:", ";color:", ";font-weight:700;border:none;height:24px;padding:0 17px;line-height:28px;max-width:170px;"], getColor$1(props.color || 'grey'), getColor$1(props.sizeColor || 'base.white'));
 
         default:
           return '';
@@ -20148,68 +20264,94 @@
     }, function (props) {
       return props.styles;
     }, function (props) {
-      return props.borderColor && "border: solid 1px ".concat(getColor$1(props.borderColor.type, props.borderColor.color), ";");
+      return props.borderColor && "border: solid 1px ".concat(getColor$1(props.borderColor), ";");
     }, function (props) {
-      return props.backgroundColor && "background-color: ".concat(getColor$1(props.backgroundColor.type, props.backgroundColor.color), ";");
+      return props.backgroundColor && "background-color: ".concat(getColor$1(props.backgroundColor), ";");
     }, function (props) {
-      return props.textColor && "color: ".concat(getColor$1(props.textColor.type, props.textColor.color), ";");
-    }, mediaBreaks.onlyPrint(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n\t\t\tborder: 1px solid ", ";\n\t\t"])), colors.darkGrey)),
-    Children: styled$4.div.withConfig({
-      displayName: "styles__Children",
+      return props.textColor && "color: ".concat(getColor$1(props.textColor), ";");
+    }, mediaBreaks.onlyPrint(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n\t\t\tborder: 1px solid ", ";\n\t\t"])), palette.grey.dark)),
+    iconPathStyles: Ae(["", ";"], mixins.transition('fill')),
+    DeleteButton: styled$9.button.withConfig({
+      displayName: "styles__DeleteButton",
       componentId: "sc-1vnh4co-1"
+    })(["width:16px;height:16px;margin-left:12px;"]),
+    deleteButtonPathStyles: Ae(["", ";"], mixins.transition('fill')),
+    Children: styled$9.div.withConfig({
+      displayName: "styles__Children",
+      componentId: "sc-1vnh4co-2"
     })(["text-overflow:ellipsis;overflow:hidden;"])
   };
 
-  var _excluded$1 = ["backgroundColor", "borderColor", "children", "disabled", "onClick", "selected", "styles", "textColor", "variant"];
+  var _excluded$3 = ["backgroundColor", "borderColor", "children", "disabled", "icon", "iconColor", "onClick", "onDelete", "selected", "styles", "textColor", "variant"];
 
   var Chip = function Chip(_ref) {
     var backgroundColor = _ref.backgroundColor,
         borderColor = _ref.borderColor,
         children = _ref.children,
         disabled = _ref.disabled,
+        icon = _ref.icon,
+        iconColor = _ref.iconColor,
         onClick = _ref.onClick,
+        onDelete = _ref.onDelete,
         selected = _ref.selected,
         styles = _ref.styles,
         textColor = _ref.textColor,
         variant = _ref.variant,
-        props = _objectWithoutProperties(_ref, _excluded$1);
+        props = _objectWithoutProperties(_ref, _excluded$3);
 
-    return /*#__PURE__*/React__default["default"].createElement(styled$2.Chip, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(styled$7.Chip, _extends$1({
       as: props.onClick ? 'button' : 'div',
       backgroundColor: backgroundColor,
       borderColor: borderColor,
       hasText: !!children || children === 0,
+      hasIcon: !!icon,
       disabled: disabled,
-      clickable: onClick && !disabled,
+      clickable: (onClick || onDelete) && !disabled,
       onClick: disabled ? undefined : onClick,
       selected: selected,
       styles: styles,
       textColor: textColor,
-      variant: variant
-    }, props), /*#__PURE__*/React__default["default"].createElement(styled$2.Children, null, children));
+      variant: variant,
+      iconColor: iconColor
+    }, props), icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
+      className: "chip-icon",
+      name: icon,
+      color: iconColor,
+      pathStyles: styled$7.iconPathStyles
+    }), /*#__PURE__*/React__default["default"].createElement(styled$7.Children, null, children), onDelete && /*#__PURE__*/React__default["default"].createElement(styled$7.DeleteButton, {
+      type: "button",
+      onClick: onDelete
+    }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+      color: "black",
+      pathStyles: styled$7.deleteButtonPathStyles,
+      className: "delete-button",
+      name: "cross_circle_flat",
+      size: 16
+    })));
   };
 
   Chip.defaultProps = {
     backgroundColor: '',
     borderColor: '',
     disabled: false,
+    iconColor: 'grey',
     selected: false,
     textColor: '',
     variant: 'outlined'
   };
 
-  var styled$1 = {
-    Wrapper: styled$4.div.withConfig({
+  var styled$6 = {
+    Wrapper: styled$9.div.withConfig({
       displayName: "styles__Wrapper",
       componentId: "sc-zbd85t-0"
     })(["display:flex;align-items:center;"]),
-    ColorSample: styled$4.div.withConfig({
+    ColorSample: styled$9.div.withConfig({
       displayName: "styles__ColorSample",
       componentId: "sc-zbd85t-1"
     })(["display:block;width:16px;height:16px;background-color:", ";border:1px solid ", ";border-radius:50%;"], function (props) {
       return props.color;
-    }, colors.grey),
-    Label: styled$4.span.withConfig({
+    }, palette.grey),
+    Label: styled$9.span.withConfig({
       displayName: "styles__Label",
       componentId: "sc-zbd85t-2"
     })(["margin-left:5px;text-transform:", ";"], function (props) {
@@ -20217,11 +20359,11 @@
     })
   };
   ({
-    Grid: styled$4.div.withConfig({
+    Grid: styled$9.div.withConfig({
       displayName: "styles__Grid",
       componentId: "sc-zbd85t-3"
     })(["display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));grid-gap:15px;"]),
-    Item: styled$4.div.withConfig({
+    Item: styled$9.div.withConfig({
       displayName: "styles__Item",
       componentId: "sc-zbd85t-4"
     })(["padding:5px;border:1px dashed #ccc;cursor:default;display:grid;justify-items:center;justify-content:center;grid-row-gap:5px;"])
@@ -20232,14 +20374,14 @@
         showLabel = _ref.showLabel;
     if (!color) return null;
     var colorCode = getColor$1(color);
-    return /*#__PURE__*/React__default["default"].createElement(styled$1.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled$1.ColorSample, {
+    return /*#__PURE__*/React__default["default"].createElement(styled$6.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled$6.ColorSample, {
       color: colorCode
-    }), showLabel && /*#__PURE__*/React__default["default"].createElement(styled$1.Label, {
+    }), showLabel && /*#__PURE__*/React__default["default"].createElement(styled$6.Label, {
       color: colorCode
     }, colorCode));
   };
 
-  var _templateObject, _templateObject2, _templateObject3;
+  var _templateObject$2, _templateObject2, _templateObject3;
   var onlyDesktop = mediaBreaks.onlyDesktop,
       onlyPrint = mediaBreaks.onlyPrint;
   var statusColor = function statusColor(props) {
@@ -20248,55 +20390,55 @@
 
     switch (true) {
       case disabled && checked:
-        return colors.blueDisabled;
+        return palette.blueDisabled;
 
       case disabled:
-        return colors.grey.main;
+        return palette.grey.main;
 
       case checked:
-        return colors.blue;
+        return palette.blue;
 
       default:
-        return colors.darkGrey;
+        return palette.darkGrey;
     }
   };
-  var Ball = styled$4.div.withConfig({
+  var Ball = styled$9.div.withConfig({
     displayName: "styles__Ball",
     componentId: "sc-rtzdt3-0"
-  })(["width:16px;height:16px;border-radius:50%;position:absolute;top:4px;left:4px;background-color:", ";transition:all ", " 0.2s;", ""], colors.base.white, timingFunctions$1.standard, function (props) {
+  })(["width:16px;height:16px;border-radius:50%;position:absolute;top:4px;left:4px;background-color:", ";transition:all ", " 0.2s;", ""], palette.base.white, timingFunctions$1.standard, function (props) {
     return props.checked && "\n\t\t\tleft: 100%;\n\t\t\tmargin-left: -20px;\n\t\t";
   });
   var iconCheckStyles = Ae(["position:absolute;fill:", ";", ""], function (props) {
     return statusColor(props);
-  }, onlyPrint(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\tfill: ", " !important;\n\t"])), function (props) {
-    return props.checked ? colors.black : colors.darkGrey;
+  }, onlyPrint(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n\t\tfill: ", " !important;\n\t"])), function (props) {
+    return props.checked ? palette.black : palette.darkGrey;
   }));
-  var styled = {
-    OuterContainer: styled$4.div.withConfig({
+  var styled$5 = {
+    OuterContainer: styled$9.div.withConfig({
       displayName: "styles__OuterContainer",
       componentId: "sc-rtzdt3-1"
     })(["display:flex;width:44px;align-items:center;pointer-events:", ";align-self:center;position:relative;", " &:active ", "{box-shadow:0px 0px 0px 10px ", ";", " svg{fill:", ";}}"], function (props) {
       return props.disabled ? 'none' : 'auto';
-    }, onlyDesktop(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t&:hover ", " {\n\t\t\t\tbox-shadow: 0px 0px 0px 10px ", ";\n\t\t\t}\n\t\t"])), Ball, colors.lightGreyHover), Ball, colors.lightGrey,
+    }, onlyDesktop(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t&:hover ", " {\n\t\t\t\tbox-shadow: 0px 0px 0px 10px ", ";\n\t\t\t}\n\t\t"])), Ball, palette.lightGreyHover), Ball, palette.lightGrey,
     /* sc-selector */
     iconCheckStyles, function (props) {
-      return props.checked ? colors.blue : colors.darkGrey;
+      return props.checked ? palette.blue : palette.darkGrey;
     }),
-    Input: styled$4.input.withConfig({
+    Input: styled$9.input.withConfig({
       displayName: "styles__Input",
       componentId: "sc-rtzdt3-2"
     })(["position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1;"]),
     Ball: Ball,
-    Container: styled$4.div.withConfig({
+    Container: styled$9.div.withConfig({
       displayName: "styles__Container",
       componentId: "sc-rtzdt3-3"
     })(["width:44px;height:24px;background-color:", ";border-radius:50px;position:relative;", ""], function (props) {
       return statusColor(props);
-    }, onlyPrint(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t\tborder: 1px solid ", ";\n\t\t"])), colors.darkGrey)),
+    }, onlyPrint(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t\tborder: 1px solid ", ";\n\t\t"])), palette.darkGrey)),
     iconCheckStyles: iconCheckStyles
   };
 
-  var _excluded = ["autoComplete", "defaultChecked", "disabled", "id", "name", "onChange", "value"];
+  var _excluded$2 = ["autoComplete", "defaultChecked", "disabled", "id", "name", "onChange", "value"];
 
   var Switch = function Switch(_ref) {
     var autoComplete = _ref.autoComplete,
@@ -20306,7 +20448,7 @@
         name = _ref.name,
         onChange = _ref.onChange,
         value = _ref.value,
-        props = _objectWithoutProperties(_ref, _excluded);
+        props = _objectWithoutProperties(_ref, _excluded$2);
 
     var _useState = React.useState(!!value || defaultChecked),
         _useState2 = _slicedToArray(_useState, 2),
@@ -20321,10 +20463,10 @@
 
     var _props$checked = props.checked,
         controledChecked = _props$checked === void 0 ? checked : _props$checked;
-    return /*#__PURE__*/React__default["default"].createElement(styled.OuterContainer, {
+    return /*#__PURE__*/React__default["default"].createElement(styled$5.OuterContainer, {
       disabled: disabled,
       checked: checked
-    }, /*#__PURE__*/React__default["default"].createElement(styled.Input, {
+    }, /*#__PURE__*/React__default["default"].createElement(styled$5.Input, {
       checked: controledChecked,
       id: id,
       name: name,
@@ -20332,10 +20474,10 @@
       disabled: disabled,
       autoComplete: autoComplete ? 'on' : 'off',
       onChange: handleChange
-    }), /*#__PURE__*/React__default["default"].createElement(styled.Container, {
+    }), /*#__PURE__*/React__default["default"].createElement(styled$5.Container, {
       checked: controledChecked,
       disabled: disabled
-    }, /*#__PURE__*/React__default["default"].createElement(styled.Ball, {
+    }, /*#__PURE__*/React__default["default"].createElement(styled$5.Ball, {
       checked: controledChecked,
       disabled: disabled
     }, /*#__PURE__*/React__default["default"].createElement(Icon, {
@@ -20343,7 +20485,7 @@
       disabled: disabled,
       name: "check_bold",
       size: 16,
-      styles: styled.iconCheckStyles
+      styles: styled$5.iconCheckStyles
     }))));
   };
 
@@ -20356,12 +20498,1964 @@
     }
   };
 
+  var typography = {
+    fontFamily: 'Roboto, sans-serif',
+    size: {
+      base: '13px',
+      baseSmall: '12px',
+      medium: '14px',
+      small: '11px',
+      xsmall: '9px',
+      large: '16px',
+      xlarge: '18px',
+      xxlarge: '20px'
+    }
+  };
+
+  var _templateObject$1;
+  var fontSize$1 = typography.size.medium;
+
+  var changeColor = function changeColor(props) {
+    var isFocused = props.isFocused,
+        isFloating = props.isFloating,
+        disabled = props.disabled,
+        error = props.error;
+
+    switch (true) {
+      case disabled:
+        return palette.grey.main;
+
+      case error:
+        return palette.error.main;
+
+      case isFocused:
+        return palette.primary.main;
+
+      case isFloating:
+        return palette.grey.dark;
+
+      default:
+        return palette.grey.darkPressed;
+    }
+  };
+
+  var hoverAndFocusColor = function hoverAndFocusColor(props) {
+    var isFocused = props.isFocused,
+        disabled = props.disabled,
+        error = props.error;
+
+    switch (true) {
+      case disabled:
+        return palette.grey.main;
+
+      case error:
+        return palette.error.main;
+
+      case isFocused:
+        return palette.primary.main;
+
+      default:
+        return palette.black.main;
+    }
+  };
+
+  var styled$4 = {
+    Container: styled$9.div.withConfig({
+      displayName: "styles__Container",
+      componentId: "sc-1fhkfhs-0"
+    })(["position:relative;width:", ";"], function (props) {
+      return props.fullWidth ? '100%' : 'auto';
+    }),
+    FloatingLabel: styled$9.div.withConfig({
+      displayName: "styles__FloatingLabel",
+      componentId: "sc-1fhkfhs-1"
+    })(["position:absolute;font-size:", ";font-weight:400;color:", ";height:30px;line-height:30px;bottom:0;left:0;", " transform-origin:top left;transform:", ";transition:all 0.2s ", ";", ""], fontSize$1, function (props) {
+      return changeColor(props);
+    }, function (_ref) {
+      var isTranslateActive = _ref.isTranslateActive;
+      return !isTranslateActive && "pointer-events: none;";
+    }, function (props) {
+      return props.isFloating && 'translate(0, -18px) scale(0.75)';
+    }, timingFunctions.standard, function (_ref2) {
+      var hasIcon = _ref2.hasIcon,
+          isFloating = _ref2.isFloating;
+      return hasIcon && !isFloating && "padding-left: 32px";
+    }),
+    Input: styled$9.input.withConfig({
+      displayName: "styles__Input",
+      componentId: "sc-1fhkfhs-2"
+    })(["@keyframes onAutoFill{}", " height:34px;border:none;font-size:", ";font-weight:400;color:", ";transition:color 0.2s ", ";cursor:pointer;width:100%;border-bottom:1px solid ", ";border-radius:0;", " ", " ", " &:hover{border-color:", ";}&:focus{border-color:", ";caret-color:", ";outline:none;}&:disabled{background-color:", ";color:", ";border-color:", ";cursor:default;}&:-webkit-autofill{animation-name:onAutoFill;}::-webkit-inner-spin-button{appearance:none;}", ""], function (props) {
+      return !props.noMinWidth && 'min-width: 100px;';
+    }, fontSize$1, palette.black.main, timingFunctions.standard, palette.grey.main, function (_ref3) {
+      var error = _ref3.error;
+      return error && "border-bottom-color: ".concat(palette.error.main, ";");
+    }, function (_ref4) {
+      var hasIcon = _ref4.hasIcon;
+      return hasIcon && "padding-left: 32px;";
+    }, mixins.placeholder(Ae(["font-weight:400;color:", ";"], function (_ref5) {
+      var error = _ref5.error;
+      return error ? palette.error.main : palette.grey.darkPressed;
+    })), function (props) {
+      return hoverAndFocusColor(props);
+    }, function (props) {
+      return hoverAndFocusColor(props);
+    }, function (props) {
+      return hoverAndFocusColor(props);
+    }, palette.base.white, palette.grey.main, palette.grey.main, mediaBreaks.onlyPrint(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n\t\t\tborder-bottom: none;\n\t\t"])))),
+    ErrorMessage: styled$9.span.withConfig({
+      displayName: "styles__ErrorMessage",
+      componentId: "sc-1fhkfhs-3"
+    })(["color:", ";font-size:12px;line-height:14px;transform:translateY(-6px);word-break:break-word;"], palette.error.main),
+    InputIcon: styled$9(Icon).withConfig({
+      displayName: "styles__InputIcon",
+      componentId: "sc-1fhkfhs-4"
+    })(["position:absolute;flex-shrink:0;flex-grow:0;margin-right:8px;height:100%;"])
+  };
+
+  var _excluded$1 = ["icon", "error", "disabled", "placeholder", "errorMessage", "autoComplete", "hasFloatingLabel", "value", "isTranslateActive", "defaultValue"];
+
+  var Input = /*#__PURE__*/function (_PureComponent) {
+    _inherits$2(Input, _PureComponent);
+
+    var _super = _createSuper(Input);
+
+    function Input() {
+      var _this;
+
+      _classCallCheck$2(this, Input);
+
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      _this = _super.call.apply(_super, [this].concat(args));
+
+      _defineProperty(_assertThisInitialized(_this), "state", {
+        isFocused: _this.props.isFocused,
+        value: _this.props.defaultValue // for uncontroled input
+
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "input", /*#__PURE__*/React__default["default"].createRef());
+
+      _defineProperty(_assertThisInitialized(_this), "handleBlur", function (event) {
+        if (_this.props.hasFloatingLabel) _this.setState({
+          isFocused: false
+        });
+
+        _this.setState({
+          value: event.target.value
+        });
+
+        _this.props.onBlur(event);
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "handleChange", function (event) {
+        var input = event.target;
+
+        _this.setState({
+          value: input.value
+        });
+
+        _this.props.onChange(event);
+
+        _this.cursorStart = input.selectionStart;
+        _this.cursorEnd = input.selectionEnd;
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "handleFocus", function () {
+        if (_this.props.hasFloatingLabel) _this.setState({
+          isFocused: true
+        });
+
+        _this.props.onFocus();
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "handleLabelClick", function () {
+        _this.input.current.focus();
+      });
+
+      return _this;
+    }
+
+    _createClass$2(Input, [{
+      key: "componentDidUpdate",
+      value: function componentDidUpdate(prevProps, prevState) {
+        // For maintain cursor position on update input value
+        if (prevProps.value !== this.props.value || prevState.value !== this.state.value && this.input.current) {
+          if (this.input.current.type === 'text') {
+            this.input.current.selectionStart = this.cursorStart;
+            this.input.current.selectionEnd = this.cursorEnd;
+          }
+        }
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var _this$state = this.state,
+            isFocused = _this$state.isFocused,
+            stateValue = _this$state.value;
+
+        var _this$props = this.props,
+            icon = _this$props.icon,
+            error = _this$props.error,
+            disabled = _this$props.disabled,
+            placeholder = _this$props.placeholder,
+            errorMessage = _this$props.errorMessage,
+            autoComplete = _this$props.autoComplete,
+            hasFloatingLabel = _this$props.hasFloatingLabel,
+            _this$props$value = _this$props.value,
+            value = _this$props$value === void 0 ? stateValue : _this$props$value,
+            isTranslateActive = _this$props.isTranslateActive;
+            _this$props.defaultValue;
+            var props = _objectWithoutProperties(_this$props, _excluded$1);
+
+        var autoCompleteOff = props.type === 'password' ? 'new-password' : 'off';
+        var isFloating = isFocused || !!value.toString();
+        return /*#__PURE__*/React__default["default"].createElement(styled$4.Container, {
+          fullWidth: props.fullWidth
+        }, /*#__PURE__*/React__default["default"].createElement(styled$4.Container, {
+          fullWidth: props.fullWidth
+        }, hasFloatingLabel && /*#__PURE__*/React__default["default"].createElement(styled$4.FloatingLabel, {
+          "data-test": "floatingLabel",
+          error: error,
+          onClick: this.handleLabelClick,
+          disabled: disabled,
+          isFocused: isFocused,
+          isFloating: isFloating,
+          hasIcon: !!icon,
+          isTranslateActive: isTranslateActive
+        }, props.label), icon && /*#__PURE__*/React__default["default"].createElement(styled$4.InputIcon, {
+          name: icon,
+          color: error ? 'error' : 'black'
+        }), /*#__PURE__*/React__default["default"].createElement(styled$4.Input, _extends$1({}, props, {
+          ref: this.input,
+          placeholder: hasFloatingLabel && !isFloating ? '' : placeholder,
+          onBlur: this.handleBlur,
+          onFocus: this.handleFocus,
+          onChange: this.handleChange,
+          autoComplete: autoComplete ? 'on' : autoCompleteOff,
+          disabled: disabled,
+          value: value,
+          isFocused: isFocused,
+          error: error,
+          hasIcon: !!icon,
+          onAnimationStart: this.handleFocus
+        }))), error && /*#__PURE__*/React__default["default"].createElement(styled$4.ErrorMessage, {
+          "data-test": "errorMessage"
+        }, errorMessage));
+      }
+    }]);
+
+    return Input;
+  }(React.PureComponent);
+
+  Input.defaultProps = {
+    defaultValue: '',
+    disabled: false,
+    autoComplete: false,
+    isFocused: false,
+    error: false,
+    errorMessage: '',
+    fullWidth: false,
+    hasFloatingLabel: true,
+    isTranslateActive: false,
+    onBlur: function onBlur() {
+      return null;
+    },
+    onChange: function onChange() {
+      return null;
+    },
+    onFocus: function onFocus() {
+      return null;
+    },
+    type: 'text'
+  };
+
+  var _templateObject;
+  var fontSize = typography.size.medium;
+
+  var placeholderColor = function placeholderColor(props) {
+    var isFocused = props.isFocused,
+        isFloating = props.isFloating,
+        disabled = props.disabled,
+        error = props.error;
+
+    switch (true) {
+      case disabled:
+        return palette.grey.main;
+
+      case error:
+        return palette.error.main;
+
+      case isFocused:
+        return palette.primary.main;
+
+      case isFloating:
+        return palette.grey.dark;
+
+      default:
+        return palette.grey.darkPressed;
+    }
+  };
+
+  var styled$3 = {
+    Container: styled$9.div.withConfig({
+      displayName: "styles__Container",
+      componentId: "sc-wtau65-0"
+    })(["position:relative;width:", ";"], function (props) {
+      return props.fullWidth ? '100%' : 'auto';
+    }),
+    Textarea: styled$9.textarea.withConfig({
+      displayName: "styles__Textarea",
+      componentId: "sc-wtau65-1"
+    })(["border:none;border-bottom:1px solid ", ";border-radius:0;height:23px;max-height:350px;padding:0 9px 4px 0;resize:none;font-size:", ";font-weight:400;color:", ";", ";width:", ";", " ", " &:hover{border-color:", ";}&:focus{border-color:", ";caret-color:", ";outline:none;}&:disabled{background-color:", ";color:", ";border-color:", ";cursor:default;}", " ", ""], palette.grey.main, fontSize, palette.black.main, mixins.transition('color,border-color', '0.2s'), function (props) {
+      return props.fullWidth ? '100%' : 'auto';
+    }, mixins.placeholder(Ae(["opacity:1;color:", ";"], function (props) {
+      return placeholderColor(props);
+    })), mixins.scrollbar(palette.grey.main, palette.base.white), palette.black.main, palette.primary.main, palette.primary.main, palette.base.white, palette.grey.main, palette.grey.main, function (props) {
+      return props.error && "\n\t\t\t&, &:hover, &:focus {\n\t\t\t\tborder-color: ".concat(palette.error.main, "\n\t\t\t}\n\t\t");
+    }, mediaBreaks.onlyPrint(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t\tmin-height: initial;\n\t\t\theight: auto !important;\n\t\t\tborder-bottom: none;\n\t\t"])))),
+    FloatingLabel: styled$9.div.withConfig({
+      displayName: "styles__FloatingLabel",
+      componentId: "sc-wtau65-2"
+    })(["position:absolute;font-size:", ";font-weight:400;color:", ";height:24px;line-height:22px;top:0;left:0;pointer-events:", ";transform-origin:top left;transform:", ";transition:all 0.2s ", ";"], fontSize, function (props) {
+      return placeholderColor(props);
+    }, function (_ref) {
+      var isTranslateActive = _ref.isTranslateActive;
+      return isTranslateActive ? 'auto' : 'none';
+    }, function (props) {
+      return props.isFloating && 'translate(0, -18px) scale(0.75)';
+    }, timingFunctions.standard),
+    ErrorMessage: styled$9.span.withConfig({
+      displayName: "styles__ErrorMessage",
+      componentId: "sc-wtau65-3"
+    })(["color:", ";font-size:12px;line-height:14px;display:block;word-break:break-word;"], palette.error.main)
+  };
+
+  var _excluded = ["label", "error", "disabled", "placeholder", "autoComplete", "errorMessage", "hasFloatingLabel", "isTranslateActive", "value", "defaultValue"];
+
+  var Textarea = /*#__PURE__*/function (_PureComponent) {
+    _inherits$2(Textarea, _PureComponent);
+
+    var _super = _createSuper(Textarea);
+
+    function Textarea() {
+      var _this;
+
+      _classCallCheck$2(this, Textarea);
+
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      _this = _super.call.apply(_super, [this].concat(args));
+
+      _defineProperty(_assertThisInitialized(_this), "state", {
+        isFocused: false,
+        value: _this.props.defaultValue // for uncontrolled input
+
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "textarea", /*#__PURE__*/React__default["default"].createRef());
+
+      _defineProperty(_assertThisInitialized(_this), "getScrollHeight", function () {
+        if (!(_this.textarea && _this.textarea.current)) return 'auto';
+        var scrollHeight = _this.textarea.current.scrollHeight;
+        return scrollHeight <= 350 ? scrollHeight + 1 : 351;
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "handleBlur", function (event) {
+        if (_this.props.hasFloatingLabel) _this.setState({
+          isFocused: false
+        });
+
+        _this.setState({
+          value: event.target.value
+        });
+
+        _this.props.onBlur(event);
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "handleChange", function (event) {
+        _this.setState({
+          value: event.target.value
+        });
+
+        _this.props.onChange(event);
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "handleInput", function () {
+        _this.setStyleHeight(5);
+
+        _this.setStyleHeight(_this.getScrollHeight());
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "handleFocus", function () {
+        if (_this.props.hasFloatingLabel) _this.setState({
+          isFocused: true
+        });
+
+        _this.props.onFocus();
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "handleLabelClick", function () {
+        _this.textarea.current.focus();
+      });
+
+      return _this;
+    }
+
+    _createClass$2(Textarea, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        this.setStyleHeight(this.getScrollHeight());
+      }
+    }, {
+      key: "setStyleHeight",
+      value: function setStyleHeight(n) {
+        if (this.textarea && this.textarea.current) this.textarea.current.style.height = "".concat(n, "px");
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var _this$state = this.state,
+            stateValue = _this$state.value,
+            isFocused = _this$state.isFocused;
+
+        var _this$props = this.props,
+            label = _this$props.label,
+            error = _this$props.error,
+            disabled = _this$props.disabled,
+            placeholder = _this$props.placeholder,
+            autoComplete = _this$props.autoComplete,
+            errorMessage = _this$props.errorMessage,
+            hasFloatingLabel = _this$props.hasFloatingLabel,
+            isTranslateActive = _this$props.isTranslateActive,
+            _this$props$value = _this$props.value,
+            value = _this$props$value === void 0 ? stateValue : _this$props$value;
+            _this$props.defaultValue;
+            var props = _objectWithoutProperties(_this$props, _excluded);
+
+        var isFloating = isFocused || !!value;
+        return /*#__PURE__*/React__default["default"].createElement(styled$3.Container, {
+          fullWidth: props.fullWidth
+        }, hasFloatingLabel && /*#__PURE__*/React__default["default"].createElement(styled$3.FloatingLabel, _extends$1({}, props, {
+          "data-test": "floatingLabel",
+          error: error,
+          onClick: this.handleLabelClick,
+          disabled: disabled,
+          isFocused: isFocused,
+          isFloating: isFloating,
+          isTranslateActive: isTranslateActive
+        }), label), /*#__PURE__*/React__default["default"].createElement(styled$3.Textarea, _extends$1({}, props, {
+          ref: this.textarea,
+          placeholder: hasFloatingLabel && !isFloating ? '' : placeholder,
+          onBlur: this.handleBlur,
+          onFocus: this.handleFocus,
+          onChange: this.handleChange,
+          onInput: this.handleInput,
+          error: error,
+          value: value,
+          autoComplete: autoComplete ? 'on' : 'off',
+          disabled: disabled
+        })), error && /*#__PURE__*/React__default["default"].createElement(styled$3.ErrorMessage, {
+          "data-test": "errorMessage"
+        }, errorMessage));
+      }
+    }]);
+
+    return Textarea;
+  }(React.PureComponent);
+
+  Textarea.defaultProps = {
+    disabled: false,
+    autoComplete: false,
+    error: false,
+    errorMessage: '',
+    onBlur: function onBlur() {
+      return null;
+    },
+    onChange: function onChange() {
+      return null;
+    },
+    onFocus: function onFocus() {
+      return null;
+    },
+    placeholder: '',
+    hasFloatingLabel: false
+  };
+
+  var setSize = function setSize(value) {
+    return value && !Number.isNaN(parseInt(value, 10)) ? "".concat(value, "px") : 'auto';
+  };
+
+  var getBorders = function getBorders(value) {
+    if (value) return value === true ? '50%' : "".concat(value, "px");
+    return 'initial';
+  };
+
+  var styled$2 = {
+    ImageWrapper: styled$9.div.withConfig({
+      displayName: "styles__ImageWrapper",
+      componentId: "sc-vrvp1c-0"
+    })(["width:", ";height:", ";border-radius:", ";", ";overflow:hidden;display:flex;justify-content:center;align-items:center;"], function (_ref) {
+      var width = _ref.width;
+      return setSize(width);
+    }, function (_ref2) {
+      var height = _ref2.height;
+      return setSize(height);
+    }, function (_ref3) {
+      var roundBorders = _ref3.roundBorders;
+      return getBorders(roundBorders);
+    }, function (_ref4) {
+      var background = _ref4.background;
+      return background && "background-color: ".concat(background);
+    }),
+    Image: styled$9.img.withConfig({
+      displayName: "styles__Image",
+      componentId: "sc-vrvp1c-1"
+    })(["width:", ";height:", ";border-radius:", ";"], function (_ref5) {
+      var width = _ref5.width;
+      return setSize(width);
+    }, function (_ref6) {
+      var height = _ref6.height;
+      return setSize(height);
+    }, function (_ref7) {
+      var roundBorders = _ref7.roundBorders;
+      return getBorders(roundBorders);
+    })
+  };
+
+  var Image = function Image(_ref) {
+    var url = _ref.url,
+        width = _ref.width,
+        height = _ref.height,
+        altText = _ref.altText,
+        roundBorders = _ref.roundBorders,
+        background = _ref.background;
+    var emptyUrlIcon = !url && 'exclamation_circle';
+
+    var _useState = React.useState(emptyUrlIcon),
+        _useState2 = _slicedToArray(_useState, 2),
+        errorImage = _useState2[0],
+        setErrorImage = _useState2[1];
+
+    return errorImage ? /*#__PURE__*/React__default["default"].createElement(styled$2.ImageWrapper, {
+      background: background,
+      width: width || height,
+      height: height || width
+    }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+      name: errorImage,
+      size: (width || height) * 0.35 || 20,
+      color: palette.lightGreyPressed
+    })) : /*#__PURE__*/React__default["default"].createElement(styled$2.Image, {
+      src: url,
+      alt: altText || url,
+      width: width,
+      height: height,
+      roundBorders: roundBorders,
+      onError: function onError() {
+        return setErrorImage('img');
+      }
+    });
+  };
+
+  Image.defaultProps = {
+    background: palette.lightGreyHover
+  };
+
+  var __defProp = Object.defineProperty;
+  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __propIsEnum = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues = (a, b) => {
+    for (var prop in b || (b = {}))
+      if (__hasOwnProp.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    if (__getOwnPropSymbols)
+      for (var prop of __getOwnPropSymbols(b)) {
+        if (__propIsEnum.call(b, prop))
+          __defNormalProp(a, prop, b[prop]);
+      }
+    return a;
+  };
+  var __objRest = (source, exclude) => {
+    var target = {};
+    for (var prop in source)
+      if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+        target[prop] = source[prop];
+    if (source != null && __getOwnPropSymbols)
+      for (var prop of __getOwnPropSymbols(source)) {
+        if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+          target[prop] = source[prop];
+      }
+    return target;
+  };
+
+  // src/third-party/qrcodegen/index.ts
+  /**
+   * @license QR Code generator library (TypeScript)
+   * Copyright (c) Project Nayuki.
+   * SPDX-License-Identifier: MIT
+   */
+  var qrcodegen;
+  ((qrcodegen2) => {
+    const _QrCode = class {
+      constructor(version, errorCorrectionLevel, dataCodewords, msk) {
+        this.version = version;
+        this.errorCorrectionLevel = errorCorrectionLevel;
+        this.modules = [];
+        this.isFunction = [];
+        if (version < _QrCode.MIN_VERSION || version > _QrCode.MAX_VERSION)
+          throw new RangeError("Version value out of range");
+        if (msk < -1 || msk > 7)
+          throw new RangeError("Mask value out of range");
+        this.size = version * 4 + 17;
+        let row = [];
+        for (let i = 0; i < this.size; i++)
+          row.push(false);
+        for (let i = 0; i < this.size; i++) {
+          this.modules.push(row.slice());
+          this.isFunction.push(row.slice());
+        }
+        this.drawFunctionPatterns();
+        const allCodewords = this.addEccAndInterleave(dataCodewords);
+        this.drawCodewords(allCodewords);
+        if (msk == -1) {
+          let minPenalty = 1e9;
+          for (let i = 0; i < 8; i++) {
+            this.applyMask(i);
+            this.drawFormatBits(i);
+            const penalty = this.getPenaltyScore();
+            if (penalty < minPenalty) {
+              msk = i;
+              minPenalty = penalty;
+            }
+            this.applyMask(i);
+          }
+        }
+        assert(0 <= msk && msk <= 7);
+        this.mask = msk;
+        this.applyMask(msk);
+        this.drawFormatBits(msk);
+        this.isFunction = [];
+      }
+      static encodeText(text, ecl) {
+        const segs = qrcodegen2.QrSegment.makeSegments(text);
+        return _QrCode.encodeSegments(segs, ecl);
+      }
+      static encodeBinary(data, ecl) {
+        const seg = qrcodegen2.QrSegment.makeBytes(data);
+        return _QrCode.encodeSegments([seg], ecl);
+      }
+      static encodeSegments(segs, ecl, minVersion = 1, maxVersion = 40, mask = -1, boostEcl = true) {
+        if (!(_QrCode.MIN_VERSION <= minVersion && minVersion <= maxVersion && maxVersion <= _QrCode.MAX_VERSION) || mask < -1 || mask > 7)
+          throw new RangeError("Invalid value");
+        let version;
+        let dataUsedBits;
+        for (version = minVersion; ; version++) {
+          const dataCapacityBits2 = _QrCode.getNumDataCodewords(version, ecl) * 8;
+          const usedBits = QrSegment.getTotalBits(segs, version);
+          if (usedBits <= dataCapacityBits2) {
+            dataUsedBits = usedBits;
+            break;
+          }
+          if (version >= maxVersion)
+            throw new RangeError("Data too long");
+        }
+        for (const newEcl of [_QrCode.Ecc.MEDIUM, _QrCode.Ecc.QUARTILE, _QrCode.Ecc.HIGH]) {
+          if (boostEcl && dataUsedBits <= _QrCode.getNumDataCodewords(version, newEcl) * 8)
+            ecl = newEcl;
+        }
+        let bb = [];
+        for (const seg of segs) {
+          appendBits(seg.mode.modeBits, 4, bb);
+          appendBits(seg.numChars, seg.mode.numCharCountBits(version), bb);
+          for (const b of seg.getData())
+            bb.push(b);
+        }
+        assert(bb.length == dataUsedBits);
+        const dataCapacityBits = _QrCode.getNumDataCodewords(version, ecl) * 8;
+        assert(bb.length <= dataCapacityBits);
+        appendBits(0, Math.min(4, dataCapacityBits - bb.length), bb);
+        appendBits(0, (8 - bb.length % 8) % 8, bb);
+        assert(bb.length % 8 == 0);
+        for (let padByte = 236; bb.length < dataCapacityBits; padByte ^= 236 ^ 17)
+          appendBits(padByte, 8, bb);
+        let dataCodewords = [];
+        while (dataCodewords.length * 8 < bb.length)
+          dataCodewords.push(0);
+        bb.forEach((b, i) => dataCodewords[i >>> 3] |= b << 7 - (i & 7));
+        return new _QrCode(version, ecl, dataCodewords, mask);
+      }
+      getModule(x, y) {
+        return 0 <= x && x < this.size && 0 <= y && y < this.size && this.modules[y][x];
+      }
+      getModules() {
+        return this.modules;
+      }
+      drawFunctionPatterns() {
+        for (let i = 0; i < this.size; i++) {
+          this.setFunctionModule(6, i, i % 2 == 0);
+          this.setFunctionModule(i, 6, i % 2 == 0);
+        }
+        this.drawFinderPattern(3, 3);
+        this.drawFinderPattern(this.size - 4, 3);
+        this.drawFinderPattern(3, this.size - 4);
+        const alignPatPos = this.getAlignmentPatternPositions();
+        const numAlign = alignPatPos.length;
+        for (let i = 0; i < numAlign; i++) {
+          for (let j = 0; j < numAlign; j++) {
+            if (!(i == 0 && j == 0 || i == 0 && j == numAlign - 1 || i == numAlign - 1 && j == 0))
+              this.drawAlignmentPattern(alignPatPos[i], alignPatPos[j]);
+          }
+        }
+        this.drawFormatBits(0);
+        this.drawVersion();
+      }
+      drawFormatBits(mask) {
+        const data = this.errorCorrectionLevel.formatBits << 3 | mask;
+        let rem = data;
+        for (let i = 0; i < 10; i++)
+          rem = rem << 1 ^ (rem >>> 9) * 1335;
+        const bits = (data << 10 | rem) ^ 21522;
+        assert(bits >>> 15 == 0);
+        for (let i = 0; i <= 5; i++)
+          this.setFunctionModule(8, i, getBit(bits, i));
+        this.setFunctionModule(8, 7, getBit(bits, 6));
+        this.setFunctionModule(8, 8, getBit(bits, 7));
+        this.setFunctionModule(7, 8, getBit(bits, 8));
+        for (let i = 9; i < 15; i++)
+          this.setFunctionModule(14 - i, 8, getBit(bits, i));
+        for (let i = 0; i < 8; i++)
+          this.setFunctionModule(this.size - 1 - i, 8, getBit(bits, i));
+        for (let i = 8; i < 15; i++)
+          this.setFunctionModule(8, this.size - 15 + i, getBit(bits, i));
+        this.setFunctionModule(8, this.size - 8, true);
+      }
+      drawVersion() {
+        if (this.version < 7)
+          return;
+        let rem = this.version;
+        for (let i = 0; i < 12; i++)
+          rem = rem << 1 ^ (rem >>> 11) * 7973;
+        const bits = this.version << 12 | rem;
+        assert(bits >>> 18 == 0);
+        for (let i = 0; i < 18; i++) {
+          const color = getBit(bits, i);
+          const a = this.size - 11 + i % 3;
+          const b = Math.floor(i / 3);
+          this.setFunctionModule(a, b, color);
+          this.setFunctionModule(b, a, color);
+        }
+      }
+      drawFinderPattern(x, y) {
+        for (let dy = -4; dy <= 4; dy++) {
+          for (let dx = -4; dx <= 4; dx++) {
+            const dist = Math.max(Math.abs(dx), Math.abs(dy));
+            const xx = x + dx;
+            const yy = y + dy;
+            if (0 <= xx && xx < this.size && 0 <= yy && yy < this.size)
+              this.setFunctionModule(xx, yy, dist != 2 && dist != 4);
+          }
+        }
+      }
+      drawAlignmentPattern(x, y) {
+        for (let dy = -2; dy <= 2; dy++) {
+          for (let dx = -2; dx <= 2; dx++)
+            this.setFunctionModule(x + dx, y + dy, Math.max(Math.abs(dx), Math.abs(dy)) != 1);
+        }
+      }
+      setFunctionModule(x, y, isDark) {
+        this.modules[y][x] = isDark;
+        this.isFunction[y][x] = true;
+      }
+      addEccAndInterleave(data) {
+        const ver = this.version;
+        const ecl = this.errorCorrectionLevel;
+        if (data.length != _QrCode.getNumDataCodewords(ver, ecl))
+          throw new RangeError("Invalid argument");
+        const numBlocks = _QrCode.NUM_ERROR_CORRECTION_BLOCKS[ecl.ordinal][ver];
+        const blockEccLen = _QrCode.ECC_CODEWORDS_PER_BLOCK[ecl.ordinal][ver];
+        const rawCodewords = Math.floor(_QrCode.getNumRawDataModules(ver) / 8);
+        const numShortBlocks = numBlocks - rawCodewords % numBlocks;
+        const shortBlockLen = Math.floor(rawCodewords / numBlocks);
+        let blocks = [];
+        const rsDiv = _QrCode.reedSolomonComputeDivisor(blockEccLen);
+        for (let i = 0, k = 0; i < numBlocks; i++) {
+          let dat = data.slice(k, k + shortBlockLen - blockEccLen + (i < numShortBlocks ? 0 : 1));
+          k += dat.length;
+          const ecc = _QrCode.reedSolomonComputeRemainder(dat, rsDiv);
+          if (i < numShortBlocks)
+            dat.push(0);
+          blocks.push(dat.concat(ecc));
+        }
+        let result = [];
+        for (let i = 0; i < blocks[0].length; i++) {
+          blocks.forEach((block, j) => {
+            if (i != shortBlockLen - blockEccLen || j >= numShortBlocks)
+              result.push(block[i]);
+          });
+        }
+        assert(result.length == rawCodewords);
+        return result;
+      }
+      drawCodewords(data) {
+        if (data.length != Math.floor(_QrCode.getNumRawDataModules(this.version) / 8))
+          throw new RangeError("Invalid argument");
+        let i = 0;
+        for (let right = this.size - 1; right >= 1; right -= 2) {
+          if (right == 6)
+            right = 5;
+          for (let vert = 0; vert < this.size; vert++) {
+            for (let j = 0; j < 2; j++) {
+              const x = right - j;
+              const upward = (right + 1 & 2) == 0;
+              const y = upward ? this.size - 1 - vert : vert;
+              if (!this.isFunction[y][x] && i < data.length * 8) {
+                this.modules[y][x] = getBit(data[i >>> 3], 7 - (i & 7));
+                i++;
+              }
+            }
+          }
+        }
+        assert(i == data.length * 8);
+      }
+      applyMask(mask) {
+        if (mask < 0 || mask > 7)
+          throw new RangeError("Mask value out of range");
+        for (let y = 0; y < this.size; y++) {
+          for (let x = 0; x < this.size; x++) {
+            let invert;
+            switch (mask) {
+              case 0:
+                invert = (x + y) % 2 == 0;
+                break;
+              case 1:
+                invert = y % 2 == 0;
+                break;
+              case 2:
+                invert = x % 3 == 0;
+                break;
+              case 3:
+                invert = (x + y) % 3 == 0;
+                break;
+              case 4:
+                invert = (Math.floor(x / 3) + Math.floor(y / 2)) % 2 == 0;
+                break;
+              case 5:
+                invert = x * y % 2 + x * y % 3 == 0;
+                break;
+              case 6:
+                invert = (x * y % 2 + x * y % 3) % 2 == 0;
+                break;
+              case 7:
+                invert = ((x + y) % 2 + x * y % 3) % 2 == 0;
+                break;
+              default:
+                throw new Error("Unreachable");
+            }
+            if (!this.isFunction[y][x] && invert)
+              this.modules[y][x] = !this.modules[y][x];
+          }
+        }
+      }
+      getPenaltyScore() {
+        let result = 0;
+        for (let y = 0; y < this.size; y++) {
+          let runColor = false;
+          let runX = 0;
+          let runHistory = [0, 0, 0, 0, 0, 0, 0];
+          for (let x = 0; x < this.size; x++) {
+            if (this.modules[y][x] == runColor) {
+              runX++;
+              if (runX == 5)
+                result += _QrCode.PENALTY_N1;
+              else if (runX > 5)
+                result++;
+            } else {
+              this.finderPenaltyAddHistory(runX, runHistory);
+              if (!runColor)
+                result += this.finderPenaltyCountPatterns(runHistory) * _QrCode.PENALTY_N3;
+              runColor = this.modules[y][x];
+              runX = 1;
+            }
+          }
+          result += this.finderPenaltyTerminateAndCount(runColor, runX, runHistory) * _QrCode.PENALTY_N3;
+        }
+        for (let x = 0; x < this.size; x++) {
+          let runColor = false;
+          let runY = 0;
+          let runHistory = [0, 0, 0, 0, 0, 0, 0];
+          for (let y = 0; y < this.size; y++) {
+            if (this.modules[y][x] == runColor) {
+              runY++;
+              if (runY == 5)
+                result += _QrCode.PENALTY_N1;
+              else if (runY > 5)
+                result++;
+            } else {
+              this.finderPenaltyAddHistory(runY, runHistory);
+              if (!runColor)
+                result += this.finderPenaltyCountPatterns(runHistory) * _QrCode.PENALTY_N3;
+              runColor = this.modules[y][x];
+              runY = 1;
+            }
+          }
+          result += this.finderPenaltyTerminateAndCount(runColor, runY, runHistory) * _QrCode.PENALTY_N3;
+        }
+        for (let y = 0; y < this.size - 1; y++) {
+          for (let x = 0; x < this.size - 1; x++) {
+            const color = this.modules[y][x];
+            if (color == this.modules[y][x + 1] && color == this.modules[y + 1][x] && color == this.modules[y + 1][x + 1])
+              result += _QrCode.PENALTY_N2;
+          }
+        }
+        let dark = 0;
+        for (const row of this.modules)
+          dark = row.reduce((sum, color) => sum + (color ? 1 : 0), dark);
+        const total = this.size * this.size;
+        const k = Math.ceil(Math.abs(dark * 20 - total * 10) / total) - 1;
+        assert(0 <= k && k <= 9);
+        result += k * _QrCode.PENALTY_N4;
+        assert(0 <= result && result <= 2568888);
+        return result;
+      }
+      getAlignmentPatternPositions() {
+        if (this.version == 1)
+          return [];
+        else {
+          const numAlign = Math.floor(this.version / 7) + 2;
+          const step = this.version == 32 ? 26 : Math.ceil((this.version * 4 + 4) / (numAlign * 2 - 2)) * 2;
+          let result = [6];
+          for (let pos = this.size - 7; result.length < numAlign; pos -= step)
+            result.splice(1, 0, pos);
+          return result;
+        }
+      }
+      static getNumRawDataModules(ver) {
+        if (ver < _QrCode.MIN_VERSION || ver > _QrCode.MAX_VERSION)
+          throw new RangeError("Version number out of range");
+        let result = (16 * ver + 128) * ver + 64;
+        if (ver >= 2) {
+          const numAlign = Math.floor(ver / 7) + 2;
+          result -= (25 * numAlign - 10) * numAlign - 55;
+          if (ver >= 7)
+            result -= 36;
+        }
+        assert(208 <= result && result <= 29648);
+        return result;
+      }
+      static getNumDataCodewords(ver, ecl) {
+        return Math.floor(_QrCode.getNumRawDataModules(ver) / 8) - _QrCode.ECC_CODEWORDS_PER_BLOCK[ecl.ordinal][ver] * _QrCode.NUM_ERROR_CORRECTION_BLOCKS[ecl.ordinal][ver];
+      }
+      static reedSolomonComputeDivisor(degree) {
+        if (degree < 1 || degree > 255)
+          throw new RangeError("Degree out of range");
+        let result = [];
+        for (let i = 0; i < degree - 1; i++)
+          result.push(0);
+        result.push(1);
+        let root = 1;
+        for (let i = 0; i < degree; i++) {
+          for (let j = 0; j < result.length; j++) {
+            result[j] = _QrCode.reedSolomonMultiply(result[j], root);
+            if (j + 1 < result.length)
+              result[j] ^= result[j + 1];
+          }
+          root = _QrCode.reedSolomonMultiply(root, 2);
+        }
+        return result;
+      }
+      static reedSolomonComputeRemainder(data, divisor) {
+        let result = divisor.map((_) => 0);
+        for (const b of data) {
+          const factor = b ^ result.shift();
+          result.push(0);
+          divisor.forEach((coef, i) => result[i] ^= _QrCode.reedSolomonMultiply(coef, factor));
+        }
+        return result;
+      }
+      static reedSolomonMultiply(x, y) {
+        if (x >>> 8 != 0 || y >>> 8 != 0)
+          throw new RangeError("Byte out of range");
+        let z = 0;
+        for (let i = 7; i >= 0; i--) {
+          z = z << 1 ^ (z >>> 7) * 285;
+          z ^= (y >>> i & 1) * x;
+        }
+        assert(z >>> 8 == 0);
+        return z;
+      }
+      finderPenaltyCountPatterns(runHistory) {
+        const n = runHistory[1];
+        assert(n <= this.size * 3);
+        const core = n > 0 && runHistory[2] == n && runHistory[3] == n * 3 && runHistory[4] == n && runHistory[5] == n;
+        return (core && runHistory[0] >= n * 4 && runHistory[6] >= n ? 1 : 0) + (core && runHistory[6] >= n * 4 && runHistory[0] >= n ? 1 : 0);
+      }
+      finderPenaltyTerminateAndCount(currentRunColor, currentRunLength, runHistory) {
+        if (currentRunColor) {
+          this.finderPenaltyAddHistory(currentRunLength, runHistory);
+          currentRunLength = 0;
+        }
+        currentRunLength += this.size;
+        this.finderPenaltyAddHistory(currentRunLength, runHistory);
+        return this.finderPenaltyCountPatterns(runHistory);
+      }
+      finderPenaltyAddHistory(currentRunLength, runHistory) {
+        if (runHistory[0] == 0)
+          currentRunLength += this.size;
+        runHistory.pop();
+        runHistory.unshift(currentRunLength);
+      }
+    };
+    let QrCode = _QrCode;
+    QrCode.MIN_VERSION = 1;
+    QrCode.MAX_VERSION = 40;
+    QrCode.PENALTY_N1 = 3;
+    QrCode.PENALTY_N2 = 3;
+    QrCode.PENALTY_N3 = 40;
+    QrCode.PENALTY_N4 = 10;
+    QrCode.ECC_CODEWORDS_PER_BLOCK = [
+      [-1, 7, 10, 15, 20, 26, 18, 20, 24, 30, 18, 20, 24, 26, 30, 22, 24, 28, 30, 28, 28, 28, 28, 30, 30, 26, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
+      [-1, 10, 16, 26, 18, 24, 16, 18, 22, 22, 26, 30, 22, 22, 24, 24, 28, 28, 26, 26, 26, 26, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28],
+      [-1, 13, 22, 18, 26, 18, 24, 18, 22, 20, 24, 28, 26, 24, 20, 30, 24, 28, 28, 26, 30, 28, 30, 30, 30, 30, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
+      [-1, 17, 28, 22, 16, 22, 28, 26, 26, 24, 28, 24, 28, 22, 24, 24, 30, 28, 28, 26, 28, 30, 24, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30]
+    ];
+    QrCode.NUM_ERROR_CORRECTION_BLOCKS = [
+      [-1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 4, 4, 4, 4, 4, 6, 6, 6, 6, 7, 8, 8, 9, 9, 10, 12, 12, 12, 13, 14, 15, 16, 17, 18, 19, 19, 20, 21, 22, 24, 25],
+      [-1, 1, 1, 1, 2, 2, 4, 4, 4, 5, 5, 5, 8, 9, 9, 10, 10, 11, 13, 14, 16, 17, 17, 18, 20, 21, 23, 25, 26, 28, 29, 31, 33, 35, 37, 38, 40, 43, 45, 47, 49],
+      [-1, 1, 1, 2, 2, 4, 4, 6, 6, 8, 8, 8, 10, 12, 16, 12, 17, 16, 18, 21, 20, 23, 23, 25, 27, 29, 34, 34, 35, 38, 40, 43, 45, 48, 51, 53, 56, 59, 62, 65, 68],
+      [-1, 1, 1, 2, 4, 4, 4, 5, 6, 8, 8, 11, 11, 16, 16, 18, 16, 19, 21, 25, 25, 25, 34, 30, 32, 35, 37, 40, 42, 45, 48, 51, 54, 57, 60, 63, 66, 70, 74, 77, 81]
+    ];
+    qrcodegen2.QrCode = QrCode;
+    function appendBits(val, len, bb) {
+      if (len < 0 || len > 31 || val >>> len != 0)
+        throw new RangeError("Value out of range");
+      for (let i = len - 1; i >= 0; i--)
+        bb.push(val >>> i & 1);
+    }
+    function getBit(x, i) {
+      return (x >>> i & 1) != 0;
+    }
+    function assert(cond) {
+      if (!cond)
+        throw new Error("Assertion error");
+    }
+    const _QrSegment = class {
+      constructor(mode, numChars, bitData) {
+        this.mode = mode;
+        this.numChars = numChars;
+        this.bitData = bitData;
+        if (numChars < 0)
+          throw new RangeError("Invalid argument");
+        this.bitData = bitData.slice();
+      }
+      static makeBytes(data) {
+        let bb = [];
+        for (const b of data)
+          appendBits(b, 8, bb);
+        return new _QrSegment(_QrSegment.Mode.BYTE, data.length, bb);
+      }
+      static makeNumeric(digits) {
+        if (!_QrSegment.isNumeric(digits))
+          throw new RangeError("String contains non-numeric characters");
+        let bb = [];
+        for (let i = 0; i < digits.length; ) {
+          const n = Math.min(digits.length - i, 3);
+          appendBits(parseInt(digits.substr(i, n), 10), n * 3 + 1, bb);
+          i += n;
+        }
+        return new _QrSegment(_QrSegment.Mode.NUMERIC, digits.length, bb);
+      }
+      static makeAlphanumeric(text) {
+        if (!_QrSegment.isAlphanumeric(text))
+          throw new RangeError("String contains unencodable characters in alphanumeric mode");
+        let bb = [];
+        let i;
+        for (i = 0; i + 2 <= text.length; i += 2) {
+          let temp = _QrSegment.ALPHANUMERIC_CHARSET.indexOf(text.charAt(i)) * 45;
+          temp += _QrSegment.ALPHANUMERIC_CHARSET.indexOf(text.charAt(i + 1));
+          appendBits(temp, 11, bb);
+        }
+        if (i < text.length)
+          appendBits(_QrSegment.ALPHANUMERIC_CHARSET.indexOf(text.charAt(i)), 6, bb);
+        return new _QrSegment(_QrSegment.Mode.ALPHANUMERIC, text.length, bb);
+      }
+      static makeSegments(text) {
+        if (text == "")
+          return [];
+        else if (_QrSegment.isNumeric(text))
+          return [_QrSegment.makeNumeric(text)];
+        else if (_QrSegment.isAlphanumeric(text))
+          return [_QrSegment.makeAlphanumeric(text)];
+        else
+          return [_QrSegment.makeBytes(_QrSegment.toUtf8ByteArray(text))];
+      }
+      static makeEci(assignVal) {
+        let bb = [];
+        if (assignVal < 0)
+          throw new RangeError("ECI assignment value out of range");
+        else if (assignVal < 1 << 7)
+          appendBits(assignVal, 8, bb);
+        else if (assignVal < 1 << 14) {
+          appendBits(2, 2, bb);
+          appendBits(assignVal, 14, bb);
+        } else if (assignVal < 1e6) {
+          appendBits(6, 3, bb);
+          appendBits(assignVal, 21, bb);
+        } else
+          throw new RangeError("ECI assignment value out of range");
+        return new _QrSegment(_QrSegment.Mode.ECI, 0, bb);
+      }
+      static isNumeric(text) {
+        return _QrSegment.NUMERIC_REGEX.test(text);
+      }
+      static isAlphanumeric(text) {
+        return _QrSegment.ALPHANUMERIC_REGEX.test(text);
+      }
+      getData() {
+        return this.bitData.slice();
+      }
+      static getTotalBits(segs, version) {
+        let result = 0;
+        for (const seg of segs) {
+          const ccbits = seg.mode.numCharCountBits(version);
+          if (seg.numChars >= 1 << ccbits)
+            return Infinity;
+          result += 4 + ccbits + seg.bitData.length;
+        }
+        return result;
+      }
+      static toUtf8ByteArray(str) {
+        str = encodeURI(str);
+        let result = [];
+        for (let i = 0; i < str.length; i++) {
+          if (str.charAt(i) != "%")
+            result.push(str.charCodeAt(i));
+          else {
+            result.push(parseInt(str.substr(i + 1, 2), 16));
+            i += 2;
+          }
+        }
+        return result;
+      }
+    };
+    let QrSegment = _QrSegment;
+    QrSegment.NUMERIC_REGEX = /^[0-9]*$/;
+    QrSegment.ALPHANUMERIC_REGEX = /^[A-Z0-9 $%*+.\/:-]*$/;
+    QrSegment.ALPHANUMERIC_CHARSET = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:";
+    qrcodegen2.QrSegment = QrSegment;
+  })(qrcodegen || (qrcodegen = {}));
+  ((qrcodegen2) => {
+    ((QrCode2) => {
+      const _Ecc = class {
+        constructor(ordinal, formatBits) {
+          this.ordinal = ordinal;
+          this.formatBits = formatBits;
+        }
+      };
+      let Ecc = _Ecc;
+      Ecc.LOW = new _Ecc(0, 1);
+      Ecc.MEDIUM = new _Ecc(1, 0);
+      Ecc.QUARTILE = new _Ecc(2, 3);
+      Ecc.HIGH = new _Ecc(3, 2);
+      QrCode2.Ecc = Ecc;
+    })(qrcodegen2.QrCode || (qrcodegen2.QrCode = {}));
+  })(qrcodegen || (qrcodegen = {}));
+  ((qrcodegen2) => {
+    ((QrSegment2) => {
+      const _Mode = class {
+        constructor(modeBits, numBitsCharCount) {
+          this.modeBits = modeBits;
+          this.numBitsCharCount = numBitsCharCount;
+        }
+        numCharCountBits(ver) {
+          return this.numBitsCharCount[Math.floor((ver + 7) / 17)];
+        }
+      };
+      let Mode = _Mode;
+      Mode.NUMERIC = new _Mode(1, [10, 12, 14]);
+      Mode.ALPHANUMERIC = new _Mode(2, [9, 11, 13]);
+      Mode.BYTE = new _Mode(4, [8, 16, 16]);
+      Mode.KANJI = new _Mode(8, [8, 10, 12]);
+      Mode.ECI = new _Mode(7, [0, 0, 0]);
+      QrSegment2.Mode = Mode;
+    })(qrcodegen2.QrSegment || (qrcodegen2.QrSegment = {}));
+  })(qrcodegen || (qrcodegen = {}));
+  var qrcodegen_default = qrcodegen;
+
+  // src/index.tsx
+  /**
+   * @license qrcode.react
+   * Copyright (c) Paul O'Shannessy
+   * SPDX-License-Identifier: ISC
+   */
+  var ERROR_LEVEL_MAP = {
+    L: qrcodegen_default.QrCode.Ecc.LOW,
+    M: qrcodegen_default.QrCode.Ecc.MEDIUM,
+    Q: qrcodegen_default.QrCode.Ecc.QUARTILE,
+    H: qrcodegen_default.QrCode.Ecc.HIGH
+  };
+  var DEFAULT_PROPS = {
+    size: 128,
+    level: "L",
+    bgColor: "#FFFFFF",
+    fgColor: "#000000",
+    includeMargin: false
+  };
+  var MARGIN_SIZE = 4;
+  var DEFAULT_IMG_SCALE = 0.1;
+  function generatePath(modules, margin = 0) {
+    const ops = [];
+    modules.forEach(function(row, y) {
+      let start = null;
+      row.forEach(function(cell, x) {
+        if (!cell && start !== null) {
+          ops.push(`M${start + margin} ${y + margin}h${x - start}v1H${start + margin}z`);
+          start = null;
+          return;
+        }
+        if (x === row.length - 1) {
+          if (!cell) {
+            return;
+          }
+          if (start === null) {
+            ops.push(`M${x + margin},${y + margin} h1v1H${x + margin}z`);
+          } else {
+            ops.push(`M${start + margin},${y + margin} h${x + 1 - start}v1H${start + margin}z`);
+          }
+          return;
+        }
+        if (cell && start === null) {
+          start = x;
+        }
+      });
+    });
+    return ops.join("");
+  }
+  function excavateModules(modules, excavation) {
+    return modules.slice().map((row, y) => {
+      if (y < excavation.y || y >= excavation.y + excavation.h) {
+        return row;
+      }
+      return row.map((cell, x) => {
+        if (x < excavation.x || x >= excavation.x + excavation.w) {
+          return cell;
+        }
+        return false;
+      });
+    });
+  }
+  function getImageSettings(props, cells) {
+    const { imageSettings, size, includeMargin } = props;
+    if (imageSettings == null) {
+      return null;
+    }
+    const margin = includeMargin ? MARGIN_SIZE : 0;
+    const numCells = cells.length + margin * 2;
+    const defaultSize = Math.floor(size * DEFAULT_IMG_SCALE);
+    const scale = numCells / size;
+    const w = (imageSettings.width || defaultSize) * scale;
+    const h = (imageSettings.height || defaultSize) * scale;
+    const x = imageSettings.x == null ? cells.length / 2 - w / 2 : imageSettings.x * scale;
+    const y = imageSettings.y == null ? cells.length / 2 - h / 2 : imageSettings.y * scale;
+    let excavation = null;
+    if (imageSettings.excavate) {
+      let floorX = Math.floor(x);
+      let floorY = Math.floor(y);
+      let ceilW = Math.ceil(w + x - floorX);
+      let ceilH = Math.ceil(h + y - floorY);
+      excavation = { x: floorX, y: floorY, w: ceilW, h: ceilH };
+    }
+    return { x, y, h, w, excavation };
+  }
+  (function() {
+    try {
+      new Path2D().addPath(new Path2D());
+    } catch (e) {
+      return false;
+    }
+    return true;
+  })();
+  function QRCodeSVG(props) {
+    const _a = props, {
+      value,
+      size,
+      level,
+      bgColor,
+      fgColor,
+      includeMargin,
+      imageSettings
+    } = _a, otherProps = __objRest(_a, [
+      "value",
+      "size",
+      "level",
+      "bgColor",
+      "fgColor",
+      "includeMargin",
+      "imageSettings"
+    ]);
+    let cells = qrcodegen_default.QrCode.encodeText(value, ERROR_LEVEL_MAP[level]).getModules();
+    const margin = includeMargin ? MARGIN_SIZE : 0;
+    const numCells = cells.length + margin * 2;
+    const calculatedImageSettings = getImageSettings(props, cells);
+    let image = null;
+    if (imageSettings != null && calculatedImageSettings != null) {
+      if (calculatedImageSettings.excavation != null) {
+        cells = excavateModules(cells, calculatedImageSettings.excavation);
+      }
+      image = /* @__PURE__ */ React__default["default"].createElement("image", {
+        xlinkHref: imageSettings.src,
+        height: calculatedImageSettings.h,
+        width: calculatedImageSettings.w,
+        x: calculatedImageSettings.x + margin,
+        y: calculatedImageSettings.y + margin,
+        preserveAspectRatio: "none"
+      });
+    }
+    const fgPath = generatePath(cells, margin);
+    return /* @__PURE__ */ React__default["default"].createElement("svg", __spreadValues({
+      shapeRendering: "crispEdges",
+      height: size,
+      width: size,
+      viewBox: `0 0 ${numCells} ${numCells}`
+    }, otherProps), /* @__PURE__ */ React__default["default"].createElement("path", {
+      fill: bgColor,
+      d: `M0,0 h${numCells}v${numCells}H0z`
+    }), /* @__PURE__ */ React__default["default"].createElement("path", {
+      fill: fgColor,
+      d: fgPath
+    }), image);
+  }
+  QRCodeSVG.defaultProps = DEFAULT_PROPS;
+  __spreadValues({ renderAs: "canvas" }, DEFAULT_PROPS);
+
+  var QRCode = function QRCode(_ref) {
+    var value = _ref.value,
+        size = _ref.size;
+    if (typeof value !== 'string') return null;
+    return /*#__PURE__*/React__default["default"].createElement(QRCodeSVG, {
+      value: value,
+      size: size
+    });
+  };
+
+  QRCode.defaultProps = {
+    size: 100
+  };
+
+  function u(){return (u=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);}return e}).apply(this,arguments)}function c(e,r){if(null==e)return {};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r.indexOf(t=a[n])>=0||(o[t]=e[t]);return o}function i(e){var t=React.useRef(e),n=React.useRef(function(e){t.current&&t.current(e);});return t.current=e,n.current}var s=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=1),e>t?t:e<r?r:e},f=function(e){return "touches"in e},v=function(e){return e&&e.ownerDocument.defaultView||self},d=function(e,r,t){var n=e.getBoundingClientRect(),o=f(r)?function(e,r){for(var t=0;t<e.length;t++)if(e[t].identifier===r)return e[t];return e[0]}(r.touches,t):r;return {left:s((o.pageX-(n.left+v(e).pageXOffset))/n.width),top:s((o.pageY-(n.top+v(e).pageYOffset))/n.height)}},h=function(e){!f(e)&&e.preventDefault();},m=React__default["default"].memo(function(o){var a=o.onMove,l=o.onKey,s=c(o,["onMove","onKey"]),m=React.useRef(null),g=i(a),p=i(l),b=React.useRef(null),_=React.useRef(!1),x=React.useMemo(function(){var e=function(e){h(e),(f(e)?e.touches.length>0:e.buttons>0)&&m.current?g(d(m.current,e,b.current)):t(!1);},r=function(){return t(!1)};function t(t){var n=_.current,o=v(m.current),a=t?o.addEventListener:o.removeEventListener;a(n?"touchmove":"mousemove",e),a(n?"touchend":"mouseup",r);}return [function(e){var r=e.nativeEvent,n=m.current;if(n&&(h(r),!function(e,r){return r&&!f(e)}(r,_.current)&&n)){if(f(r)){_.current=!0;var o=r.changedTouches||[];o.length&&(b.current=o[0].identifier);}n.focus(),g(d(n,r,b.current)),t(!0);}},function(e){var r=e.which||e.keyCode;r<37||r>40||(e.preventDefault(),p({left:39===r?.05:37===r?-.05:0,top:40===r?.05:38===r?-.05:0}));},t]},[p,g]),C=x[0],E=x[1],H=x[2];return React.useEffect(function(){return H},[H]),React__default["default"].createElement("div",u({},s,{onTouchStart:C,onMouseDown:C,className:"react-colorful__interactive",ref:m,onKeyDown:E,tabIndex:0,role:"slider"}))}),g=function(e){return e.filter(Boolean).join(" ")},p=function(r){var t=r.color,n=r.left,o=r.top,a=void 0===o?.5:o,l=g(["react-colorful__pointer",r.className]);return React__default["default"].createElement("div",{className:l,style:{top:100*a+"%",left:100*n+"%"}},React__default["default"].createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},b=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=Math.pow(10,r)),Math.round(t*e)/t},x=function(e){return "#"===e[0]&&(e=e.substr(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:1}:{r:parseInt(e.substr(0,2),16),g:parseInt(e.substr(2,2),16),b:parseInt(e.substr(4,2),16),a:1}},N=function(e){var r=e.s,t=e.v,n=e.a,o=(200-r)*t/100;return {h:b(e.h),s:b(o>0&&o<200?r*t/100/(o<=100?o:200-o)*100:0),l:b(o/2),a:b(n,2)}},w=function(e){var r=N(e);return "hsl("+r.h+", "+r.s+"%, "+r.l+"%)"},q=function(e){var r=e.h,t=e.s,n=e.v,o=e.a;r=r/360*6,t/=100,n/=100;var a=Math.floor(r),l=n*(1-t),u=n*(1-(r-a)*t),c=n*(1-(1-r+a)*t),i=a%6;return {r:b(255*[n,u,l,l,c,n][i]),g:b(255*[c,n,n,u,l,l][i]),b:b(255*[l,l,c,n,n,u][i]),a:b(o,2)}},z=function(e){var r=e.toString(16);return r.length<2?"0"+r:r},B=function(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=Math.max(r,t,n),l=a-Math.min(r,t,n),u=l?a===r?(t-n)/l:a===t?2+(n-r)/l:4+(r-t)/l:0;return {h:b(60*(u<0?u+6:u)),s:b(a?l/a*100:0),v:b(a/255*100),a:o}},K=React__default["default"].memo(function(r){var t=r.hue,n=r.onChange,o=g(["react-colorful__hue",r.className]);return React__default["default"].createElement("div",{className:o},React__default["default"].createElement(m,{onMove:function(e){n({h:360*e.left});},onKey:function(e){n({h:s(t+360*e.left,0,360)});},"aria-label":"Hue","aria-valuetext":b(t)},React__default["default"].createElement(p,{className:"react-colorful__hue-pointer",left:t/360,color:w({h:t,s:100,v:100,a:1})})))}),L=React__default["default"].memo(function(r){var t=r.hsva,n=r.onChange,o={backgroundColor:w({h:t.h,s:100,v:100,a:1})};return React__default["default"].createElement("div",{className:"react-colorful__saturation",style:o},React__default["default"].createElement(m,{onMove:function(e){n({s:100*e.left,v:100-100*e.top});},onKey:function(e){n({s:s(t.s+100*e.left,0,100),v:s(t.v-100*e.top,0,100)});},"aria-label":"Color","aria-valuetext":"Saturation "+b(t.s)+"%, Brightness "+b(t.v)+"%"},React__default["default"].createElement(p,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:w(t)})))}),A=function(e,r){if(e===r)return !0;for(var t in e)if(e[t]!==r[t])return !1;return !0};function T(e,t,l){var u=i(l),c=React.useState(function(){return e.toHsva(t)}),s=c[0],f=c[1],v=React.useRef({color:t,hsva:s});React.useEffect(function(){if(!e.equal(t,v.current.color)){var r=e.toHsva(t);v.current={hsva:r,color:t},f(r);}},[t,e]),React.useEffect(function(){var r;A(s,v.current.hsva)||e.equal(r=e.fromHsva(s),v.current.color)||(v.current={hsva:s,color:r},u(r));},[s,e,u]);var d=React.useCallback(function(e){f(function(r){return Object.assign({},r,e)});},[]);return [s,d]}var P="undefined"!=typeof window?React.useLayoutEffect:React.useEffect,X=function(){return ("undefined"!=typeof __webpack_nonce__?__webpack_nonce__:void 0)},R=new Map,V=function(e){P(function(){var r=e.current?e.current.ownerDocument:document;if(void 0!==r&&!R.has(r)){var t=r.createElement("style");t.innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}',R.set(r,t);var n=X();n&&t.setAttribute("nonce",n),r.head.appendChild(t);}},[]);},$=function(t){var n=t.className,o=t.colorModel,a=t.color,l=void 0===a?o.defaultColor:a,i=t.onChange,s=c(t,["className","colorModel","color","onChange"]),f=React.useRef(null);V(f);var v=T(o,l,i),d=v[0],h=v[1],m=g(["react-colorful",n]);return React__default["default"].createElement("div",u({},s,{ref:f,className:m}),React__default["default"].createElement(L,{hsva:d,onChange:h}),React__default["default"].createElement(K,{hue:d.h,onChange:h,className:"react-colorful__last-control"}))},G={defaultColor:"000",toHsva:function(e){return B(x(e))},fromHsva:function(e){return t=(r=q(e)).g,n=r.b,"#"+z(r.r)+z(t)+z(n);var r,t,n;},equal:function(e,r){return e.toLowerCase()===r.toLowerCase()||A(x(e),x(r))}},J=function(r){return React__default["default"].createElement($,u({},r,{colorModel:G}))};
+
+  /**
+   * Copy string to clipboard
+   * @param {string} str
+   */
+  /**
+   * Creates a debounced function that delays invoking func until after wait milliseconds have
+   * elapsed since the last time the debounced function was invoked.
+   * @param {function} fn - The function to debounce.
+   * @param {number} wait - The number of milliseconds to delay.
+   * @returns {function} The new debounced function.
+   */
+
+  function debounce(fn, wait) {
+    var timerID;
+
+    function debounced() {
+      var context = this;
+      clearTimeout(timerID);
+
+      for (var _len = arguments.length, params = new Array(_len), _key = 0; _key < _len; _key++) {
+        params[_key] = arguments[_key];
+      }
+
+      timerID = setTimeout.apply(void 0, [fn.bind(context), wait].concat(params));
+    }
+
+    debounced.cancel = function cancel() {
+      clearTimeout(timerID);
+    };
+
+    return debounced;
+  }
+
+  var styled$1 = {
+    ClickableWrapper: styled$9.div.withConfig({
+      displayName: "styles__ClickableWrapper",
+      componentId: "sc-lreg3c-0"
+    })(["display:flex;align-items:center;border:none;cursor:pointer;&:before{content:'';z-index:1;display:inline-block;border:1px solid ", ";background-color:", ";border-radius:48%;width:14px;height:14px;margin:7px 4px;position:absolute;margin-bottom:", "px;}"], palette.grey, function (props) {
+      return getColor$1(props.color);
+    }, function (props) {
+      return props.error ? '25' : '7';
+    }),
+    ClosePickerWrapper: styled$9.div.withConfig({
+      displayName: "styles__ClosePickerWrapper",
+      componentId: "sc-lreg3c-1"
+    })(["position:fixed;top:0px;right:0px;bottom:0px;left:0px;"]),
+    Input: styled$9(Input).withConfig({
+      displayName: "styles__Input",
+      componentId: "sc-lreg3c-2"
+    })(["padding-left:26px;"]),
+    PickerWrapper: styled$9.div.withConfig({
+      displayName: "styles__PickerWrapper",
+      componentId: "sc-lreg3c-3"
+    })(["position:absolute;top:31px;z-index:2;left:0;margin-top:15px;"]),
+    Wrapper: styled$9.div.withConfig({
+      displayName: "styles__Wrapper",
+      componentId: "sc-lreg3c-4"
+    })(["display:flex;flex-direction:column;width:100%;position:relative;"])
+  };
+
+  var DEFAULT_COLOR = '#ffffff';
+
+  var ColorPicker = function ColorPicker(_ref) {
+    var color = _ref.color,
+        isCollapsable = _ref.isCollapsable,
+        onChange = _ref.onChange,
+        errorMessage = _ref.errorMessage,
+        error = _ref.error;
+
+    var _useState = React.useState(color),
+        _useState2 = _slicedToArray(_useState, 2),
+        colorValue = _useState2[0],
+        setColor = _useState2[1];
+
+    var _useState3 = React.useState(false),
+        _useState4 = _slicedToArray(_useState3, 2),
+        pickerVisible = _useState4[0],
+        setPickerVisible = _useState4[1];
+
+    var toggleStateVisible = function toggleStateVisible() {
+      setPickerVisible(function (prevState) {
+        return !prevState;
+      });
+    };
+
+    var handleChange = function handleChange(value) {
+      setColor(value);
+      onChange(value);
+    };
+
+    var handleClosePicker = function handleClosePicker() {
+      return setPickerVisible(false);
+    };
+
+    var change = debounce(handleChange, 100);
+    var value = colorValue || DEFAULT_COLOR;
+
+    if (isCollapsable) {
+      return /*#__PURE__*/React__default["default"].createElement(styled$1.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled$1.ClickableWrapper, {
+        "data-test": "collapsible-picker",
+        color: value,
+        role: "presentation",
+        onClick: toggleStateVisible,
+        error: error
+      }, /*#__PURE__*/React__default["default"].createElement(styled$1.Input, {
+        value: colorValue,
+        fullWidth: true,
+        onChange: function onChange(_ref2) {
+          var target = _ref2.target;
+          return handleChange(target.value);
+        },
+        errorMessage: errorMessage,
+        error: error
+      })), pickerVisible && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(styled$1.ClosePickerWrapper, {
+        onClick: handleClosePicker,
+        role: "presentation"
+      }), /*#__PURE__*/React__default["default"].createElement(styled$1.PickerWrapper, null, /*#__PURE__*/React__default["default"].createElement(J, {
+        color: value,
+        onChange: change
+      }))));
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement(J, {
+      "data-test": "simple-picker",
+      color: value,
+      onChange: change
+    });
+  };
+
+  ColorPicker.defaultProps = {
+    color: DEFAULT_COLOR,
+    onChange: function onChange() {
+      return null;
+    },
+    isCollapsable: false
+  };
+
+  var lib = {};
+
+  var Frame$2 = {};
+
+  var Context = {};
+
+  Object.defineProperty(Context, "__esModule", {
+    value: true
+  });
+  Context.FrameContextConsumer = Context.FrameContextProvider = Context.useFrame = Context.FrameContext = undefined;
+
+  var _react$2 = React__default["default"];
+
+  var _react2$1 = _interopRequireDefault$2(_react$2);
+
+  function _interopRequireDefault$2(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+  var doc = void 0;
+  var win = void 0;
+  if (typeof document !== 'undefined') {
+    doc = document;
+  }
+  if (typeof window !== 'undefined') {
+    win = window;
+  }
+
+  var FrameContext = Context.FrameContext = _react2$1.default.createContext({ document: doc, window: win });
+
+  Context.useFrame = function useFrame() {
+    return _react2$1.default.useContext(FrameContext);
+  };
+
+  var FrameContextProvider = FrameContext.Provider,
+      FrameContextConsumer = FrameContext.Consumer;
+  Context.FrameContextProvider = FrameContextProvider;
+  Context.FrameContextConsumer = FrameContextConsumer;
+
+  var Content$1 = {};
+
+  Object.defineProperty(Content$1, "__esModule", {
+    value: true
+  });
+
+  var _createClass$1 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+  var _react$1 = React__default["default"];
+
+  _interopRequireDefault$1(_react$1);
+
+  var _propTypes$1 = propTypes.exports;
+
+  var _propTypes2$1 = _interopRequireDefault$1(_propTypes$1);
+
+  function _interopRequireDefault$1(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+  function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+  function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+  function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // eslint-disable-line no-unused-vars
+
+
+  var Content = function (_Component) {
+    _inherits$1(Content, _Component);
+
+    function Content() {
+      _classCallCheck$1(this, Content);
+
+      return _possibleConstructorReturn$1(this, (Content.__proto__ || Object.getPrototypeOf(Content)).apply(this, arguments));
+    }
+
+    _createClass$1(Content, [{
+      key: 'componentDidMount',
+      value: function componentDidMount() {
+        this.props.contentDidMount();
+      }
+    }, {
+      key: 'componentDidUpdate',
+      value: function componentDidUpdate() {
+        this.props.contentDidUpdate();
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        return _react$1.Children.only(this.props.children);
+      }
+    }]);
+
+    return Content;
+  }(_react$1.Component);
+
+  Content.propTypes = {
+    children: _propTypes2$1.default.element.isRequired,
+    contentDidMount: _propTypes2$1.default.func.isRequired,
+    contentDidUpdate: _propTypes2$1.default.func.isRequired
+  };
+  Content$1.default = Content;
+
+  Object.defineProperty(Frame$2, "__esModule", {
+    value: true
+  });
+  Frame$2.Frame = undefined;
+
+  var _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; };
+
+  var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+  var _react = React__default["default"];
+
+  var _react2 = _interopRequireDefault(_react);
+
+  var _reactDom = require$$1__default["default"];
+
+  var _reactDom2 = _interopRequireDefault(_reactDom);
+
+  var _propTypes = propTypes.exports;
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  var _Context = Context;
+
+  var _Content = Content$1;
+
+  var _Content2 = _interopRequireDefault(_Content);
+
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+  function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+  function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+  var Frame$1 = Frame$2.Frame = function (_Component) {
+    _inherits(Frame, _Component);
+
+    // React warns when you render directly into the body since browser extensions
+    // also inject into the body and can mess up React. For this reason
+    // initialContent is expected to have a div inside of the body
+    // element that we render react into.
+    function Frame(props, context) {
+      _classCallCheck(this, Frame);
+
+      var _this = _possibleConstructorReturn(this, (Frame.__proto__ || Object.getPrototypeOf(Frame)).call(this, props, context));
+
+      _this.setRef = function (node) {
+        _this.nodeRef.current = node;
+
+        var forwardedRef = _this.props.forwardedRef; // eslint-disable-line react/prop-types
+
+        if (typeof forwardedRef === 'function') {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      };
+
+      _this.handleLoad = function () {
+        _this.setState({ iframeLoaded: true });
+      };
+
+      _this._isMounted = false;
+      _this.nodeRef = _react2.default.createRef();
+      _this.state = { iframeLoaded: false };
+      return _this;
+    }
+
+    _createClass(Frame, [{
+      key: 'componentDidMount',
+      value: function componentDidMount() {
+        this._isMounted = true;
+
+        var doc = this.getDoc();
+        if (doc && doc.readyState === 'complete') {
+          this.forceUpdate();
+        } else {
+          this.nodeRef.current.addEventListener('load', this.handleLoad);
+        }
+      }
+    }, {
+      key: 'componentWillUnmount',
+      value: function componentWillUnmount() {
+        this._isMounted = false;
+
+        this.nodeRef.current.removeEventListener('load', this.handleLoad);
+      }
+    }, {
+      key: 'getDoc',
+      value: function getDoc() {
+        return this.nodeRef.current ? this.nodeRef.current.contentDocument : null; // eslint-disable-line
+      }
+    }, {
+      key: 'getMountTarget',
+      value: function getMountTarget() {
+        var doc = this.getDoc();
+        if (this.props.mountTarget) {
+          return doc.querySelector(this.props.mountTarget);
+        }
+        return doc.body.children[0];
+      }
+    }, {
+      key: 'renderFrameContents',
+      value: function renderFrameContents() {
+        if (!this._isMounted) {
+          return null;
+        }
+
+        var doc = this.getDoc();
+
+        if (!doc) {
+          return null;
+        }
+
+        var contentDidMount = this.props.contentDidMount;
+        var contentDidUpdate = this.props.contentDidUpdate;
+
+        var win = doc.defaultView || doc.parentView;
+        var contents = _react2.default.createElement(
+          _Content2.default,
+          {
+            contentDidMount: contentDidMount,
+            contentDidUpdate: contentDidUpdate
+          },
+          _react2.default.createElement(
+            _Context.FrameContextProvider,
+            { value: { document: doc, window: win } },
+            _react2.default.createElement(
+              'div',
+              { className: 'frame-content' },
+              this.props.children
+            )
+          )
+        );
+
+        var mountTarget = this.getMountTarget();
+
+        return [_reactDom2.default.createPortal(this.props.head, this.getDoc().head), _reactDom2.default.createPortal(contents, mountTarget)];
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        var props = _extends({}, this.props, {
+          srcDoc: this.props.initialContent,
+          children: undefined // The iframe isn't ready so we drop children from props here. #12, #17
+        });
+        delete props.head;
+        delete props.initialContent;
+        delete props.mountTarget;
+        delete props.contentDidMount;
+        delete props.contentDidUpdate;
+        delete props.forwardedRef;
+        return _react2.default.createElement(
+          'iframe',
+          _extends({}, props, { ref: this.setRef, onLoad: this.handleLoad }),
+          this.state.iframeLoaded && this.renderFrameContents()
+        );
+      }
+    }]);
+
+    return Frame;
+  }(_react.Component);
+
+  Frame$1.propTypes = {
+    style: _propTypes2.default.object, // eslint-disable-line
+    head: _propTypes2.default.node,
+    initialContent: _propTypes2.default.string,
+    mountTarget: _propTypes2.default.string,
+    contentDidMount: _propTypes2.default.func,
+    contentDidUpdate: _propTypes2.default.func,
+    children: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.arrayOf(_propTypes2.default.element)])
+  };
+  Frame$1.defaultProps = {
+    style: {},
+    head: null,
+    children: undefined,
+    mountTarget: undefined,
+    contentDidMount: function contentDidMount() {},
+    contentDidUpdate: function contentDidUpdate() {},
+    initialContent: '<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'
+  };
+  Frame$2.default = _react2.default.forwardRef(function (props, ref) {
+    return _react2.default.createElement(Frame$1, _extends({}, props, { forwardedRef: ref }));
+  });
+
+  (function (exports) {
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var _Frame = Frame$2;
+
+  Object.defineProperty(exports, 'default', {
+    enumerable: true,
+    get: function get() {
+      return _interopRequireDefault(_Frame).default;
+    }
+  });
+
+  var _Context = Context;
+
+  Object.defineProperty(exports, 'FrameContext', {
+    enumerable: true,
+    get: function get() {
+      return _Context.FrameContext;
+    }
+  });
+  Object.defineProperty(exports, 'FrameContextConsumer', {
+    enumerable: true,
+    get: function get() {
+      return _Context.FrameContextConsumer;
+    }
+  });
+  Object.defineProperty(exports, 'useFrame', {
+    enumerable: true,
+    get: function get() {
+      return _Context.useFrame;
+    }
+  });
+
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+  }(lib));
+
+  var Frame = /*@__PURE__*/getDefaultExportFromCjs(lib);
+
+  var styled = {
+    Wrapper: styled$9.div.withConfig({
+      displayName: "styles__Wrapper",
+      componentId: "sc-3jodl7-0"
+    })(["display:flex;align-items:center;align-self:center;height:100%;max-height:36px;overflow:hidden;white-space:nowrap;"]),
+    Icon: styled$9(Icon).withConfig({
+      displayName: "styles__Icon",
+      componentId: "sc-3jodl7-1"
+    })(["margin-right:6px;flex-shrink:0;"])
+  };
+
+  var DefaultError = function DefaultError(_ref) {
+    var message = _ref.message;
+    return /*#__PURE__*/React__default["default"].createElement(styled.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled.Icon, {
+      name: "exclamation_circle",
+      color: "statusRed"
+    }), /*#__PURE__*/React__default["default"].createElement("p", {
+      color: "statusRed",
+      fontSize: "baseSmall"
+    }, message));
+  };
+
+  DefaultError.defaultProps = {
+    message: 'something went wrong error'
+  };
+
+  var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
+    _inherits$2(ErrorBoundary, _React$Component);
+
+    var _super = _createSuper(ErrorBoundary);
+
+    function ErrorBoundary(props) {
+      var _this;
+
+      _classCallCheck$2(this, ErrorBoundary);
+
+      _this = _super.call(this, props);
+      _this.state = {
+        hasError: false
+      };
+      return _this;
+    }
+
+    _createClass$2(ErrorBoundary, [{
+      key: "componentDidCatch",
+      value: function componentDidCatch(error, info) {
+        // You can also log the error to an error reporting service
+        console.error(error, info);
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var _this$props = this.props,
+            children = _this$props.children,
+            _this$props$errorCont = _this$props.errorContent,
+            errorContent = _this$props$errorCont === void 0 ? /*#__PURE__*/React__default["default"].createElement(DefaultError, null) : _this$props$errorCont,
+            message = _this$props.message;
+        if (!children) return null;
+
+        if (this.state.hasError) {
+          // You can render any custom fallback UI
+          return message ? /*#__PURE__*/React__default["default"].createElement(DefaultError, {
+            message: message
+          }) : errorContent;
+        }
+
+        return children;
+      }
+    }], [{
+      key: "getDerivedStateFromError",
+      value: function getDerivedStateFromError() {
+        // Update state so the next render will show the fallback UI.
+        return {
+          hasError: true
+        };
+      }
+    }]);
+
+    return ErrorBoundary;
+  }(React__default["default"].Component);
+
+  /**
+   * Depending of the given value returns a height measure
+   * By default return 400
+   * @param {string | number} value
+   */
+  var getHeight = function getHeight(value) {
+    var measure = 400;
+    if (!value) return measure;
+
+    switch (value) {
+      case 'large':
+        measure = 600;
+        break;
+
+      case 'full':
+        measure = window.innerHeight - 250;
+        break;
+    }
+
+    return typeof value === 'number' ? value : measure;
+  };
+
+  var HTML = function HTML(_ref) {
+    var code = _ref.code,
+        height = _ref.height,
+        name = _ref.name,
+        sourceURL = _ref.sourceURL,
+        width = _ref.width,
+        errorMessage = _ref.errorMessage;
+    if (!sourceURL && !code) return null;
+    var formattedWidth = "".concat(width, "%");
+    var formattedHeight = getHeight(height);
+    return sourceURL ? /*#__PURE__*/React__default["default"].createElement("iframe", {
+      title: name,
+      src: sourceURL,
+      width: formattedWidth,
+      height: formattedHeight
+    }) : /*#__PURE__*/React__default["default"].createElement(ErrorBoundary, {
+      message: errorMessage
+    }, /*#__PURE__*/React__default["default"].createElement(Frame, {
+      initialContent: code,
+      width: formattedWidth,
+      height: formattedHeight
+    }));
+  };
+
+  HTML.defaultProps = {
+    width: 100,
+    height: 'medium'
+  };
+
   exports.Button = Button;
   exports.Checkbox = Checkbox;
   exports.Chip = Chip;
   exports.Color = Color;
+  exports.ColorPicker = ColorPicker;
+  exports.ErrorBoundary = ErrorBoundary;
+  exports.HTML = HTML;
   exports.Icon = Icon;
+  exports.Image = Image;
+  exports.Input = Input;
+  exports.QRCode = QRCode;
   exports.Switch = Switch;
+  exports.Textarea = Textarea;
 
   Object.defineProperty(exports, '__esModule', { value: true });