(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('antd')) :
  typeof define === 'function' && define.amd ? define(['react', 'antd'], factory) :
  (global = global || self, global.blocks = factory(global.React, global.antd));
}(this, (function (React, antd) { 'use strict';

  var React__default = 'default' in React ? React['default'] : React;

  function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
    try {
      var info = gen[key](arg);
      var value = info.value;
    } catch (error) {
      reject(error);
      return;
    }

    if (info.done) {
      resolve(value);
    } else {
      Promise.resolve(value).then(_next, _throw);
    }
  }

  function _asyncToGenerator(fn) {
    return function () {
      var self = this,
          args = arguments;
      return new Promise(function (resolve, reject) {
        var gen = fn.apply(self, args);

        function _next(value) {
          asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
        }

        function _throw(err) {
          asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
        }

        _next(undefined);
      });
    };
  }

  function _defineProperty(obj, key, value) {
    if (key in obj) {
      Object.defineProperty(obj, key, {
        value: value,
        enumerable: true,
        configurable: true,
        writable: true
      });
    } else {
      obj[key] = value;
    }

    return obj;
  }

  function ownKeys(object, enumerableOnly) {
    var keys = Object.keys(object);

    if (Object.getOwnPropertySymbols) {
      var symbols = Object.getOwnPropertySymbols(object);
      if (enumerableOnly) symbols = symbols.filter(function (sym) {
        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
      });
      keys.push.apply(keys, symbols);
    }

    return keys;
  }

  function _objectSpread2(target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i] != null ? arguments[i] : {};

      if (i % 2) {
        ownKeys(Object(source), true).forEach(function (key) {
          _defineProperty(target, key, source[key]);
        });
      } else if (Object.getOwnPropertyDescriptors) {
        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
      } else {
        ownKeys(Object(source)).forEach(function (key) {
          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
        });
      }
    }

    return target;
  }

  function _objectWithoutPropertiesLoose(source, excluded) {
    if (source == null) return {};
    var target = {};
    var sourceKeys = Object.keys(source);
    var key, i;

    for (i = 0; i < sourceKeys.length; i++) {
      key = sourceKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      target[key] = source[key];
    }

    return target;
  }

  function _objectWithoutProperties(source, excluded) {
    if (source == null) return {};

    var target = _objectWithoutPropertiesLoose(source, excluded);

    var key, i;

    if (Object.getOwnPropertySymbols) {
      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);

      for (i = 0; i < sourceSymbolKeys.length; i++) {
        key = sourceSymbolKeys[i];
        if (excluded.indexOf(key) >= 0) continue;
        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
        target[key] = source[key];
      }
    }

    return target;
  }

  function _slicedToArray(arr, i) {
    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
  }

  function _arrayWithHoles(arr) {
    if (Array.isArray(arr)) return arr;
  }

  function _iterableToArrayLimit(arr, i) {
    if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
    var _arr = [];
    var _n = true;
    var _d = false;
    var _e = undefined;

    try {
      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
        _arr.push(_s.value);

        if (i && _arr.length === i) break;
      }
    } catch (err) {
      _d = true;
      _e = err;
    } finally {
      try {
        if (!_n && _i["return"] != null) _i["return"]();
      } finally {
        if (_d) throw _e;
      }
    }

    return _arr;
  }

  function _unsupportedIterableToArray(o, minLen) {
    if (!o) return;
    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
    var n = Object.prototype.toString.call(o).slice(8, -1);
    if (n === "Object" && o.constructor) n = o.constructor.name;
    if (n === "Map" || n === "Set") return Array.from(n);
    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
  }

  function _arrayLikeToArray(arr, len) {
    if (len == null || len > arr.length) len = arr.length;

    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];

    return arr2;
  }

  function _nonIterableRest() {
    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
  }

  var UIApiContext = React.createContext({});

  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};

  function unwrapExports (x) {
  	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
  }

  function createCommonjsModule(fn, module) {
  	return module = { exports: {} }, fn(module, module.exports), module.exports;
  }

  var classnames = createCommonjsModule(function (module) {
  /*!
    Copyright (c) 2017 Jed Watson.
    Licensed under the MIT License (MIT), see
    http://jedwatson.github.io/classnames
  */
  /* global define */

  (function () {

  	var hasOwn = {}.hasOwnProperty;

  	function classNames () {
  		var classes = [];

  		for (var i = 0; i < arguments.length; i++) {
  			var arg = arguments[i];
  			if (!arg) continue;

  			var argType = typeof arg;

  			if (argType === 'string' || argType === 'number') {
  				classes.push(arg);
  			} else if (Array.isArray(arg) && arg.length) {
  				var inner = classNames.apply(null, arg);
  				if (inner) {
  					classes.push(inner);
  				}
  			} else if (argType === 'object') {
  				for (var key in arg) {
  					if (hasOwn.call(arg, key) && arg[key]) {
  						classes.push(key);
  					}
  				}
  			}
  		}

  		return classes.join(' ');
  	}

  	if ( module.exports) {
  		classNames.default = classNames;
  		module.exports = classNames;
  	} else {
  		window.classNames = classNames;
  	}
  }());
  });

  var tinycolor = createCommonjsModule(function (module) {
  // TinyColor v1.4.1
  // https://github.com/bgrins/TinyColor
  // Brian Grinstead, MIT License

  (function(Math) {

  var trimLeft = /^\s+/,
      trimRight = /\s+$/,
      tinyCounter = 0,
      mathRound = Math.round,
      mathMin = Math.min,
      mathMax = Math.max,
      mathRandom = Math.random;

  function tinycolor (color, opts) {

      color = (color) ? color : '';
      opts = opts || { };

      // If input is already a tinycolor, return itself
      if (color instanceof tinycolor) {
         return color;
      }
      // If we are called as a function, call using new instead
      if (!(this instanceof tinycolor)) {
          return new tinycolor(color, opts);
      }

      var rgb = inputToRGB(color);
      this._originalInput = color,
      this._r = rgb.r,
      this._g = rgb.g,
      this._b = rgb.b,
      this._a = rgb.a,
      this._roundA = mathRound(100*this._a) / 100,
      this._format = opts.format || rgb.format;
      this._gradientType = opts.gradientType;

      // Don't let the range of [0,255] come back in [0,1].
      // Potentially lose a little bit of precision here, but will fix issues where
      // .5 gets interpreted as half of the total, instead of half of 1
      // If it was supposed to be 128, this was already taken care of by `inputToRgb`
      if (this._r < 1) { this._r = mathRound(this._r); }
      if (this._g < 1) { this._g = mathRound(this._g); }
      if (this._b < 1) { this._b = mathRound(this._b); }

      this._ok = rgb.ok;
      this._tc_id = tinyCounter++;
  }

  tinycolor.prototype = {
      isDark: function() {
          return this.getBrightness() < 128;
      },
      isLight: function() {
          return !this.isDark();
      },
      isValid: function() {
          return this._ok;
      },
      getOriginalInput: function() {
        return this._originalInput;
      },
      getFormat: function() {
          return this._format;
      },
      getAlpha: function() {
          return this._a;
      },
      getBrightness: function() {
          //http://www.w3.org/TR/AERT#color-contrast
          var rgb = this.toRgb();
          return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
      },
      getLuminance: function() {
          //http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
          var rgb = this.toRgb();
          var RsRGB, GsRGB, BsRGB, R, G, B;
          RsRGB = rgb.r/255;
          GsRGB = rgb.g/255;
          BsRGB = rgb.b/255;

          if (RsRGB <= 0.03928) {R = RsRGB / 12.92;} else {R = Math.pow(((RsRGB + 0.055) / 1.055), 2.4);}
          if (GsRGB <= 0.03928) {G = GsRGB / 12.92;} else {G = Math.pow(((GsRGB + 0.055) / 1.055), 2.4);}
          if (BsRGB <= 0.03928) {B = BsRGB / 12.92;} else {B = Math.pow(((BsRGB + 0.055) / 1.055), 2.4);}
          return (0.2126 * R) + (0.7152 * G) + (0.0722 * B);
      },
      setAlpha: function(value) {
          this._a = boundAlpha(value);
          this._roundA = mathRound(100*this._a) / 100;
          return this;
      },
      toHsv: function() {
          var hsv = rgbToHsv(this._r, this._g, this._b);
          return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this._a };
      },
      toHsvString: function() {
          var hsv = rgbToHsv(this._r, this._g, this._b);
          var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100);
          return (this._a == 1) ?
            "hsv("  + h + ", " + s + "%, " + v + "%)" :
            "hsva(" + h + ", " + s + "%, " + v + "%, "+ this._roundA + ")";
      },
      toHsl: function() {
          var hsl = rgbToHsl(this._r, this._g, this._b);
          return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this._a };
      },
      toHslString: function() {
          var hsl = rgbToHsl(this._r, this._g, this._b);
          var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100);
          return (this._a == 1) ?
            "hsl("  + h + ", " + s + "%, " + l + "%)" :
            "hsla(" + h + ", " + s + "%, " + l + "%, "+ this._roundA + ")";
      },
      toHex: function(allow3Char) {
          return rgbToHex(this._r, this._g, this._b, allow3Char);
      },
      toHexString: function(allow3Char) {
          return '#' + this.toHex(allow3Char);
      },
      toHex8: function(allow4Char) {
          return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char);
      },
      toHex8String: function(allow4Char) {
          return '#' + this.toHex8(allow4Char);
      },
      toRgb: function() {
          return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a };
      },
      toRgbString: function() {
          return (this._a == 1) ?
            "rgb("  + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" :
            "rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")";
      },
      toPercentageRgb: function() {
          return { r: mathRound(bound01(this._r, 255) * 100) + "%", g: mathRound(bound01(this._g, 255) * 100) + "%", b: mathRound(bound01(this._b, 255) * 100) + "%", a: this._a };
      },
      toPercentageRgbString: function() {
          return (this._a == 1) ?
            "rgb("  + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%)" :
            "rgba(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")";
      },
      toName: function() {
          if (this._a === 0) {
              return "transparent";
          }

          if (this._a < 1) {
              return false;
          }

          return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false;
      },
      toFilter: function(secondColor) {
          var hex8String = '#' + rgbaToArgbHex(this._r, this._g, this._b, this._a);
          var secondHex8String = hex8String;
          var gradientType = this._gradientType ? "GradientType = 1, " : "";

          if (secondColor) {
              var s = tinycolor(secondColor);
              secondHex8String = '#' + rgbaToArgbHex(s._r, s._g, s._b, s._a);
          }

          return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr="+hex8String+",endColorstr="+secondHex8String+")";
      },
      toString: function(format) {
          var formatSet = !!format;
          format = format || this._format;

          var formattedString = false;
          var hasAlpha = this._a < 1 && this._a >= 0;
          var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "hex4" || format === "hex8" || format === "name");

          if (needsAlphaFormat) {
              // Special case for "transparent", all other non-alpha formats
              // will return rgba when there is transparency.
              if (format === "name" && this._a === 0) {
                  return this.toName();
              }
              return this.toRgbString();
          }
          if (format === "rgb") {
              formattedString = this.toRgbString();
          }
          if (format === "prgb") {
              formattedString = this.toPercentageRgbString();
          }
          if (format === "hex" || format === "hex6") {
              formattedString = this.toHexString();
          }
          if (format === "hex3") {
              formattedString = this.toHexString(true);
          }
          if (format === "hex4") {
              formattedString = this.toHex8String(true);
          }
          if (format === "hex8") {
              formattedString = this.toHex8String();
          }
          if (format === "name") {
              formattedString = this.toName();
          }
          if (format === "hsl") {
              formattedString = this.toHslString();
          }
          if (format === "hsv") {
              formattedString = this.toHsvString();
          }

          return formattedString || this.toHexString();
      },
      clone: function() {
          return tinycolor(this.toString());
      },

      _applyModification: function(fn, args) {
          var color = fn.apply(null, [this].concat([].slice.call(args)));
          this._r = color._r;
          this._g = color._g;
          this._b = color._b;
          this.setAlpha(color._a);
          return this;
      },
      lighten: function() {
          return this._applyModification(lighten, arguments);
      },
      brighten: function() {
          return this._applyModification(brighten, arguments);
      },
      darken: function() {
          return this._applyModification(darken, arguments);
      },
      desaturate: function() {
          return this._applyModification(desaturate, arguments);
      },
      saturate: function() {
          return this._applyModification(saturate, arguments);
      },
      greyscale: function() {
          return this._applyModification(greyscale, arguments);
      },
      spin: function() {
          return this._applyModification(spin, arguments);
      },

      _applyCombination: function(fn, args) {
          return fn.apply(null, [this].concat([].slice.call(args)));
      },
      analogous: function() {
          return this._applyCombination(analogous, arguments);
      },
      complement: function() {
          return this._applyCombination(complement, arguments);
      },
      monochromatic: function() {
          return this._applyCombination(monochromatic, arguments);
      },
      splitcomplement: function() {
          return this._applyCombination(splitcomplement, arguments);
      },
      triad: function() {
          return this._applyCombination(triad, arguments);
      },
      tetrad: function() {
          return this._applyCombination(tetrad, arguments);
      }
  };

  // If input is an object, force 1 into "1.0" to handle ratios properly
  // String input requires "1.0" as input, so 1 will be treated as 1
  tinycolor.fromRatio = function(color, opts) {
      if (typeof color == "object") {
          var newColor = {};
          for (var i in color) {
              if (color.hasOwnProperty(i)) {
                  if (i === "a") {
                      newColor[i] = color[i];
                  }
                  else {
                      newColor[i] = convertToPercentage(color[i]);
                  }
              }
          }
          color = newColor;
      }

      return tinycolor(color, opts);
  };

  // Given a string or object, convert that input to RGB
  // Possible string inputs:
  //
  //     "red"
  //     "#f00" or "f00"
  //     "#ff0000" or "ff0000"
  //     "#ff000000" or "ff000000"
  //     "rgb 255 0 0" or "rgb (255, 0, 0)"
  //     "rgb 1.0 0 0" or "rgb (1, 0, 0)"
  //     "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
  //     "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
  //     "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
  //     "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
  //     "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
  //
  function inputToRGB(color) {

      var rgb = { r: 0, g: 0, b: 0 };
      var a = 1;
      var s = null;
      var v = null;
      var l = null;
      var ok = false;
      var format = false;

      if (typeof color == "string") {
          color = stringInputToObject(color);
      }

      if (typeof color == "object") {
          if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
              rgb = rgbToRgb(color.r, color.g, color.b);
              ok = true;
              format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb";
          }
          else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
              s = convertToPercentage(color.s);
              v = convertToPercentage(color.v);
              rgb = hsvToRgb(color.h, s, v);
              ok = true;
              format = "hsv";
          }
          else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
              s = convertToPercentage(color.s);
              l = convertToPercentage(color.l);
              rgb = hslToRgb(color.h, s, l);
              ok = true;
              format = "hsl";
          }

          if (color.hasOwnProperty("a")) {
              a = color.a;
          }
      }

      a = boundAlpha(a);

      return {
          ok: ok,
          format: color.format || format,
          r: mathMin(255, mathMax(rgb.r, 0)),
          g: mathMin(255, mathMax(rgb.g, 0)),
          b: mathMin(255, mathMax(rgb.b, 0)),
          a: a
      };
  }


  // Conversion Functions
  // --------------------

  // `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from:
  // <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>

  // `rgbToRgb`
  // Handle bounds / percentage checking to conform to CSS color spec
  // <http://www.w3.org/TR/css3-color/>
  // *Assumes:* r, g, b in [0, 255] or [0, 1]
  // *Returns:* { r, g, b } in [0, 255]
  function rgbToRgb(r, g, b){
      return {
          r: bound01(r, 255) * 255,
          g: bound01(g, 255) * 255,
          b: bound01(b, 255) * 255
      };
  }

  // `rgbToHsl`
  // Converts an RGB color value to HSL.
  // *Assumes:* r, g, and b are contained in [0, 255] or [0, 1]
  // *Returns:* { h, s, l } in [0,1]
  function rgbToHsl(r, g, b) {

      r = bound01(r, 255);
      g = bound01(g, 255);
      b = bound01(b, 255);

      var max = mathMax(r, g, b), min = mathMin(r, g, b);
      var h, s, l = (max + min) / 2;

      if(max == min) {
          h = s = 0; // achromatic
      }
      else {
          var d = max - min;
          s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
          switch(max) {
              case r: h = (g - b) / d + (g < b ? 6 : 0); break;
              case g: h = (b - r) / d + 2; break;
              case b: h = (r - g) / d + 4; break;
          }

          h /= 6;
      }

      return { h: h, s: s, l: l };
  }

  // `hslToRgb`
  // Converts an HSL color value to RGB.
  // *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
  // *Returns:* { r, g, b } in the set [0, 255]
  function hslToRgb(h, s, l) {
      var r, g, b;

      h = bound01(h, 360);
      s = bound01(s, 100);
      l = bound01(l, 100);

      function hue2rgb(p, q, t) {
          if(t < 0) t += 1;
          if(t > 1) t -= 1;
          if(t < 1/6) return p + (q - p) * 6 * t;
          if(t < 1/2) return q;
          if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
          return p;
      }

      if(s === 0) {
          r = g = b = l; // achromatic
      }
      else {
          var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
          var p = 2 * l - q;
          r = hue2rgb(p, q, h + 1/3);
          g = hue2rgb(p, q, h);
          b = hue2rgb(p, q, h - 1/3);
      }

      return { r: r * 255, g: g * 255, b: b * 255 };
  }

  // `rgbToHsv`
  // Converts an RGB color value to HSV
  // *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
  // *Returns:* { h, s, v } in [0,1]
  function rgbToHsv(r, g, b) {

      r = bound01(r, 255);
      g = bound01(g, 255);
      b = bound01(b, 255);

      var max = mathMax(r, g, b), min = mathMin(r, g, b);
      var h, s, v = max;

      var d = max - min;
      s = max === 0 ? 0 : d / max;

      if(max == min) {
          h = 0; // achromatic
      }
      else {
          switch(max) {
              case r: h = (g - b) / d + (g < b ? 6 : 0); break;
              case g: h = (b - r) / d + 2; break;
              case b: h = (r - g) / d + 4; break;
          }
          h /= 6;
      }
      return { h: h, s: s, v: v };
  }

  // `hsvToRgb`
  // Converts an HSV color value to RGB.
  // *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
  // *Returns:* { r, g, b } in the set [0, 255]
   function hsvToRgb(h, s, v) {

      h = bound01(h, 360) * 6;
      s = bound01(s, 100);
      v = bound01(v, 100);

      var i = Math.floor(h),
          f = h - i,
          p = v * (1 - s),
          q = v * (1 - f * s),
          t = v * (1 - (1 - f) * s),
          mod = i % 6,
          r = [v, q, p, p, t, v][mod],
          g = [t, v, v, q, p, p][mod],
          b = [p, p, t, v, v, q][mod];

      return { r: r * 255, g: g * 255, b: b * 255 };
  }

  // `rgbToHex`
  // Converts an RGB color to hex
  // Assumes r, g, and b are contained in the set [0, 255]
  // Returns a 3 or 6 character hex
  function rgbToHex(r, g, b, allow3Char) {

      var hex = [
          pad2(mathRound(r).toString(16)),
          pad2(mathRound(g).toString(16)),
          pad2(mathRound(b).toString(16))
      ];

      // Return a 3 character hex if possible
      if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) {
          return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
      }

      return hex.join("");
  }

  // `rgbaToHex`
  // Converts an RGBA color plus alpha transparency to hex
  // Assumes r, g, b are contained in the set [0, 255] and
  // a in [0, 1]. Returns a 4 or 8 character rgba hex
  function rgbaToHex(r, g, b, a, allow4Char) {

      var hex = [
          pad2(mathRound(r).toString(16)),
          pad2(mathRound(g).toString(16)),
          pad2(mathRound(b).toString(16)),
          pad2(convertDecimalToHex(a))
      ];

      // Return a 4 character hex if possible
      if (allow4Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) && hex[3].charAt(0) == hex[3].charAt(1)) {
          return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
      }

      return hex.join("");
  }

  // `rgbaToArgbHex`
  // Converts an RGBA color to an ARGB Hex8 string
  // Rarely used, but required for "toFilter()"
  function rgbaToArgbHex(r, g, b, a) {

      var hex = [
          pad2(convertDecimalToHex(a)),
          pad2(mathRound(r).toString(16)),
          pad2(mathRound(g).toString(16)),
          pad2(mathRound(b).toString(16))
      ];

      return hex.join("");
  }

  // `equals`
  // Can be called with any tinycolor input
  tinycolor.equals = function (color1, color2) {
      if (!color1 || !color2) { return false; }
      return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString();
  };

  tinycolor.random = function() {
      return tinycolor.fromRatio({
          r: mathRandom(),
          g: mathRandom(),
          b: mathRandom()
      });
  };


  // Modification Functions
  // ----------------------
  // Thanks to less.js for some of the basics here
  // <https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js>

  function desaturate(color, amount) {
      amount = (amount === 0) ? 0 : (amount || 10);
      var hsl = tinycolor(color).toHsl();
      hsl.s -= amount / 100;
      hsl.s = clamp01(hsl.s);
      return tinycolor(hsl);
  }

  function saturate(color, amount) {
      amount = (amount === 0) ? 0 : (amount || 10);
      var hsl = tinycolor(color).toHsl();
      hsl.s += amount / 100;
      hsl.s = clamp01(hsl.s);
      return tinycolor(hsl);
  }

  function greyscale(color) {
      return tinycolor(color).desaturate(100);
  }

  function lighten (color, amount) {
      amount = (amount === 0) ? 0 : (amount || 10);
      var hsl = tinycolor(color).toHsl();
      hsl.l += amount / 100;
      hsl.l = clamp01(hsl.l);
      return tinycolor(hsl);
  }

  function brighten(color, amount) {
      amount = (amount === 0) ? 0 : (amount || 10);
      var rgb = tinycolor(color).toRgb();
      rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * - (amount / 100))));
      rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * - (amount / 100))));
      rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * - (amount / 100))));
      return tinycolor(rgb);
  }

  function darken (color, amount) {
      amount = (amount === 0) ? 0 : (amount || 10);
      var hsl = tinycolor(color).toHsl();
      hsl.l -= amount / 100;
      hsl.l = clamp01(hsl.l);
      return tinycolor(hsl);
  }

  // Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
  // Values outside of this range will be wrapped into this range.
  function spin(color, amount) {
      var hsl = tinycolor(color).toHsl();
      var hue = (hsl.h + amount) % 360;
      hsl.h = hue < 0 ? 360 + hue : hue;
      return tinycolor(hsl);
  }

  // Combination Functions
  // ---------------------
  // Thanks to jQuery xColor for some of the ideas behind these
  // <https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js>

  function complement(color) {
      var hsl = tinycolor(color).toHsl();
      hsl.h = (hsl.h + 180) % 360;
      return tinycolor(hsl);
  }

  function triad(color) {
      var hsl = tinycolor(color).toHsl();
      var h = hsl.h;
      return [
          tinycolor(color),
          tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }),
          tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l })
      ];
  }

  function tetrad(color) {
      var hsl = tinycolor(color).toHsl();
      var h = hsl.h;
      return [
          tinycolor(color),
          tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }),
          tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }),
          tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l })
      ];
  }

  function splitcomplement(color) {
      var hsl = tinycolor(color).toHsl();
      var h = hsl.h;
      return [
          tinycolor(color),
          tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l}),
          tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l})
      ];
  }

  function analogous(color, results, slices) {
      results = results || 6;
      slices = slices || 30;

      var hsl = tinycolor(color).toHsl();
      var part = 360 / slices;
      var ret = [tinycolor(color)];

      for (hsl.h = ((hsl.h - (part * results >> 1)) + 720) % 360; --results; ) {
          hsl.h = (hsl.h + part) % 360;
          ret.push(tinycolor(hsl));
      }
      return ret;
  }

  function monochromatic(color, results) {
      results = results || 6;
      var hsv = tinycolor(color).toHsv();
      var h = hsv.h, s = hsv.s, v = hsv.v;
      var ret = [];
      var modification = 1 / results;

      while (results--) {
          ret.push(tinycolor({ h: h, s: s, v: v}));
          v = (v + modification) % 1;
      }

      return ret;
  }

  // Utility Functions
  // ---------------------

  tinycolor.mix = function(color1, color2, amount) {
      amount = (amount === 0) ? 0 : (amount || 50);

      var rgb1 = tinycolor(color1).toRgb();
      var rgb2 = tinycolor(color2).toRgb();

      var p = amount / 100;

      var rgba = {
          r: ((rgb2.r - rgb1.r) * p) + rgb1.r,
          g: ((rgb2.g - rgb1.g) * p) + rgb1.g,
          b: ((rgb2.b - rgb1.b) * p) + rgb1.b,
          a: ((rgb2.a - rgb1.a) * p) + rgb1.a
      };

      return tinycolor(rgba);
  };


  // Readability Functions
  // ---------------------
  // <http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef (WCAG Version 2)

  // `contrast`
  // Analyze the 2 colors and returns the color contrast defined by (WCAG Version 2)
  tinycolor.readability = function(color1, color2) {
      var c1 = tinycolor(color1);
      var c2 = tinycolor(color2);
      return (Math.max(c1.getLuminance(),c2.getLuminance())+0.05) / (Math.min(c1.getLuminance(),c2.getLuminance())+0.05);
  };

  // `isReadable`
  // Ensure that foreground and background color combinations meet WCAG2 guidelines.
  // The third argument is an optional Object.
  //      the 'level' property states 'AA' or 'AAA' - if missing or invalid, it defaults to 'AA';
  //      the 'size' property states 'large' or 'small' - if missing or invalid, it defaults to 'small'.
  // If the entire object is absent, isReadable defaults to {level:"AA",size:"small"}.

  // *Example*
  //    tinycolor.isReadable("#000", "#111") => false
  //    tinycolor.isReadable("#000", "#111",{level:"AA",size:"large"}) => false
  tinycolor.isReadable = function(color1, color2, wcag2) {
      var readability = tinycolor.readability(color1, color2);
      var wcag2Parms, out;

      out = false;

      wcag2Parms = validateWCAG2Parms(wcag2);
      switch (wcag2Parms.level + wcag2Parms.size) {
          case "AAsmall":
          case "AAAlarge":
              out = readability >= 4.5;
              break;
          case "AAlarge":
              out = readability >= 3;
              break;
          case "AAAsmall":
              out = readability >= 7;
              break;
      }
      return out;

  };

  // `mostReadable`
  // Given a base color and a list of possible foreground or background
  // colors for that base, returns the most readable color.
  // Optionally returns Black or White if the most readable color is unreadable.
  // *Example*
  //    tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255"
  //    tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString();  // "#ffffff"
  //    tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString(); // "#faf3f3"
  //    tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(); // "#ffffff"
  tinycolor.mostReadable = function(baseColor, colorList, args) {
      var bestColor = null;
      var bestScore = 0;
      var readability;
      var includeFallbackColors, level, size ;
      args = args || {};
      includeFallbackColors = args.includeFallbackColors ;
      level = args.level;
      size = args.size;

      for (var i= 0; i < colorList.length ; i++) {
          readability = tinycolor.readability(baseColor, colorList[i]);
          if (readability > bestScore) {
              bestScore = readability;
              bestColor = tinycolor(colorList[i]);
          }
      }

      if (tinycolor.isReadable(baseColor, bestColor, {"level":level,"size":size}) || !includeFallbackColors) {
          return bestColor;
      }
      else {
          args.includeFallbackColors=false;
          return tinycolor.mostReadable(baseColor,["#fff", "#000"],args);
      }
  };


  // Big List of Colors
  // ------------------
  // <http://www.w3.org/TR/css3-color/#svg-color>
  var names = tinycolor.names = {
      aliceblue: "f0f8ff",
      antiquewhite: "faebd7",
      aqua: "0ff",
      aquamarine: "7fffd4",
      azure: "f0ffff",
      beige: "f5f5dc",
      bisque: "ffe4c4",
      black: "000",
      blanchedalmond: "ffebcd",
      blue: "00f",
      blueviolet: "8a2be2",
      brown: "a52a2a",
      burlywood: "deb887",
      burntsienna: "ea7e5d",
      cadetblue: "5f9ea0",
      chartreuse: "7fff00",
      chocolate: "d2691e",
      coral: "ff7f50",
      cornflowerblue: "6495ed",
      cornsilk: "fff8dc",
      crimson: "dc143c",
      cyan: "0ff",
      darkblue: "00008b",
      darkcyan: "008b8b",
      darkgoldenrod: "b8860b",
      darkgray: "a9a9a9",
      darkgreen: "006400",
      darkgrey: "a9a9a9",
      darkkhaki: "bdb76b",
      darkmagenta: "8b008b",
      darkolivegreen: "556b2f",
      darkorange: "ff8c00",
      darkorchid: "9932cc",
      darkred: "8b0000",
      darksalmon: "e9967a",
      darkseagreen: "8fbc8f",
      darkslateblue: "483d8b",
      darkslategray: "2f4f4f",
      darkslategrey: "2f4f4f",
      darkturquoise: "00ced1",
      darkviolet: "9400d3",
      deeppink: "ff1493",
      deepskyblue: "00bfff",
      dimgray: "696969",
      dimgrey: "696969",
      dodgerblue: "1e90ff",
      firebrick: "b22222",
      floralwhite: "fffaf0",
      forestgreen: "228b22",
      fuchsia: "f0f",
      gainsboro: "dcdcdc",
      ghostwhite: "f8f8ff",
      gold: "ffd700",
      goldenrod: "daa520",
      gray: "808080",
      green: "008000",
      greenyellow: "adff2f",
      grey: "808080",
      honeydew: "f0fff0",
      hotpink: "ff69b4",
      indianred: "cd5c5c",
      indigo: "4b0082",
      ivory: "fffff0",
      khaki: "f0e68c",
      lavender: "e6e6fa",
      lavenderblush: "fff0f5",
      lawngreen: "7cfc00",
      lemonchiffon: "fffacd",
      lightblue: "add8e6",
      lightcoral: "f08080",
      lightcyan: "e0ffff",
      lightgoldenrodyellow: "fafad2",
      lightgray: "d3d3d3",
      lightgreen: "90ee90",
      lightgrey: "d3d3d3",
      lightpink: "ffb6c1",
      lightsalmon: "ffa07a",
      lightseagreen: "20b2aa",
      lightskyblue: "87cefa",
      lightslategray: "789",
      lightslategrey: "789",
      lightsteelblue: "b0c4de",
      lightyellow: "ffffe0",
      lime: "0f0",
      limegreen: "32cd32",
      linen: "faf0e6",
      magenta: "f0f",
      maroon: "800000",
      mediumaquamarine: "66cdaa",
      mediumblue: "0000cd",
      mediumorchid: "ba55d3",
      mediumpurple: "9370db",
      mediumseagreen: "3cb371",
      mediumslateblue: "7b68ee",
      mediumspringgreen: "00fa9a",
      mediumturquoise: "48d1cc",
      mediumvioletred: "c71585",
      midnightblue: "191970",
      mintcream: "f5fffa",
      mistyrose: "ffe4e1",
      moccasin: "ffe4b5",
      navajowhite: "ffdead",
      navy: "000080",
      oldlace: "fdf5e6",
      olive: "808000",
      olivedrab: "6b8e23",
      orange: "ffa500",
      orangered: "ff4500",
      orchid: "da70d6",
      palegoldenrod: "eee8aa",
      palegreen: "98fb98",
      paleturquoise: "afeeee",
      palevioletred: "db7093",
      papayawhip: "ffefd5",
      peachpuff: "ffdab9",
      peru: "cd853f",
      pink: "ffc0cb",
      plum: "dda0dd",
      powderblue: "b0e0e6",
      purple: "800080",
      rebeccapurple: "663399",
      red: "f00",
      rosybrown: "bc8f8f",
      royalblue: "4169e1",
      saddlebrown: "8b4513",
      salmon: "fa8072",
      sandybrown: "f4a460",
      seagreen: "2e8b57",
      seashell: "fff5ee",
      sienna: "a0522d",
      silver: "c0c0c0",
      skyblue: "87ceeb",
      slateblue: "6a5acd",
      slategray: "708090",
      slategrey: "708090",
      snow: "fffafa",
      springgreen: "00ff7f",
      steelblue: "4682b4",
      tan: "d2b48c",
      teal: "008080",
      thistle: "d8bfd8",
      tomato: "ff6347",
      turquoise: "40e0d0",
      violet: "ee82ee",
      wheat: "f5deb3",
      white: "fff",
      whitesmoke: "f5f5f5",
      yellow: "ff0",
      yellowgreen: "9acd32"
  };

  // Make it easy to access colors via `hexNames[hex]`
  var hexNames = tinycolor.hexNames = flip(names);


  // Utilities
  // ---------

  // `{ 'name1': 'val1' }` becomes `{ 'val1': 'name1' }`
  function flip(o) {
      var flipped = { };
      for (var i in o) {
          if (o.hasOwnProperty(i)) {
              flipped[o[i]] = i;
          }
      }
      return flipped;
  }

  // Return a valid alpha value [0,1] with all invalid values being set to 1
  function boundAlpha(a) {
      a = parseFloat(a);

      if (isNaN(a) || a < 0 || a > 1) {
          a = 1;
      }

      return a;
  }

  // Take input from [0, n] and return it as [0, 1]
  function bound01(n, max) {
      if (isOnePointZero(n)) { n = "100%"; }

      var processPercent = isPercentage(n);
      n = mathMin(max, mathMax(0, parseFloat(n)));

      // Automatically convert percentage into number
      if (processPercent) {
          n = parseInt(n * max, 10) / 100;
      }

      // Handle floating point rounding errors
      if ((Math.abs(n - max) < 0.000001)) {
          return 1;
      }

      // Convert into [0, 1] range if it isn't already
      return (n % max) / parseFloat(max);
  }

  // Force a number between 0 and 1
  function clamp01(val) {
      return mathMin(1, mathMax(0, val));
  }

  // Parse a base-16 hex value into a base-10 integer
  function parseIntFromHex(val) {
      return parseInt(val, 16);
  }

  // Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
  // <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
  function isOnePointZero(n) {
      return typeof n == "string" && n.indexOf('.') != -1 && parseFloat(n) === 1;
  }

  // Check to see if string passed in is a percentage
  function isPercentage(n) {
      return typeof n === "string" && n.indexOf('%') != -1;
  }

  // Force a hex value to have 2 characters
  function pad2(c) {
      return c.length == 1 ? '0' + c : '' + c;
  }

  // Replace a decimal with it's percentage value
  function convertToPercentage(n) {
      if (n <= 1) {
          n = (n * 100) + "%";
      }

      return n;
  }

  // Converts a decimal to a hex value
  function convertDecimalToHex(d) {
      return Math.round(parseFloat(d) * 255).toString(16);
  }
  // Converts a hex value to a decimal
  function convertHexToDecimal(h) {
      return (parseIntFromHex(h) / 255);
  }

  var matchers = (function() {

      // <http://www.w3.org/TR/css3-values/#integers>
      var CSS_INTEGER = "[-\\+]?\\d+%?";

      // <http://www.w3.org/TR/css3-values/#number-value>
      var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";

      // Allow positive/negative integer/number.  Don't capture the either/or, just the entire outcome.
      var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")";

      // Actual matching.
      // Parentheses and commas are optional, but not required.
      // Whitespace can take the place of commas or opening paren
      var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
      var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";

      return {
          CSS_UNIT: new RegExp(CSS_UNIT),
          rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
          rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
          hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
          hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
          hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
          hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
          hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
          hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
          hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
          hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
      };
  })();

  // `isValidCSSUnit`
  // Take in a single string / number and check to see if it looks like a CSS unit
  // (see `matchers` above for definition).
  function isValidCSSUnit(color) {
      return !!matchers.CSS_UNIT.exec(color);
  }

  // `stringInputToObject`
  // Permissive string parsing.  Take in a number of formats, and output an object
  // based on detected format.  Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}`
  function stringInputToObject(color) {

      color = color.replace(trimLeft,'').replace(trimRight, '').toLowerCase();
      var named = false;
      if (names[color]) {
          color = names[color];
          named = true;
      }
      else if (color == 'transparent') {
          return { r: 0, g: 0, b: 0, a: 0, format: "name" };
      }

      // Try to match string input using regular expressions.
      // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
      // Just return an object and let the conversion functions handle that.
      // This way the result will be the same whether the tinycolor is initialized with string or object.
      var match;
      if ((match = matchers.rgb.exec(color))) {
          return { r: match[1], g: match[2], b: match[3] };
      }
      if ((match = matchers.rgba.exec(color))) {
          return { r: match[1], g: match[2], b: match[3], a: match[4] };
      }
      if ((match = matchers.hsl.exec(color))) {
          return { h: match[1], s: match[2], l: match[3] };
      }
      if ((match = matchers.hsla.exec(color))) {
          return { h: match[1], s: match[2], l: match[3], a: match[4] };
      }
      if ((match = matchers.hsv.exec(color))) {
          return { h: match[1], s: match[2], v: match[3] };
      }
      if ((match = matchers.hsva.exec(color))) {
          return { h: match[1], s: match[2], v: match[3], a: match[4] };
      }
      if ((match = matchers.hex8.exec(color))) {
          return {
              r: parseIntFromHex(match[1]),
              g: parseIntFromHex(match[2]),
              b: parseIntFromHex(match[3]),
              a: convertHexToDecimal(match[4]),
              format: named ? "name" : "hex8"
          };
      }
      if ((match = matchers.hex6.exec(color))) {
          return {
              r: parseIntFromHex(match[1]),
              g: parseIntFromHex(match[2]),
              b: parseIntFromHex(match[3]),
              format: named ? "name" : "hex"
          };
      }
      if ((match = matchers.hex4.exec(color))) {
          return {
              r: parseIntFromHex(match[1] + '' + match[1]),
              g: parseIntFromHex(match[2] + '' + match[2]),
              b: parseIntFromHex(match[3] + '' + match[3]),
              a: convertHexToDecimal(match[4] + '' + match[4]),
              format: named ? "name" : "hex8"
          };
      }
      if ((match = matchers.hex3.exec(color))) {
          return {
              r: parseIntFromHex(match[1] + '' + match[1]),
              g: parseIntFromHex(match[2] + '' + match[2]),
              b: parseIntFromHex(match[3] + '' + match[3]),
              format: named ? "name" : "hex"
          };
      }

      return false;
  }

  function validateWCAG2Parms(parms) {
      // return valid WCAG2 parms for isReadable.
      // If input parms are invalid, return {"level":"AA", "size":"small"}
      var level, size;
      parms = parms || {"level":"AA", "size":"small"};
      level = (parms.level || "AA").toUpperCase();
      size = (parms.size || "small").toLowerCase();
      if (level !== "AA" && level !== "AAA") {
          level = "AA";
      }
      if (size !== "small" && size !== "large") {
          size = "small";
      }
      return {"level":level, "size":size};
  }

  // Node: Export function
  if ( module.exports) {
      module.exports = tinycolor;
  }
  // AMD/requirejs: Define the module
  else {
      window.tinycolor = tinycolor;
  }

  })(Math);
  });

  var generate_1 = createCommonjsModule(function (module, exports) {
  var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
      return (mod && mod.__esModule) ? mod : { "default": mod };
  };
  Object.defineProperty(exports, "__esModule", { value: true });
  var tinycolor2_1 = __importDefault(tinycolor);
  var hueStep = 2; // 色相阶梯
  var saturationStep = 16; // 饱和度阶梯，浅色部分
  var saturationStep2 = 5; // 饱和度阶梯，深色部分
  var brightnessStep1 = 5; // 亮度阶梯，浅色部分
  var brightnessStep2 = 15; // 亮度阶梯，深色部分
  var lightColorCount = 5; // 浅色数量，主色上
  var darkColorCount = 4; // 深色数量，主色下
  function getHue(hsv, i, light) {
      var hue;
      // 根据色相不同，色相转向不同
      if (Math.round(hsv.h) >= 60 && Math.round(hsv.h) <= 240) {
          hue = light ? Math.round(hsv.h) - hueStep * i : Math.round(hsv.h) + hueStep * i;
      }
      else {
          hue = light ? Math.round(hsv.h) + hueStep * i : Math.round(hsv.h) - hueStep * i;
      }
      if (hue < 0) {
          hue += 360;
      }
      else if (hue >= 360) {
          hue -= 360;
      }
      return hue;
  }
  function getSaturation(hsv, i, light) {
      // grey color don't change saturation
      if (hsv.h === 0 && hsv.s === 0) {
          return hsv.s;
      }
      var saturation;
      if (light) {
          saturation = Math.round(hsv.s * 100) - saturationStep * i;
      }
      else if (i === darkColorCount) {
          saturation = Math.round(hsv.s * 100) + saturationStep;
      }
      else {
          saturation = Math.round(hsv.s * 100) + saturationStep2 * i;
      }
      // 边界值修正
      if (saturation > 100) {
          saturation = 100;
      }
      // 第一格的 s 限制在 6-10 之间
      if (light && i === lightColorCount && saturation > 10) {
          saturation = 10;
      }
      if (saturation < 6) {
          saturation = 6;
      }
      return saturation;
  }
  function getValue(hsv, i, light) {
      if (light) {
          return Math.round(hsv.v * 100) + brightnessStep1 * i;
      }
      return Math.round(hsv.v * 100) - brightnessStep2 * i;
  }
  function generate(color) {
      var patterns = [];
      var pColor = tinycolor2_1.default(color);
      for (var i = lightColorCount; i > 0; i -= 1) {
          var hsv = pColor.toHsv();
          var colorString = tinycolor2_1.default({
              h: getHue(hsv, i, true),
              s: getSaturation(hsv, i, true),
              v: getValue(hsv, i, true),
          }).toHexString();
          patterns.push(colorString);
      }
      patterns.push(pColor.toHexString());
      for (var i = 1; i <= darkColorCount; i += 1) {
          var hsv = pColor.toHsv();
          var colorString = tinycolor2_1.default({
              h: getHue(hsv, i),
              s: getSaturation(hsv, i),
              v: getValue(hsv, i),
          }).toHexString();
          patterns.push(colorString);
      }
      return patterns;
  }
  exports.default = generate;
  });

  unwrapExports(generate_1);

  var lib = createCommonjsModule(function (module, exports) {
  var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
      return (mod && mod.__esModule) ? mod : { "default": mod };
  };
  Object.defineProperty(exports, "__esModule", { value: true });
  var generate_1$1 = __importDefault(generate_1);
  exports.generate = generate_1$1.default;
  var presetPrimaryColors = {
      red: '#F5222D',
      volcano: '#FA541C',
      orange: '#FA8C16',
      gold: '#FAAD14',
      yellow: '#FADB14',
      lime: '#A0D911',
      green: '#52C41A',
      cyan: '#13C2C2',
      blue: '#1890FF',
      geekblue: '#2F54EB',
      purple: '#722ED1',
      magenta: '#EB2F96',
      grey: '#666666',
  };
  exports.presetPrimaryColors = presetPrimaryColors;
  var presetPalettes = {};
  exports.presetPalettes = presetPalettes;
  Object.keys(presetPrimaryColors).forEach(function (key) {
      presetPalettes[key] = generate_1$1.default(presetPrimaryColors[key]);
      presetPalettes[key].primary = presetPalettes[key][5];
  });
  var red = presetPalettes.red;
  exports.red = red;
  var volcano = presetPalettes.volcano;
  exports.volcano = volcano;
  var gold = presetPalettes.gold;
  exports.gold = gold;
  var orange = presetPalettes.orange;
  exports.orange = orange;
  var yellow = presetPalettes.yellow;
  exports.yellow = yellow;
  var lime = presetPalettes.lime;
  exports.lime = lime;
  var green = presetPalettes.green;
  exports.green = green;
  var cyan = presetPalettes.cyan;
  exports.cyan = cyan;
  var blue = presetPalettes.blue;
  exports.blue = blue;
  var geekblue = presetPalettes.geekblue;
  exports.geekblue = geekblue;
  var purple = presetPalettes.purple;
  exports.purple = purple;
  var magenta = presetPalettes.magenta;
  exports.magenta = magenta;
  var grey = presetPalettes.grey;
  exports.grey = grey;
  });

  unwrapExports(lib);
  var lib_1 = lib.generate;
  var lib_2 = lib.presetPrimaryColors;
  var lib_3 = lib.presetPalettes;
  var lib_4 = lib.red;
  var lib_5 = lib.volcano;
  var lib_6 = lib.gold;
  var lib_7 = lib.orange;
  var lib_8 = lib.yellow;
  var lib_9 = lib.lime;
  var lib_10 = lib.green;
  var lib_11 = lib.cyan;
  var lib_12 = lib.blue;
  var lib_13 = lib.geekblue;
  var lib_14 = lib.purple;
  var lib_15 = lib.magenta;
  var lib_16 = lib.grey;

  /* eslint-disable no-console */
  var warned = {};
  function warning(valid, message) {
    // Support uglify
    if ( !valid && console !== undefined) {
      console.error("Warning: ".concat(message));
    }
  }
  function call(method, valid, message) {
    if (!valid && !warned[message]) {
      method(false, message);
      warned[message] = true;
    }
  }
  function warningOnce(valid, message) {
    call(warning, valid, message);
  }
  /* eslint-enable */

  var containers = []; // will store container HTMLElement references
  var styleElements = []; // will store {prepend: HTMLElement, append: HTMLElement}

  var usage = 'insert-css: You need to provide a CSS string. Usage: insertCss(cssString[, options]).';

  function insertCss(css, options) {
      options = options || {};

      if (css === undefined) {
          throw new Error(usage);
      }

      var position = options.prepend === true ? 'prepend' : 'append';
      var container = options.container !== undefined ? options.container : document.querySelector('head');
      var containerId = containers.indexOf(container);

      // first time we see this container, create the necessary entries
      if (containerId === -1) {
          containerId = containers.push(container) - 1;
          styleElements[containerId] = {};
      }

      // try to get the correponding container + position styleElement, create it otherwise
      var styleElement;

      if (styleElements[containerId] !== undefined && styleElements[containerId][position] !== undefined) {
          styleElement = styleElements[containerId][position];
      } else {
          styleElement = styleElements[containerId][position] = createStyleElement();

          if (position === 'prepend') {
              container.insertBefore(styleElement, container.childNodes[0]);
          } else {
              container.appendChild(styleElement);
          }
      }

      // strip potential UTF-8 BOM if css was read from a file
      if (css.charCodeAt(0) === 0xFEFF) { css = css.substr(1, css.length); }

      // actually add the stylesheet
      if (styleElement.styleSheet) {
          styleElement.styleSheet.cssText += css;
      } else {
          styleElement.textContent += css;
      }

      return styleElement;
  }
  function createStyleElement() {
      var styleElement = document.createElement('style');
      styleElement.setAttribute('type', 'text/css');
      return styleElement;
  }

  var insertCss_1 = insertCss;
  var insertCss_2 = insertCss;
  insertCss_1.insertCss = insertCss_2;

  function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty$1(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

  function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

  function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
  function warning$1(valid, message) {
    warningOnce(valid, "[@ant-design/icons] ".concat(message));
  }
  function isIconDefinition(target) {
    return _typeof(target) === 'object' && typeof target.name === 'string' && typeof target.theme === 'string' && (_typeof(target.icon) === 'object' || typeof target.icon === 'function');
  }
  function normalizeAttrs() {
    var attrs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
    return Object.keys(attrs).reduce(function (acc, key) {
      var val = attrs[key];

      switch (key) {
        case 'class':
          acc.className = val;
          delete acc.class;
          break;

        default:
          acc[key] = val;
      }

      return acc;
    }, {});
  }
  function generate(node, key, rootProps) {
    if (!rootProps) {
      return React__default.createElement(node.tag, _objectSpread({
        key: key
      }, normalizeAttrs(node.attrs)), (node.children || []).map(function (child, index) {
        return generate(child, "".concat(key, "-").concat(node.tag, "-").concat(index));
      }));
    }

    return React__default.createElement(node.tag, _objectSpread({
      key: key
    }, normalizeAttrs(node.attrs), {}, rootProps), (node.children || []).map(function (child, index) {
      return generate(child, "".concat(key, "-").concat(node.tag, "-").concat(index));
    }));
  }
  function getSecondaryColor(primaryColor) {
    // choose the second color
    return lib_1(primaryColor)[0];
  }
  function normalizeTwoToneColors(twoToneColor) {
    if (!twoToneColor) {
      return [];
    }

    return Array.isArray(twoToneColor) ? twoToneColor : [twoToneColor];
  } // These props make sure that the SVG behaviours like general text.
  // Reference: https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4

  var svgBaseProps = {
    width: '1em',
    height: '1em',
    fill: 'currentColor',
    'aria-hidden': 'true',
    focusable: 'false'
  };
  var iconStyles = "\n.anticon {\n  display: inline-block;\n  color: inherit;\n  font-style: normal;\n  line-height: 0;\n  text-align: center;\n  text-transform: none;\n  vertical-align: -0.125em;\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.anticon > * {\n  line-height: 1;\n}\n\n.anticon svg {\n  display: inline-block;\n}\n\n.anticon::before {\n  display: none;\n}\n\n.anticon .anticon-icon {\n  display: block;\n}\n\n.anticon[tabindex] {\n  cursor: pointer;\n}\n\n.anticon-spin::before,\n.anticon-spin {\n  display: inline-block;\n  -webkit-animation: loadingCircle 1s infinite linear;\n  animation: loadingCircle 1s infinite linear;\n}\n\n@-webkit-keyframes loadingCircle {\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes loadingCircle {\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n";
  var cssInjectedFlag = false;
  var useInsertStyles = function useInsertStyles() {
    var styleStr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : iconStyles;
    React.useEffect(function () {
      if (!cssInjectedFlag) {
        insertCss_2(styleStr, {
          prepend: true
        });
        cssInjectedFlag = true;
      }
    }, []);
  };

  function _objectWithoutProperties$1(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$1(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

  function _objectWithoutPropertiesLoose$1(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

  function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

  function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty$2(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

  function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
  var twoToneColorPalette = {
    primaryColor: '#333',
    secondaryColor: '#E6E6E6',
    calculated: false
  };

  function setTwoToneColors(_ref) {
    var primaryColor = _ref.primaryColor,
        secondaryColor = _ref.secondaryColor;
    twoToneColorPalette.primaryColor = primaryColor;
    twoToneColorPalette.secondaryColor = secondaryColor || getSecondaryColor(primaryColor);
    twoToneColorPalette.calculated = !!secondaryColor;
  }

  function getTwoToneColors() {
    return _objectSpread$1({}, twoToneColorPalette);
  }

  var IconBase = function IconBase(props) {
    var icon = props.icon,
        className = props.className,
        onClick = props.onClick,
        style = props.style,
        primaryColor = props.primaryColor,
        secondaryColor = props.secondaryColor,
        restProps = _objectWithoutProperties$1(props, ["icon", "className", "onClick", "style", "primaryColor", "secondaryColor"]);

    var colors = twoToneColorPalette;

    if (primaryColor) {
      colors = {
        primaryColor: primaryColor,
        secondaryColor: secondaryColor || getSecondaryColor(primaryColor)
      };
    }

    useInsertStyles();
    warning$1(isIconDefinition(icon), "icon should be icon definiton, but got ".concat(icon));

    if (!isIconDefinition(icon)) {
      return null;
    }

    var target = icon;

    if (target && typeof target.icon === 'function') {
      target = _objectSpread$1({}, target, {
        icon: target.icon(colors.primaryColor, colors.secondaryColor)
      });
    }

    return generate(target.icon, "svg-".concat(target.name), _objectSpread$1({
      className: className,
      onClick: onClick,
      style: style,
      'data-icon': target.name,
      width: '1em',
      height: '1em',
      fill: 'currentColor',
      'aria-hidden': 'true'
    }, restProps));
  };

  IconBase.displayName = 'IconReact';
  IconBase.getTwoToneColors = getTwoToneColors;
  IconBase.setTwoToneColors = setTwoToneColors;

  function _slicedToArray$1(arr, i) { return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _nonIterableRest$1(); }

  function _nonIterableRest$1() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

  function _iterableToArrayLimit$1(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

  function _arrayWithHoles$1(arr) { if (Array.isArray(arr)) return arr; }
  function setTwoToneColor(twoToneColor) {
    var _normalizeTwoToneColo = normalizeTwoToneColors(twoToneColor),
        _normalizeTwoToneColo2 = _slicedToArray$1(_normalizeTwoToneColo, 2),
        primaryColor = _normalizeTwoToneColo2[0],
        secondaryColor = _normalizeTwoToneColo2[1];

    return IconBase.setTwoToneColors({
      primaryColor: primaryColor,
      secondaryColor: secondaryColor
    });
  }
  function getTwoToneColor() {
    var colors = IconBase.getTwoToneColors();

    if (!colors.calculated) {
      return colors.primaryColor;
    }

    return [colors.primaryColor, colors.secondaryColor];
  }

  function _slicedToArray$2(arr, i) { return _arrayWithHoles$2(arr) || _iterableToArrayLimit$2(arr, i) || _nonIterableRest$2(); }

  function _nonIterableRest$2() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

  function _iterableToArrayLimit$2(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

  function _arrayWithHoles$2(arr) { if (Array.isArray(arr)) return arr; }

  function _defineProperty$3(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

  function _objectWithoutProperties$2(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$2(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

  function _objectWithoutPropertiesLoose$2(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
  // should move it to antd main repo?

  setTwoToneColor('#1890ff');
  var Icon = React__default.forwardRef(function (props, ref) {
    var className = props.className,
        icon = props.icon,
        spin = props.spin,
        rotate = props.rotate,
        tabIndex = props.tabIndex,
        onClick = props.onClick,
        twoToneColor = props.twoToneColor,
        restProps = _objectWithoutProperties$2(props, ["className", "icon", "spin", "rotate", "tabIndex", "onClick", "twoToneColor"]);

    var classString = classnames('anticon', _defineProperty$3({}, "anticon-".concat(icon.name), Boolean(icon.name)), className);
    var svgClassString = classnames({
      'anticon-spin': !!spin || icon.name === 'loading'
    });
    var iconTabIndex = tabIndex;

    if (iconTabIndex === undefined && onClick) {
      iconTabIndex = -1;
    }

    var svgStyle = rotate ? {
      msTransform: "rotate(".concat(rotate, "deg)"),
      transform: "rotate(".concat(rotate, "deg)")
    } : undefined;

    var _normalizeTwoToneColo = normalizeTwoToneColors(twoToneColor),
        _normalizeTwoToneColo2 = _slicedToArray$2(_normalizeTwoToneColo, 2),
        primaryColor = _normalizeTwoToneColo2[0],
        secondaryColor = _normalizeTwoToneColo2[1];

    return React__default.createElement("span", Object.assign({
      role: "img",
      "aria-label": icon.name
    }, restProps, {
      ref: ref,
      tabIndex: iconTabIndex,
      onClick: onClick,
      className: classString
    }), React__default.createElement(IconBase, {
      className: svgClassString,
      icon: icon,
      primaryColor: primaryColor,
      secondaryColor: secondaryColor,
      style: svgStyle
    }));
  });
  Icon.displayName = 'AntdIcon';
  Icon.getTwoToneColor = getTwoToneColor;
  Icon.setTwoToneColor = setTwoToneColor;

  // This icon file is generated automatically.
  // tslint:disable
  var DownOutlined = { "name": "down", "theme": "outlined", "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" } }] } };

  // GENERATE BY ./scripts/generate.ts

  var DownOutlined$1 = function DownOutlined$1(props, ref) {
    return React__default.createElement(Icon, Object.assign({}, props, {
      ref: ref,
      icon: DownOutlined
    }));
  };

  DownOutlined$1.displayName = 'DownOutlined';
  var DownOutlined$2 = React__default.forwardRef(DownOutlined$1);

  // This icon file is generated automatically.
  // tslint:disable
  var ExportOutlined = { "name": "export", "theme": "outlined", "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M888.3 757.4h-53.8c-4.2 0-7.7 3.5-7.7 7.7v61.8H197.1V197.1h629.8v61.8c0 4.2 3.5 7.7 7.7 7.7h53.8c4.2 0 7.7-3.4 7.7-7.7V158.7c0-17-13.7-30.7-30.7-30.7H158.7c-17 0-30.7 13.7-30.7 30.7v706.6c0 17 13.7 30.7 30.7 30.7h706.6c17 0 30.7-13.7 30.7-30.7V765.1c0-4.3-3.5-7.7-7.7-7.7zm18.6-251.7L765 393.7c-5.3-4.2-13-.4-13 6.3v76H438c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h314v76c0 6.7 7.8 10.5 13 6.3l141.9-112a8 8 0 000-12.6z" } }] } };

  // GENERATE BY ./scripts/generate.ts

  var ExportOutlined$1 = function ExportOutlined$1(props, ref) {
    return React__default.createElement(Icon, Object.assign({}, props, {
      ref: ref,
      icon: ExportOutlined
    }));
  };

  ExportOutlined$1.displayName = 'ExportOutlined';
  var ExportOutlined$2 = React__default.forwardRef(ExportOutlined$1);

  // This icon file is generated automatically.
  // tslint:disable
  var EyeOutlined = { "name": "eye", "theme": "outlined", "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" } }] } };

  // GENERATE BY ./scripts/generate.ts

  var EyeOutlined$1 = function EyeOutlined$1(props, ref) {
    return React__default.createElement(Icon, Object.assign({}, props, {
      ref: ref,
      icon: EyeOutlined
    }));
  };

  EyeOutlined$1.displayName = 'EyeOutlined';
  var EyeOutlined$2 = React__default.forwardRef(EyeOutlined$1);

  // This icon file is generated automatically.
  // tslint:disable
  var LoadingOutlined = { "name": "loading", "theme": "outlined", "icon": { "tag": "svg", "attrs": { "viewBox": "0 0 1024 1024", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" } }] } };

  // GENERATE BY ./scripts/generate.ts

  var LoadingOutlined$1 = function LoadingOutlined$1(props, ref) {
    return React__default.createElement(Icon, Object.assign({}, props, {
      ref: ref,
      icon: LoadingOutlined
    }));
  };

  LoadingOutlined$1.displayName = 'LoadingOutlined';
  var LoadingOutlined$2 = React__default.forwardRef(LoadingOutlined$1);

  // This icon file is generated automatically.
  // tslint:disable
  var PlusOutlined = { "name": "plus", "theme": "outlined", "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "defs", "attrs": {}, "children": [{ "tag": "style", "attrs": {} }] }, { "tag": "path", "attrs": { "d": "M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z" } }, { "tag": "path", "attrs": { "d": "M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z" } }] } };

  // GENERATE BY ./scripts/generate.ts

  var PlusOutlined$1 = function PlusOutlined$1(props, ref) {
    return React__default.createElement(Icon, Object.assign({}, props, {
      ref: ref,
      icon: PlusOutlined
    }));
  };

  PlusOutlined$1.displayName = 'PlusOutlined';
  var PlusOutlined$2 = React__default.forwardRef(PlusOutlined$1);

  // This icon file is generated automatically.
  // tslint:disable
  var QuestionCircleOutlined = { "name": "question-circle", "theme": "outlined", "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" } }, { "tag": "path", "attrs": { "d": "M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z" } }] } };

  // GENERATE BY ./scripts/generate.ts

  var QuestionCircleOutlined$1 = function QuestionCircleOutlined$1(props, ref) {
    return React__default.createElement(Icon, Object.assign({}, props, {
      ref: ref,
      icon: QuestionCircleOutlined
    }));
  };

  QuestionCircleOutlined$1.displayName = 'QuestionCircleOutlined';
  var QuestionCircleOutlined$2 = React__default.forwardRef(QuestionCircleOutlined$1);

  // This icon file is generated automatically.
  // tslint:disable
  var ReloadOutlined = { "name": "reload", "theme": "outlined", "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92 290 92 102.3 279.5 102 511.5 101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1 1.5-4.2-.7-8.9-4.9-10.3l-56.7-19.5a8 8 0 00-10.1 4.8c-1.8 5-3.8 10-5.9 14.9-17.3 41-42.1 77.8-73.7 109.4A344.77 344.77 0 01655.9 829c-42.3 17.9-87.4 27-133.8 27-46.5 0-91.5-9.1-133.8-27A341.5 341.5 0 01279 755.2a342.16 342.16 0 01-73.7-109.4c-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4 31.6-31.6 68.4-56.4 109.3-73.8 42.3-17.9 87.4-27 133.8-27 46.5 0 91.5 9.1 133.8 27a341.5 341.5 0 01109.3 73.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c-.1-6.6-7.8-10.3-13-6.2z" } }] } };

  // GENERATE BY ./scripts/generate.ts

  var ReloadOutlined$1 = function ReloadOutlined$1(props, ref) {
    return React__default.createElement(Icon, Object.assign({}, props, {
      ref: ref,
      icon: ReloadOutlined
    }));
  };

  ReloadOutlined$1.displayName = 'ReloadOutlined';
  var ReloadOutlined$2 = React__default.forwardRef(ReloadOutlined$1);

  // This icon file is generated automatically.
  // tslint:disable
  var SearchOutlined = { "name": "search", "theme": "outlined", "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z" } }] } };

  // GENERATE BY ./scripts/generate.ts

  var SearchOutlined$1 = function SearchOutlined$1(props, ref) {
    return React__default.createElement(Icon, Object.assign({}, props, {
      ref: ref,
      icon: SearchOutlined
    }));
  };

  SearchOutlined$1.displayName = 'SearchOutlined';
  var SearchOutlined$2 = React__default.forwardRef(SearchOutlined$1);

  // This icon file is generated automatically.
  // tslint:disable
  var UpOutlined = { "name": "up", "theme": "outlined", "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z" } }] } };

  // GENERATE BY ./scripts/generate.ts

  var UpOutlined$1 = function UpOutlined$1(props, ref) {
    return React__default.createElement(Icon, Object.assign({}, props, {
      ref: ref,
      icon: UpOutlined
    }));
  };

  UpOutlined$1.displayName = 'UpOutlined';
  var UpOutlined$2 = React__default.forwardRef(UpOutlined$1);

  function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

  function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty$4(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

  function _defineProperty$4(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

  function _objectWithoutProperties$3(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$3(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

  function _objectWithoutPropertiesLoose$3(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
  var Icon$1 = React__default.forwardRef(function (props, ref) {
    var className = props.className,
        Component = props.component,
        viewBox = props.viewBox,
        spin = props.spin,
        rotate = props.rotate,
        tabIndex = props.tabIndex,
        onClick = props.onClick,
        children = props.children,
        restProps = _objectWithoutProperties$3(props, ["className", "component", "viewBox", "spin", "rotate", "tabIndex", "onClick", "children"]);

    warning$1(Boolean(Component || children), 'Should have `component` prop or `children`.');
    useInsertStyles();
    var classString = classnames('anticon', className);
    var svgClassString = classnames({
      'anticon-spin': !!spin
    });
    var svgStyle = rotate ? {
      msTransform: "rotate(".concat(rotate, "deg)"),
      transform: "rotate(".concat(rotate, "deg)")
    } : undefined;

    var innerSvgProps = _objectSpread$2({}, svgBaseProps, {
      className: svgClassString,
      style: svgStyle,
      viewBox: viewBox
    });

    if (!viewBox) {
      delete innerSvgProps.viewBox;
    } // component > children


    var renderInnerNode = function renderInnerNode() {
      if (Component) {
        return React__default.createElement(Component, Object.assign({}, innerSvgProps), children);
      }

      if (children) {
        warning$1(Boolean(viewBox) || React__default.Children.count(children) === 1 && React__default.isValidElement(children) && React__default.Children.only(children).type === 'use', 'Make sure that you provide correct `viewBox`' + ' prop (default `0 0 1024 1024`) to the icon.');
        return React__default.createElement("svg", Object.assign({}, innerSvgProps, {
          viewBox: viewBox
        }), children);
      }

      return null;
    };

    var iconTabIndex = tabIndex;

    if (iconTabIndex === undefined && onClick) {
      iconTabIndex = -1;
    }

    return React__default.createElement("span", Object.assign({
      role: "img"
    }, restProps, {
      ref: ref,
      tabIndex: iconTabIndex,
      onClick: onClick,
      className: classString
    }), renderInnerNode());
  });
  Icon$1.displayName = 'AntdIcon';

  var has = Object.prototype.hasOwnProperty;
  var isArray = Array.isArray;

  var hexTable = (function () {
      var array = [];
      for (var i = 0; i < 256; ++i) {
          array.push('%' + ((i < 16 ? '0' : '') + i.toString(16)).toUpperCase());
      }

      return array;
  }());

  var compactQueue = function compactQueue(queue) {
      while (queue.length > 1) {
          var item = queue.pop();
          var obj = item.obj[item.prop];

          if (isArray(obj)) {
              var compacted = [];

              for (var j = 0; j < obj.length; ++j) {
                  if (typeof obj[j] !== 'undefined') {
                      compacted.push(obj[j]);
                  }
              }

              item.obj[item.prop] = compacted;
          }
      }
  };

  var arrayToObject = function arrayToObject(source, options) {
      var obj = options && options.plainObjects ? Object.create(null) : {};
      for (var i = 0; i < source.length; ++i) {
          if (typeof source[i] !== 'undefined') {
              obj[i] = source[i];
          }
      }

      return obj;
  };

  var merge = function merge(target, source, options) {
      if (!source) {
          return target;
      }

      if (typeof source !== 'object') {
          if (isArray(target)) {
              target.push(source);
          } else if (target && typeof target === 'object') {
              if ((options && (options.plainObjects || options.allowPrototypes)) || !has.call(Object.prototype, source)) {
                  target[source] = true;
              }
          } else {
              return [target, source];
          }

          return target;
      }

      if (!target || typeof target !== 'object') {
          return [target].concat(source);
      }

      var mergeTarget = target;
      if (isArray(target) && !isArray(source)) {
          mergeTarget = arrayToObject(target, options);
      }

      if (isArray(target) && isArray(source)) {
          source.forEach(function (item, i) {
              if (has.call(target, i)) {
                  var targetItem = target[i];
                  if (targetItem && typeof targetItem === 'object' && item && typeof item === 'object') {
                      target[i] = merge(targetItem, item, options);
                  } else {
                      target.push(item);
                  }
              } else {
                  target[i] = item;
              }
          });
          return target;
      }

      return Object.keys(source).reduce(function (acc, key) {
          var value = source[key];

          if (has.call(acc, key)) {
              acc[key] = merge(acc[key], value, options);
          } else {
              acc[key] = value;
          }
          return acc;
      }, mergeTarget);
  };

  var assign = function assignSingleSource(target, source) {
      return Object.keys(source).reduce(function (acc, key) {
          acc[key] = source[key];
          return acc;
      }, target);
  };

  var decode = function (str, decoder, charset) {
      var strWithoutPlus = str.replace(/\+/g, ' ');
      if (charset === 'iso-8859-1') {
          // unescape never throws, no try...catch needed:
          return strWithoutPlus.replace(/%[0-9a-f]{2}/gi, unescape);
      }
      // utf-8
      try {
          return decodeURIComponent(strWithoutPlus);
      } catch (e) {
          return strWithoutPlus;
      }
  };

  var encode = function encode(str, defaultEncoder, charset) {
      // This code was originally written by Brian White (mscdex) for the io.js core querystring library.
      // It has been adapted here for stricter adherence to RFC 3986
      if (str.length === 0) {
          return str;
      }

      var string = typeof str === 'string' ? str : String(str);

      if (charset === 'iso-8859-1') {
          return escape(string).replace(/%u[0-9a-f]{4}/gi, function ($0) {
              return '%26%23' + parseInt($0.slice(2), 16) + '%3B';
          });
      }

      var out = '';
      for (var i = 0; i < string.length; ++i) {
          var c = string.charCodeAt(i);

          if (
              c === 0x2D // -
              || c === 0x2E // .
              || c === 0x5F // _
              || c === 0x7E // ~
              || (c >= 0x30 && c <= 0x39) // 0-9
              || (c >= 0x41 && c <= 0x5A) // a-z
              || (c >= 0x61 && c <= 0x7A) // A-Z
          ) {
              out += string.charAt(i);
              continue;
          }

          if (c < 0x80) {
              out = out + hexTable[c];
              continue;
          }

          if (c < 0x800) {
              out = out + (hexTable[0xC0 | (c >> 6)] + hexTable[0x80 | (c & 0x3F)]);
              continue;
          }

          if (c < 0xD800 || c >= 0xE000) {
              out = out + (hexTable[0xE0 | (c >> 12)] + hexTable[0x80 | ((c >> 6) & 0x3F)] + hexTable[0x80 | (c & 0x3F)]);
              continue;
          }

          i += 1;
          c = 0x10000 + (((c & 0x3FF) << 10) | (string.charCodeAt(i) & 0x3FF));
          out += hexTable[0xF0 | (c >> 18)]
              + hexTable[0x80 | ((c >> 12) & 0x3F)]
              + hexTable[0x80 | ((c >> 6) & 0x3F)]
              + hexTable[0x80 | (c & 0x3F)];
      }

      return out;
  };

  var compact = function compact(value) {
      var queue = [{ obj: { o: value }, prop: 'o' }];
      var refs = [];

      for (var i = 0; i < queue.length; ++i) {
          var item = queue[i];
          var obj = item.obj[item.prop];

          var keys = Object.keys(obj);
          for (var j = 0; j < keys.length; ++j) {
              var key = keys[j];
              var val = obj[key];
              if (typeof val === 'object' && val !== null && refs.indexOf(val) === -1) {
                  queue.push({ obj: obj, prop: key });
                  refs.push(val);
              }
          }
      }

      compactQueue(queue);

      return value;
  };

  var isRegExp = function isRegExp(obj) {
      return Object.prototype.toString.call(obj) === '[object RegExp]';
  };

  var isBuffer = function isBuffer(obj) {
      if (!obj || typeof obj !== 'object') {
          return false;
      }

      return !!(obj.constructor && obj.constructor.isBuffer && obj.constructor.isBuffer(obj));
  };

  var combine = function combine(a, b) {
      return [].concat(a, b);
  };

  var utils = {
      arrayToObject: arrayToObject,
      assign: assign,
      combine: combine,
      compact: compact,
      decode: decode,
      encode: encode,
      isBuffer: isBuffer,
      isRegExp: isRegExp,
      merge: merge
  };

  var replace = String.prototype.replace;
  var percentTwenties = /%20/g;

  var formats = {
      'default': 'RFC3986',
      formatters: {
          RFC1738: function (value) {
              return replace.call(value, percentTwenties, '+');
          },
          RFC3986: function (value) {
              return value;
          }
      },
      RFC1738: 'RFC1738',
      RFC3986: 'RFC3986'
  };

  var has$1 = Object.prototype.hasOwnProperty;

  var arrayPrefixGenerators = {
      brackets: function brackets(prefix) { // eslint-disable-line func-name-matching
          return prefix + '[]';
      },
      comma: 'comma',
      indices: function indices(prefix, key) { // eslint-disable-line func-name-matching
          return prefix + '[' + key + ']';
      },
      repeat: function repeat(prefix) { // eslint-disable-line func-name-matching
          return prefix;
      }
  };

  var isArray$1 = Array.isArray;
  var push = Array.prototype.push;
  var pushToArray = function (arr, valueOrArray) {
      push.apply(arr, isArray$1(valueOrArray) ? valueOrArray : [valueOrArray]);
  };

  var toISO = Date.prototype.toISOString;

  var defaults = {
      addQueryPrefix: false,
      allowDots: false,
      charset: 'utf-8',
      charsetSentinel: false,
      delimiter: '&',
      encode: true,
      encoder: utils.encode,
      encodeValuesOnly: false,
      formatter: formats.formatters[formats['default']],
      // deprecated
      indices: false,
      serializeDate: function serializeDate(date) { // eslint-disable-line func-name-matching
          return toISO.call(date);
      },
      skipNulls: false,
      strictNullHandling: false
  };

  var stringify = function stringify( // eslint-disable-line func-name-matching
      object,
      prefix,
      generateArrayPrefix,
      strictNullHandling,
      skipNulls,
      encoder,
      filter,
      sort,
      allowDots,
      serializeDate,
      formatter,
      encodeValuesOnly,
      charset
  ) {
      var obj = object;
      if (typeof filter === 'function') {
          obj = filter(prefix, obj);
      } else if (obj instanceof Date) {
          obj = serializeDate(obj);
      } else if (generateArrayPrefix === 'comma' && isArray$1(obj)) {
          obj = obj.join(',');
      }

      if (obj === null) {
          if (strictNullHandling) {
              return encoder && !encodeValuesOnly ? encoder(prefix, defaults.encoder, charset) : prefix;
          }

          obj = '';
      }

      if (typeof obj === 'string' || typeof obj === 'number' || typeof obj === 'boolean' || utils.isBuffer(obj)) {
          if (encoder) {
              var keyValue = encodeValuesOnly ? prefix : encoder(prefix, defaults.encoder, charset);
              return [formatter(keyValue) + '=' + formatter(encoder(obj, defaults.encoder, charset))];
          }
          return [formatter(prefix) + '=' + formatter(String(obj))];
      }

      var values = [];

      if (typeof obj === 'undefined') {
          return values;
      }

      var objKeys;
      if (isArray$1(filter)) {
          objKeys = filter;
      } else {
          var keys = Object.keys(obj);
          objKeys = sort ? keys.sort(sort) : keys;
      }

      for (var i = 0; i < objKeys.length; ++i) {
          var key = objKeys[i];

          if (skipNulls && obj[key] === null) {
              continue;
          }

          if (isArray$1(obj)) {
              pushToArray(values, stringify(
                  obj[key],
                  typeof generateArrayPrefix === 'function' ? generateArrayPrefix(prefix, key) : prefix,
                  generateArrayPrefix,
                  strictNullHandling,
                  skipNulls,
                  encoder,
                  filter,
                  sort,
                  allowDots,
                  serializeDate,
                  formatter,
                  encodeValuesOnly,
                  charset
              ));
          } else {
              pushToArray(values, stringify(
                  obj[key],
                  prefix + (allowDots ? '.' + key : '[' + key + ']'),
                  generateArrayPrefix,
                  strictNullHandling,
                  skipNulls,
                  encoder,
                  filter,
                  sort,
                  allowDots,
                  serializeDate,
                  formatter,
                  encodeValuesOnly,
                  charset
              ));
          }
      }

      return values;
  };

  var normalizeStringifyOptions = function normalizeStringifyOptions(opts) {
      if (!opts) {
          return defaults;
      }

      if (opts.encoder !== null && opts.encoder !== undefined && typeof opts.encoder !== 'function') {
          throw new TypeError('Encoder has to be a function.');
      }

      var charset = opts.charset || defaults.charset;
      if (typeof opts.charset !== 'undefined' && opts.charset !== 'utf-8' && opts.charset !== 'iso-8859-1') {
          throw new TypeError('The charset option must be either utf-8, iso-8859-1, or undefined');
      }

      var format = formats['default'];
      if (typeof opts.format !== 'undefined') {
          if (!has$1.call(formats.formatters, opts.format)) {
              throw new TypeError('Unknown format option provided.');
          }
          format = opts.format;
      }
      var formatter = formats.formatters[format];

      var filter = defaults.filter;
      if (typeof opts.filter === 'function' || isArray$1(opts.filter)) {
          filter = opts.filter;
      }

      return {
          addQueryPrefix: typeof opts.addQueryPrefix === 'boolean' ? opts.addQueryPrefix : defaults.addQueryPrefix,
          allowDots: typeof opts.allowDots === 'undefined' ? defaults.allowDots : !!opts.allowDots,
          charset: charset,
          charsetSentinel: typeof opts.charsetSentinel === 'boolean' ? opts.charsetSentinel : defaults.charsetSentinel,
          delimiter: typeof opts.delimiter === 'undefined' ? defaults.delimiter : opts.delimiter,
          encode: typeof opts.encode === 'boolean' ? opts.encode : defaults.encode,
          encoder: typeof opts.encoder === 'function' ? opts.encoder : defaults.encoder,
          encodeValuesOnly: typeof opts.encodeValuesOnly === 'boolean' ? opts.encodeValuesOnly : defaults.encodeValuesOnly,
          filter: filter,
          formatter: formatter,
          serializeDate: typeof opts.serializeDate === 'function' ? opts.serializeDate : defaults.serializeDate,
          skipNulls: typeof opts.skipNulls === 'boolean' ? opts.skipNulls : defaults.skipNulls,
          sort: typeof opts.sort === 'function' ? opts.sort : null,
          strictNullHandling: typeof opts.strictNullHandling === 'boolean' ? opts.strictNullHandling : defaults.strictNullHandling
      };
  };

  var stringify_1 = function (object, opts) {
      var obj = object;
      var options = normalizeStringifyOptions(opts);

      var objKeys;
      var filter;

      if (typeof options.filter === 'function') {
          filter = options.filter;
          obj = filter('', obj);
      } else if (isArray$1(options.filter)) {
          filter = options.filter;
          objKeys = filter;
      }

      var keys = [];

      if (typeof obj !== 'object' || obj === null) {
          return '';
      }

      var arrayFormat;
      if (opts && opts.arrayFormat in arrayPrefixGenerators) {
          arrayFormat = opts.arrayFormat;
      } else if (opts && 'indices' in opts) {
          arrayFormat = opts.indices ? 'indices' : 'repeat';
      } else {
          arrayFormat = 'indices';
      }

      var generateArrayPrefix = arrayPrefixGenerators[arrayFormat];

      if (!objKeys) {
          objKeys = Object.keys(obj);
      }

      if (options.sort) {
          objKeys.sort(options.sort);
      }

      for (var i = 0; i < objKeys.length; ++i) {
          var key = objKeys[i];

          if (options.skipNulls && obj[key] === null) {
              continue;
          }
          pushToArray(keys, stringify(
              obj[key],
              key,
              generateArrayPrefix,
              options.strictNullHandling,
              options.skipNulls,
              options.encode ? options.encoder : null,
              options.filter,
              options.sort,
              options.allowDots,
              options.serializeDate,
              options.formatter,
              options.encodeValuesOnly,
              options.charset
          ));
      }

      var joined = keys.join(options.delimiter);
      var prefix = options.addQueryPrefix === true ? '?' : '';

      if (options.charsetSentinel) {
          if (options.charset === 'iso-8859-1') {
              // encodeURIComponent('&#10003;'), the "numeric entity" representation of a checkmark
              prefix += 'utf8=%26%2310003%3B&';
          } else {
              // encodeURIComponent('✓')
              prefix += 'utf8=%E2%9C%93&';
          }
      }

      return joined.length > 0 ? prefix + joined : '';
  };

  var has$2 = Object.prototype.hasOwnProperty;

  var defaults$1 = {
      allowDots: false,
      allowPrototypes: false,
      arrayLimit: 20,
      charset: 'utf-8',
      charsetSentinel: false,
      comma: false,
      decoder: utils.decode,
      delimiter: '&',
      depth: 5,
      ignoreQueryPrefix: false,
      interpretNumericEntities: false,
      parameterLimit: 1000,
      parseArrays: true,
      plainObjects: false,
      strictNullHandling: false
  };

  var interpretNumericEntities = function (str) {
      return str.replace(/&#(\d+);/g, function ($0, numberStr) {
          return String.fromCharCode(parseInt(numberStr, 10));
      });
  };

  // This is what browsers will submit when the ✓ character occurs in an
  // application/x-www-form-urlencoded body and the encoding of the page containing
  // the form is iso-8859-1, or when the submitted form has an accept-charset
  // attribute of iso-8859-1. Presumably also with other charsets that do not contain
  // the ✓ character, such as us-ascii.
  var isoSentinel = 'utf8=%26%2310003%3B'; // encodeURIComponent('&#10003;')

  // These are the percent-encoded utf-8 octets representing a checkmark, indicating that the request actually is utf-8 encoded.
  var charsetSentinel = 'utf8=%E2%9C%93'; // encodeURIComponent('✓')

  var parseValues = function parseQueryStringValues(str, options) {
      var obj = {};
      var cleanStr = options.ignoreQueryPrefix ? str.replace(/^\?/, '') : str;
      var limit = options.parameterLimit === Infinity ? undefined : options.parameterLimit;
      var parts = cleanStr.split(options.delimiter, limit);
      var skipIndex = -1; // Keep track of where the utf8 sentinel was found
      var i;

      var charset = options.charset;
      if (options.charsetSentinel) {
          for (i = 0; i < parts.length; ++i) {
              if (parts[i].indexOf('utf8=') === 0) {
                  if (parts[i] === charsetSentinel) {
                      charset = 'utf-8';
                  } else if (parts[i] === isoSentinel) {
                      charset = 'iso-8859-1';
                  }
                  skipIndex = i;
                  i = parts.length; // The eslint settings do not allow break;
              }
          }
      }

      for (i = 0; i < parts.length; ++i) {
          if (i === skipIndex) {
              continue;
          }
          var part = parts[i];

          var bracketEqualsPos = part.indexOf(']=');
          var pos = bracketEqualsPos === -1 ? part.indexOf('=') : bracketEqualsPos + 1;

          var key, val;
          if (pos === -1) {
              key = options.decoder(part, defaults$1.decoder, charset);
              val = options.strictNullHandling ? null : '';
          } else {
              key = options.decoder(part.slice(0, pos), defaults$1.decoder, charset);
              val = options.decoder(part.slice(pos + 1), defaults$1.decoder, charset);
          }

          if (val && options.interpretNumericEntities && charset === 'iso-8859-1') {
              val = interpretNumericEntities(val);
          }

          if (val && options.comma && val.indexOf(',') > -1) {
              val = val.split(',');
          }

          if (has$2.call(obj, key)) {
              obj[key] = utils.combine(obj[key], val);
          } else {
              obj[key] = val;
          }
      }

      return obj;
  };

  var parseObject = function (chain, val, options) {
      var leaf = val;

      for (var i = chain.length - 1; i >= 0; --i) {
          var obj;
          var root = chain[i];

          if (root === '[]' && options.parseArrays) {
              obj = [].concat(leaf);
          } else {
              obj = options.plainObjects ? Object.create(null) : {};
              var cleanRoot = root.charAt(0) === '[' && root.charAt(root.length - 1) === ']' ? root.slice(1, -1) : root;
              var index = parseInt(cleanRoot, 10);
              if (!options.parseArrays && cleanRoot === '') {
                  obj = { 0: leaf };
              } else if (
                  !isNaN(index)
                  && root !== cleanRoot
                  && String(index) === cleanRoot
                  && index >= 0
                  && (options.parseArrays && index <= options.arrayLimit)
              ) {
                  obj = [];
                  obj[index] = leaf;
              } else {
                  obj[cleanRoot] = leaf;
              }
          }

          leaf = obj;
      }

      return leaf;
  };

  var parseKeys = function parseQueryStringKeys(givenKey, val, options) {
      if (!givenKey) {
          return;
      }

      // Transform dot notation to bracket notation
      var key = options.allowDots ? givenKey.replace(/\.([^.[]+)/g, '[$1]') : givenKey;

      // The regex chunks

      var brackets = /(\[[^[\]]*])/;
      var child = /(\[[^[\]]*])/g;

      // Get the parent

      var segment = brackets.exec(key);
      var parent = segment ? key.slice(0, segment.index) : key;

      // Stash the parent if it exists

      var keys = [];
      if (parent) {
          // If we aren't using plain objects, optionally prefix keys that would overwrite object prototype properties
          if (!options.plainObjects && has$2.call(Object.prototype, parent)) {
              if (!options.allowPrototypes) {
                  return;
              }
          }

          keys.push(parent);
      }

      // Loop through children appending to the array until we hit depth

      var i = 0;
      while ((segment = child.exec(key)) !== null && i < options.depth) {
          i += 1;
          if (!options.plainObjects && has$2.call(Object.prototype, segment[1].slice(1, -1))) {
              if (!options.allowPrototypes) {
                  return;
              }
          }
          keys.push(segment[1]);
      }

      // If there's a remainder, just add whatever is left

      if (segment) {
          keys.push('[' + key.slice(segment.index) + ']');
      }

      return parseObject(keys, val, options);
  };

  var normalizeParseOptions = function normalizeParseOptions(opts) {
      if (!opts) {
          return defaults$1;
      }

      if (opts.decoder !== null && opts.decoder !== undefined && typeof opts.decoder !== 'function') {
          throw new TypeError('Decoder has to be a function.');
      }

      if (typeof opts.charset !== 'undefined' && opts.charset !== 'utf-8' && opts.charset !== 'iso-8859-1') {
          throw new Error('The charset option must be either utf-8, iso-8859-1, or undefined');
      }
      var charset = typeof opts.charset === 'undefined' ? defaults$1.charset : opts.charset;

      return {
          allowDots: typeof opts.allowDots === 'undefined' ? defaults$1.allowDots : !!opts.allowDots,
          allowPrototypes: typeof opts.allowPrototypes === 'boolean' ? opts.allowPrototypes : defaults$1.allowPrototypes,
          arrayLimit: typeof opts.arrayLimit === 'number' ? opts.arrayLimit : defaults$1.arrayLimit,
          charset: charset,
          charsetSentinel: typeof opts.charsetSentinel === 'boolean' ? opts.charsetSentinel : defaults$1.charsetSentinel,
          comma: typeof opts.comma === 'boolean' ? opts.comma : defaults$1.comma,
          decoder: typeof opts.decoder === 'function' ? opts.decoder : defaults$1.decoder,
          delimiter: typeof opts.delimiter === 'string' || utils.isRegExp(opts.delimiter) ? opts.delimiter : defaults$1.delimiter,
          depth: typeof opts.depth === 'number' ? opts.depth : defaults$1.depth,
          ignoreQueryPrefix: opts.ignoreQueryPrefix === true,
          interpretNumericEntities: typeof opts.interpretNumericEntities === 'boolean' ? opts.interpretNumericEntities : defaults$1.interpretNumericEntities,
          parameterLimit: typeof opts.parameterLimit === 'number' ? opts.parameterLimit : defaults$1.parameterLimit,
          parseArrays: opts.parseArrays !== false,
          plainObjects: typeof opts.plainObjects === 'boolean' ? opts.plainObjects : defaults$1.plainObjects,
          strictNullHandling: typeof opts.strictNullHandling === 'boolean' ? opts.strictNullHandling : defaults$1.strictNullHandling
      };
  };

  var parse = function (str, opts) {
      var options = normalizeParseOptions(opts);

      if (str === '' || str === null || typeof str === 'undefined') {
          return options.plainObjects ? Object.create(null) : {};
      }

      var tempObj = typeof str === 'string' ? parseValues(str, options) : str;
      var obj = options.plainObjects ? Object.create(null) : {};

      // Iterate over the keys and setup the new object

      var keys = Object.keys(tempObj);
      for (var i = 0; i < keys.length; ++i) {
          var key = keys[i];
          var newObj = parseKeys(key, tempObj[key], options);
          obj = utils.merge(obj, newObj, options);
      }

      return utils.compact(obj);
  };

  var lib$1 = {
      formats: formats,
      parse: parse,
      stringify: stringify_1
  };
  var lib_2$1 = lib$1.parse;
  var lib_3$1 = lib$1.stringify;

  var Icon$2 = (function (props) {
    var SVGIcon = function SVGIcon() {
      return React__default.createElement("svg", Object.assign({
        width: "1em",
        height: "1em",
        fill: "currentColor",
        viewBox: "0 0 1024 1024"
      }, props), React__default.createElement("path", {
        d: "M949.546 650.8c11.194 0 20.29 8.981 20.48 20.13v80.129a20.48 20.48 0 01-11.06 18.185l-.352.178-432.828 206.25a32 32 0 01-27.531 0L65.427 769.422a20.48 20.48 0 01-11.413-18.363V671.28c0-11.31 9.17-20.48 20.48-20.48 3.06 0 6.082.686 8.842 2.007l414.87 198.558a32 32 0 0027.629 0l414.87-198.558a20.48 20.48 0 018.841-2.007zm0-234c11.194 0 20.29 8.981 20.48 20.13v80.129a20.48 20.48 0 01-11.06 18.185l-.352.178-432.828 206.25a32 32 0 01-27.531 0L65.427 535.422a20.48 20.48 0 01-11.413-18.363V437.28c0-11.31 9.17-20.48 20.48-20.48 3.06 0 6.082.686 8.842 2.007l414.87 198.558a32 32 0 0027.629 0l414.87-198.558a20.48 20.48 0 018.841-2.007zm-426-367.089l.47.22 445.996 212.278c9.973 4.747 14.21 16.68 9.463 26.654a20 20 0 01-9.48 9.471l-445.98 211.763a32 32 0 01-27.619-.004L54.082 298.407c-6.968-3.612-10.989-10.67-11.068-18.006v-.386c-.06-7.346 3.84-14.468 10.704-18.2l.364-.193L496.396 49.935a32 32 0 0127.15-.224z",
        fill: "currentColor",
        fillRule: "nonzero"
      }));
    };

    return React__default.createElement(Icon$1, Object.assign({
      component: SVGIcon
    }, props));
  });
  var Clear = function Clear(props) {
    var SVGIcon = function SVGIcon() {
      return React__default.createElement("svg", Object.assign({
        width: "1em",
        height: "1em",
        fill: "currentColor",
        viewBox: "0 0 1024 1024"
      }, props), React__default.createElement("path", {
        d: "M899.1 869.6l-53-305.6H864c14.4 0 26-11.6 26-26V346c0-14.4-11.6-26-26-26H618V138c0-14.4-11.6-26-26-26H432c-14.4 0-26 11.6-26 26v182H160c-14.4 0-26 11.6-26 26v192c0 14.4 11.6 26 26 26h17.9l-53 305.6c-.3 1.5-.4 3-.4 4.4 0 14.4 11.6 26 26 26h723c1.5 0 3-.1 4.4-.4 14.2-2.4 23.7-15.9 21.2-30zM204 390h272V182h72v208h272v104H204V390zm468 440V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H416V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H202.8l45.1-260H776l45.1 260H672z",
        fill: "currentColor",
        fillRule: "nonzero"
      }));
    };

    return React__default.createElement(Icon$1, Object.assign({
      component: SVGIcon
    }, props));
  };

  function styleInject(css, ref) {
    if ( ref === void 0 ) ref = {};
    var insertAt = ref.insertAt;

    if (!css || typeof document === 'undefined') { return; }

    var head = document.head || document.getElementsByTagName('head')[0];
    var style = document.createElement('style');
    style.type = 'text/css';

    if (insertAt === 'top') {
      if (head.firstChild) {
        head.insertBefore(style, head.firstChild);
      } else {
        head.appendChild(style);
      }
    } else {
      head.appendChild(style);
    }

    if (style.styleSheet) {
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }
  }

  var css = ".index-module_emptyWrapper__3JdvZ {\n  margin: 120px auto;\n  text-align: center;\n}\n.ant-empty .ant-empty-image {\n  display: block;\n}\n.index-module_tagContainer__3_88c {\n  margin-bottom: 16px;\n  float: right;\n  margin-right: -8px;\n  max-width: 60%;\n  margin-top: 0;\n  text-align: right;\n}\n.index-module_tagContainer__3_88c .ant-tag:not(.ant-tag-checkable-checked) {\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 4px;\n  margin-top: 8px;\n}\n.index-module_cardContainer__1_4Jf {\n  clear: both;\n}\n.index-module_pagination__3GdHs {\n  margin-top: 32px;\n}\n.isMini .index-module_templateCard__1S0F4 .index-module_demo__1SorJ {\n  padding: 0;\n  height: 140px;\n}\n.isMini .index-module_templateCard__1S0F4 .index-module_demo__1SorJ .index-module_addProject__2MGLz .index-module_previewBtn__1Wgo1,\n.isMini .index-module_templateCard__1S0F4 .index-module_demo__1SorJ .index-module_addProject__2MGLz .index-module_addBtn__3NxRn {\n  width: 92px;\n}\n.isMini .index-module_btnGroup__1DPYv {\n  width: 92px !important;\n}\n.isMini .index-module_btnGroup__1DPYv.index-module_hasPreview__18xm_ .index-module_previewBtn__1Wgo1 {\n  width: 42px !important;\n}\n.index-module_col__1CLyM {\n  flex: 0 1 25%;\n  overflow: hidden;\n}\n.index-module_col__1CLyM .ant-spin.ant-spin-spinning.ant-spin-show-text {\n  color: rgba(255, 255, 255, 0.65);\n}\n@media screen and (max-width: 1200px) {\n  .index-module_col__1CLyM {\n    flex: 0 1 33.33%;\n    overflow: hidden;\n  }\n}\n@media screen and (max-width: 900px) {\n  .index-module_col__1CLyM {\n    flex: 0 1 33.33%;\n    overflow: hidden;\n  }\n}\n@media screen and (max-width: 768px) {\n  .index-module_col__1CLyM {\n    flex: 0 1 50%;\n    overflow: hidden;\n  }\n}\n@media screen and (max-width: 576px) {\n  .index-module_col__1CLyM {\n    flex: 0 1 100%;\n    overflow: hidden;\n  }\n}\n.index-module_templateCard__1S0F4 {\n  width: 100%;\n  cursor: pointer;\n  position: relative;\n  top: 0;\n  transition: all 0.3s;\n  font-size: 14px;\n  display: block;\n  border-radius: 2px;\n  overflow: hidden;\n}\n.index-module_templateCard__1S0F4 .index-module_demo__1SorJ {\n  padding: 12px;\n  background: #30303d;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 150px;\n}\n.index-module_templateCard__1S0F4 .index-module_demo__1SorJ .index-module_img__NuOV9 {\n  width: 100%;\n  height: 100%;\n  background-position: top center;\n  background-size: 100% auto;\n  background-repeat: no-repeat;\n  background-color: #fff;\n}\n.index-module_templateCard__1S0F4 .index-module_demo__1SorJ .index-module_defaultImg__16U5p {\n  width: 100%;\n  height: 100%;\n  background-position: center center;\n  background-repeat: no-repeat;\n}\n.index-module_templateCard__1S0F4 .index-module_demo__1SorJ .index-module_addProject__2MGLz {\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.65);\n  position: absolute;\n  left: 0;\n  top: 0;\n  opacity: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  transition: all ease-in-out 0.3s;\n}\n.index-module_templateCard__1S0F4 .index-module_demo__1SorJ .index-module_addProject__2MGLz .index-module_previewBtn__1Wgo1 {\n  margin-top: 8px;\n}\n.index-module_templateCard__1S0F4 .index-module_demo__1SorJ .index-module_addProject__2MGLz .index-module_previewBtn__1Wgo1,\n.index-module_templateCard__1S0F4 .index-module_demo__1SorJ .index-module_addProject__2MGLz .index-module_addBtn__3NxRn {\n  width: 102px;\n}\n.index-module_templateCard__1S0F4 .index-module_demo__1SorJ .index-module_addProject__2MGLz .index-module_btnGroup__1DPYv {\n  display: flex;\n  width: 102px;\n}\n.index-module_templateCard__1S0F4 .index-module_demo__1SorJ .index-module_addProject__2MGLz .index-module_btnGroup__1DPYv.index-module_hasPreview__18xm_ .index-module_previewBtn__1Wgo1 {\n  width: 47px;\n}\n.index-module_templateCard__1S0F4 .index-module_demo__1SorJ .index-module_addProject__2MGLz .index-module_btnSep__1H_nF {\n  flex: 1;\n}\n.index-module_templateCard__1S0F4 .index-module_demo__1SorJ .index-module_spin__2cr4I {\n  position: absolute;\n}\n.index-module_templateCard__1S0F4 .index-module_demo__1SorJ:hover .index-module_addProject__2MGLz {\n  opacity: 100;\n}\n.index-module_templateCard__1S0F4 .index-module_content__1PZ-A {\n  font-size: 14px;\n  padding: 8px 12px;\n  background: #30303d;\n  margin-top: 1px;\n}\n.index-module_templateCard__1S0F4 .index-module_content__1PZ-A .index-module_title__3AO2Z {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 180px;\n  font-size: 14px;\n  line-height: 22px;\n  color: rgba(255, 255, 255, 0.85);\n  font-weight: 500;\n}\n.index-module_templateCard__1S0F4 .index-module_content__1PZ-A .index-module_description__R6Hxn {\n  margin-top: 4px;\n  font-size: 12px;\n  color: rgba(255, 255, 255, 0.45);\n  letter-spacing: 0;\n  line-height: 20px;\n  height: 40px;\n  margin-bottom: 0;\n}\n.index-module_templateCard__1S0F4 .index-module_content__1PZ-A .index-module_meats__2PEHX {\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  line-height: 1;\n  margin-top: 16px;\n}\n.index-module_templateCard__1S0F4 .index-module_content__1PZ-A .index-module_meats__2PEHX .index-module_tags__28KUd {\n  color: rgba(255, 255, 255, 0.45);\n  font-size: 12px;\n  line-height: 22px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 160px;\n  height: 20px;\n  overflow: hidden;\n}\n.index-module_templateCard__1S0F4 .index-module_content__1PZ-A .index-module_meats__2PEHX .index-module_tags__28KUd .index-module_tagItem__6yXXH {\n  margin-left: 16px;\n}\n.index-module_templateCard__1S0F4 .index-module_content__1PZ-A .index-module_meats__2PEHX .index-module_tags__28KUd .index-module_tagItem__6yXXH:first-child {\n  margin-left: 0;\n}\n.index-module_templateCard__1S0F4 .index-module_content__1PZ-A .index-module_meats__2PEHX .index-module_tagInCard__2Weul + .index-module_tagInCard__2Weul {\n  margin-left: 12px;\n}\n.index-module_templateCard__1S0F4 .index-module_content__1PZ-A .index-module_meats__2PEHX .index-module_info__9MO2B {\n  font-size: 12px;\n  color: rgba(0, 0, 0, 0.45);\n  white-space: nowrap;\n}\n";
  var styles = {"emptyWrapper":"index-module_emptyWrapper__3JdvZ","tagContainer":"index-module_tagContainer__3_88c","cardContainer":"index-module_cardContainer__1_4Jf","pagination":"index-module_pagination__3GdHs","templateCard":"index-module_templateCard__1S0F4","demo":"index-module_demo__1SorJ","addProject":"index-module_addProject__2MGLz","previewBtn":"index-module_previewBtn__1Wgo1","addBtn":"index-module_addBtn__3NxRn","btnGroup":"index-module_btnGroup__1DPYv","hasPreview":"index-module_hasPreview__18xm_","col":"index-module_col__1CLyM","img":"index-module_img__NuOV9","defaultImg":"index-module_defaultImg__16U5p","btnSep":"index-module_btnSep__1H_nF","spin":"index-module_spin__2cr4I","content":"index-module_content__1PZ-A","title":"index-module_title__3AO2Z","description":"index-module_description__R6Hxn","meats":"index-module_meats__2PEHX","tags":"index-module_tags__28KUd","tagItem":"index-module_tagItem__6yXXH","tagInCard":"index-module_tagInCard__2Weul","info":"index-module_info__9MO2B"};
  styleInject(css);

  var HighlightedText = function HighlightedText(_ref) {
    var _ref$text = _ref.text,
        text = _ref$text === void 0 ? '' : _ref$text,
        _ref$highlight = _ref.highlight,
        highlight = _ref$highlight === void 0 ? '' : _ref$highlight;

    if (!text || !highlight) {
      return text;
    }

    var parts = text.split(new RegExp("(".concat(highlight, ")"), 'gi'));
    return React__default.createElement(React__default.Fragment, null, parts.map(function (part, i) {
      return React__default.createElement("span", {
        key: i,
        style: part.toLowerCase() === highlight.toLowerCase() ? {
          fontWeight: 'bold',
          color: '#2688F9'
        } : {}
      }, part);
    }));
  };

  var getInsertPosition = (function (api) {
    window.parent.postMessage(JSON.stringify({
      action: 'umi.ui.enable.GUmiUIFlag'
    }), '*');
    window.parent.postMessage(JSON.stringify({
      action: 'umi.ui.checkValidEditSection'
    }), '*');
    return new Promise(function (resolve, reject) {
      var messageHandler = function messageHandler(e) {
        // console.log('[Block] Received message', e.data);
        try {
          var _JSON$parse = JSON.parse(e.data),
              action = _JSON$parse.action,
              payload = _JSON$parse.payload;

          if (action === 'umi.ui.block.addBlock') {
            var position = payload;
            window.removeEventListener('message', messageHandler);
            api.showMini();
            resolve(position);
            window.parent.postMessage(JSON.stringify({
              action: 'umi.ui.disableBlockEditMode'
            }), '*');
          } else if (action === 'umi.ui.checkValidEditSection.success') {
            if (payload.haveValid) {
              api.hideMini();
              window.parent.postMessage(JSON.stringify({
                action: 'umi.ui.enableBlockEditMode'
              }), '*');
              window.parent.postMessage(JSON.stringify({
                action: 'umi.ui.changeEdit',
                payload: {
                  'zh-CN': '取消编辑',
                  'en-US': 'Cancel Edit'
                }
              }), '*');
            } else {
              reject(new Error('Can not find insert position'));
            }
          }
        } catch (error) {
          console.error('[Block] parse message error', error);
        }
      };

      window.addEventListener('message', messageHandler);
    });
  });

  var DEFAULT_IMG = 'https://gw.alipayobjects.com/mdn/rms_4f0d74/afts/img/A*I0RVS41yx2sAAAAAAAAAAABkARQnAQ';

  var ImageLoad = function ImageLoad(_ref) {
    var src = _ref.src;

    var _useState = React.useState(DEFAULT_IMG),
        _useState2 = _slicedToArray(_useState, 2),
        imgSrc = _useState2[0],
        setSrc = _useState2[1];

    React.useEffect(function () {
      var img = new Image();
      img.src = imgSrc;

      img.onload = function () {
        setSrc(src);
      };
    }, [src]);
    return React__default.createElement("div", {
      className: imgSrc === DEFAULT_IMG ? styles.defaultImg : styles.img,
      style: {
        backgroundImage: "url(".concat(imgSrc, ")")
      }
    });
  };

  var ImagePreview = (function (props) {
    var _useContext = React.useContext(UIApiContext),
        api = _useContext.api;

    var intl = api.intl;
    var cls = props.cls,
        img = props.img;

    var _useState = React.useState(false),
        _useState2 = _slicedToArray(_useState, 2),
        visible = _useState2[0],
        setVisible = _useState2[1];

    return React__default.createElement(React__default.Fragment, null, React__default.createElement(antd.Tooltip, {
      title: intl({
        id: 'org.umi.ui.blocks.list.preview.image'
      }),
      placement: "bottom"
    }, React__default.createElement(antd.Button, {
      className: cls,
      onClick: function onClick() {
        setVisible(true);
      }
    }, React__default.createElement(EyeOutlined$2, null))), React__default.createElement(antd.Modal, {
      title: intl({
        id: 'org.umi.ui.blocks.list.preview.image'
      }),
      closable: true,
      visible: visible,
      destroyOnClose: true,
      centered: true,
      width: "80vw",
      bodyStyle: {
        overflow: 'auto'
      },
      footer: null,
      onCancel: function onCancel() {
        setVisible(false);
      },
      onOk: function onOk() {
        setVisible(false);
      }
    }, React__default.createElement("div", {
      style: {
        width: '100%',
        overflow: 'auto'
      }
    }, React__default.createElement("img", {
      style: {
        width: '100%'
      },
      src: img
    }))));
  });

  /**
   * 子区块 的 tag
   * @param
   */

  var Meats = function Meats(_ref) {
    var item = _ref.item,
        keyword = _ref.keyword;
    return React__default.createElement("div", {
      className: styles.meats
    }, React__default.createElement("span", {
      className: styles.tags
    }, item.tags && item.tags.map(function (tag) {
      return React__default.createElement("span", {
        key: tag,
        className: styles.tagInCard
      }, React__default.createElement(HighlightedText, {
        text: tag,
        highlight: keyword
      }));
    })));
  };
  /**
   * 将绝对路径转化为相对路径
   * @param api
   * @param filenamePath
   */

  var getPathFromFilename = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(api, filenamePath) {
      var _yield$api$callRemote, data;

      return regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              _context.next = 2;
              return api.callRemote({
                type: 'org.umi.block.getRelativePagesPath',
                payload: {
                  path: filenamePath
                }
              });

            case 2:
              _yield$api$callRemote = _context.sent;
              data = _yield$api$callRemote.data;
              return _context.abrupt("return", data.replace(/(index)?((\.js?)|(\.tsx?)|(\.jsx?))$/, ''));

            case 5:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));

    return function getPathFromFilename(_x, _x2) {
      return _ref2.apply(this, arguments);
    };
  }();
  /**
   * 打开 modal 框之前的一些处理
   * @param api  umi ui 的 api 全局对象
   * @param param 参数
   */

  var onBeforeOpenModal = /*#__PURE__*/function () {
    var _ref4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(api, _ref3) {
      var item, type, onShowModal, position, targetPath, option;
      return regeneratorRuntime.wrap(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
              item = _ref3.item, type = _ref3.type, onShowModal = _ref3.onShowModal;
              _context2.prev = 1;
              _context2.next = 4;
              return api.callRemote({
                type: 'org.umi.block.checkIfCanAdd',
                payload: {
                  item: item,
                  type: type
                }
              });

            case 4:
              _context2.next = 10;
              break;

            case 6:
              _context2.prev = 6;
              _context2.t0 = _context2["catch"](1);
              antd.message.error(_context2.t0.message);
              return _context2.abrupt("return");

            case 10:
              if (!(api.isMini() && type === 'block')) {
                _context2.next = 20;
                break;
              }

              _context2.next = 13;
              return getInsertPosition(api).catch(function (e) {
                antd.message.error(e.message);
              });

            case 13:
              position = _context2.sent;
              _context2.next = 16;
              return getPathFromFilename(api, position.filename);

            case 16:
              targetPath = _context2.sent;
              option = {
                path: targetPath,
                index: position.index,
                blockTarget: targetPath
              };
              onShowModal(item, option);
              return _context2.abrupt("return");

            case 20:
              onShowModal(item, {});

            case 21:
            case "end":
              return _context2.stop();
          }
        }
      }, _callee2, null, [[1, 6]]);
    }));

    return function onBeforeOpenModal(_x3, _x4) {
      return _ref4.apply(this, arguments);
    };
  }();

  var ToolTipAddButton = function ToolTipAddButton(_ref5) {
    var disabledTitle = _ref5.disabledTitle,
        disabled = _ref5.disabled,
        children = _ref5.children,
        reset = _objectWithoutProperties(_ref5, ["disabledTitle", "disabled", "children"]);

    if (disabled) {
      return React__default.createElement(antd.Tooltip, {
        title: disabledTitle
      }, React__default.createElement(antd.Button, Object.assign({
        className: styles.addBtn,
        type: "primary",
        disabled: disabled
      }, reset), children));
    }

    return React__default.createElement(antd.Button, Object.assign({
      className: styles.addBtn,
      type: "primary",
      disabled: disabled
    }, reset), children);
  };

  var BlockItem = function BlockItem(_ref6) {
    var type = _ref6.type,
        item = _ref6.item,
        _ref6$loading = _ref6.loading,
        loading = _ref6$loading === void 0 ? false : _ref6$loading,
        disabled = _ref6.disabled,
        onShowModal = _ref6.onShowModal,
        keyword = _ref6.keyword,
        selectedTag = _ref6.selectedTag;

    var _useContext = React.useContext(UIApiContext),
        api = _useContext.api;

    var intl = api.intl;
    var isMini = api.isMini();
    return React__default.createElement(antd.Col, {
      className: styles.col,
      key: item.url
    }, React__default.createElement("div", {
      id: item.url,
      className: styles.templateCard,
      onClick: function onClick() {
        if (loading) {
          onShowModal(item, {});
        }
      }
    }, React__default.createElement(antd.Spin, {
      spinning: loading,
      tip: "\u6DFB\u52A0\u4E2D..."
    }, React__default.createElement("div", {
      className: styles.demo
    }, React__default.createElement("div", {
      className: styles.addProject
    }, React__default.createElement(ToolTipAddButton, {
      type: "primary",
      disabled: disabled,
      disabledTitle: intl({
        id: 'org.umi.ui.blocks.adder.disabledTitle'
      }),
      onClick: function onClick() {
        return onBeforeOpenModal(api, {
          type: type,
          item: item,
          onShowModal: onShowModal
        });
      }
    }, loading ? intl({
      id: 'org.umi.ui.blocks.list.viewlog'
    }) : intl({
      id: 'org.umi.ui.blocks.list.add'
    })), React__default.createElement("div", {
      className: "".concat(styles.btnGroup, " ").concat(item.previewUrl ? styles.hasPreview : '')
    }, React__default.createElement(ImagePreview, {
      img: item.img,
      cls: styles.previewBtn
    }), React__default.createElement("div", {
      className: styles.btnSep
    }), item.previewUrl && React__default.createElement(antd.Tooltip, {
      title: intl({
        id: 'org.umi.ui.blocks.list.preview.demo'
      }),
      placement: "bottom"
    }, React__default.createElement(antd.Button, {
      className: styles.previewBtn,
      target: "_blank",
      href: item.previewUrl
    }, React__default.createElement(ExportOutlined$2, null))))), React__default.createElement(ImageLoad, {
      src: item.img
    }))), React__default.createElement("div", {
      className: styles.content
    }, React__default.createElement("div", {
      className: styles.title
    }, React__default.createElement(HighlightedText, {
      text: item.name,
      highlight: keyword
    })), item.description && !isMini && React__default.createElement(antd.Typography.Paragraph, {
      className: styles.description,
      ellipsis: {
        rows: 2,
        expandable: false
      }
    }, React__default.createElement(HighlightedText, {
      text: item.description,
      highlight: keyword
    })), !isMini && selectedTag === '' && React__default.createElement(Meats, {
      item: item,
      keyword: keyword
    }))));
  };

  var BlockList = function BlockList(props) {
    var _props$list = props.list,
        list = _props$list === void 0 ? [] : _props$list,
        setSelectedTag = props.setSelectedTag,
        selectedTag = props.selectedTag,
        addingBlock = props.addingBlock,
        keyword = props.keyword,
        loading = props.loading;

    var _useContext = React.useContext(UIApiContext),
        api = _useContext.api;

    var intl = api.intl;
    var isMini = api.isMini();
    var pageSize = isMini ? 6 : 8;

    var _useState = React.useState(1),
        _useState2 = _slicedToArray(_useState, 2),
        currentPage = _useState2[0],
        setCurrentPage = _useState2[1];

    React.useEffect(function () {
      setSelectedTag('');
      setCurrentPage(1);
    }, [list]);
    React.useEffect(function () {
      setCurrentPage(1);
    }, [selectedTag]);
    /**
     * 筛选区块列表
     */

    var filteredList = React.useMemo(function () {
      return list.filter(function (_ref) {
        var _ref$name = _ref.name,
            name = _ref$name === void 0 ? '' : _ref$name,
            url = _ref.url,
            _ref$description = _ref.description,
            description = _ref$description === void 0 ? '' : _ref$description,
            category = _ref.category,
            _ref$tags = _ref.tags,
            listTags = _ref$tags === void 0 ? [] : _ref$tags;
        return (!selectedTag || (category ? category === selectedTag : listTags.join('').includes(selectedTag))) && (!keyword || name.toLocaleLowerCase().includes(keyword) || description.toLocaleLowerCase().includes(keyword) || url.toLocaleLowerCase().includes(keyword));
      });
    }, [keyword, selectedTag, list.map(function (_ref2) {
      var url = _ref2.url;
      return url;
    }).join('/')]);
    /**
     * 当前的列表项目，区块分页就是在这里做
     */

    var currentPageList = React.useMemo(function () {
      return filteredList.slice((currentPage - 1) * pageSize, currentPage * pageSize > filteredList.length ? filteredList.length : currentPage * pageSize);
    }, [filteredList, currentPage]);
    /**
     * 是不是数据为空
     */

    var isEmpty = !currentPageList || currentPageList.length === 0;
    var contents;

    if (loading) {
      contents = React__default.createElement("div", {
        className: styles.emptyWrapper
      }, React__default.createElement(antd.Spin, {
        size: "large"
      }));
    } else if (isEmpty) {
      // 切换为黑色背景图片
      contents = React__default.createElement("div", {
        className: styles.emptyWrapper
      }, React__default.createElement(antd.Empty, {
        imageStyle: {
          width: 64,
          height: 41,
          margin: '8px auto'
        },
        image: "https://gw.alipayobjects.com/mdn/rms_4f0d74/afts/img/A*LinHSLLEHUAAAAAAAAAAAABkARQnAQ",
        description: keyword ? intl({
          id: 'org.umi.ui.blocks.list.nofound'
        }) : intl({
          id: 'org.umi.ui.blocks.list.nodata'
        })
      }));
    } else {
      contents = React__default.createElement("div", {
        style: {
          display: 'flex',
          height: '100%',
          flexDirection: 'column'
        }
      }, React__default.createElement(antd.Row, {
        gutter: [20, 20],
        type: "flex"
      }, currentPageList.map(function (item) {
        return React__default.createElement(BlockItem, Object.assign({
          key: item.url,
          item: item
        }, props, {
          loading: addingBlock && item.url === addingBlock.url,
          disabled: addingBlock && addingBlock.url && item.url !== addingBlock.url,
          selectedTag: selectedTag
        }));
      })), filteredList.length > pageSize && React__default.createElement(antd.Row, {
        className: styles.pagination,
        type: "flex",
        justify: "end"
      }, React__default.createElement(antd.Pagination, {
        size: isMini ? 'small' : undefined,
        current: currentPage,
        onChange: setCurrentPage,
        total: filteredList.length,
        pageSize: pageSize
      })));
    }

    return React__default.createElement("div", {
      className: styles.cardContainer
    }, contents);
  };

  var css$1 = ".GlobalSearch-module_search__2NS8S {\n  width: 266px;\n}\n.GlobalSearch-module_search__2NS8S > input {\n  background-color: #17171f;\n}\n.isMini .GlobalSearch-module_search__2NS8S > input {\n  height: 24px;\n}\n";
  var styles$1 = {"search":"GlobalSearch-module_search__2NS8S"};
  styleInject(css$1);

  var GlobalSearch = function GlobalSearch(props) {
    var onChange = props.onChange,
        api = props.api;
    var intl = api.intl,
        hooks = api.hooks,
        _ = api._;
    var debounceFn = _.debounce; // compatible with prev version umi ui

    if (hooks === null || hooks === void 0 ? void 0 : hooks.useDebounceFn) {
      debounceFn = hooks.useDebounceFn;
    } // 时间太长会造成卡顿的感觉，200-300 比较合适


    var handleChange = debounceFn(function (value) {
      onChange(value);
    }, 300);
    var handleChangeDebounce = (handleChange === null || handleChange === void 0 ? void 0 : handleChange.run) || handleChange;
    return React__default.createElement(antd.Input, {
      prefix: React__default.createElement(SearchOutlined$2, null),
      className: styles$1.search,
      allowClear: true,
      onChange: function onChange(e) {
        return handleChangeDebounce(e.target.value);
      },
      placeholder: intl({
        id: 'org.umi.ui.blocks.content.search_block'
      })
    });
  };

  var useCallData = function useCallData(getData, effects, options) {
    var _useState = React.useState(options.defaultData),
        _useState2 = _slicedToArray(_useState, 2),
        list = _useState2[0],
        setList = _useState2[1];

    var _useState3 = React.useState(true),
        _useState4 = _slicedToArray(_useState3, 2),
        loading = _useState4[0],
        setLoading = _useState4[1];

    var _useState5 = React.useState(1),
        _useState6 = _slicedToArray(_useState5, 2),
        pageIndex = _useState6[0],
        setPageIndex = _useState6[1];

    var _useState7 = React.useState(false),
        _useState8 = _slicedToArray(_useState7, 2),
        hasMore = _useState8[0],
        setHasMore = _useState8[1];

    var _ref = options || {},
        _ref$manual = _ref.manual,
        manual = _ref$manual === void 0 ? false : _ref$manual;

    var _ref2 = options && options.fetchMore ? options.fetchMore : {},
        _ref2$pageSize = _ref2.pageSize,
        pageSize = _ref2$pageSize === void 0 ? 20 : _ref2$pageSize;

    var fetchList = /*#__PURE__*/function () {
      var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(isAppend) {
        var _yield$getData, data, success, message, newList, totalCount;

        return regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                setLoading(true);
                _context.next = 3;
                return getData({
                  pageIndex: pageIndex,
                  pageSize: pageSize
                });

              case 3:
                _yield$getData = _context.sent;
                data = _yield$getData.data;
                success = _yield$getData.success;
                message = _yield$getData.message;

                if (success !== false) {
                  if (isAppend && list) {
                    newList = _objectSpread2({}, data);
                    Object.keys(data || {}).forEach(function (key) {
                      // 自动合并返回中的数组
                      if (Array.isArray(data[key]) && list[key]) {
                        newList[key] = list[key].concat(data[key]);
                      }
                    });
                    setList(newList);
                  } else {
                    setList(data);
                  } // 判断是否还有更多


                  totalCount = 0;
                  Object.keys(data || {}).forEach(function (key) {
                    // 后端返回的总数的字段都是类似 totalOrderCount 这样格式的
                    if (/total\S+Count/.test(key) && typeof data[key] === 'number') {
                      totalCount = data[key];
                    }
                  });

                  if (totalCount > pageSize * pageIndex) {
                    // 还可以翻页
                    setHasMore(true);
                  } else {
                    setHasMore(false);
                  }
                } else {
                  antd.message.error(message);
                }

                setLoading(false);

              case 9:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }));

      return function fetchList(_x) {
        return _ref3.apply(this, arguments);
      };
    }();

    var fetchMore = function fetchMore() {
      setPageIndex(pageIndex + 1);
      fetchList(true);
    };

    React.useEffect(function () {
      if (manual === false) {
        fetchList();
      }
    }, effects || []);
    return {
      data: list,
      loading: loading,
      fetch: fetchList,
      fetchMore: fetchMore,
      hasMore: hasMore,
      setList: setList
    };
  };

  var css$2 = ".BlocksViewer-module_container__2hb0e {\n  padding: 24px;\n  height: 100%;\n  overflow: auto;\n}\n.BlocksViewer-module_container__2hb0e.BlocksViewer-module_min__3qbtJ {\n  padding: 20px;\n}\n.BlocksViewer-module_loading__2v_E4 {\n  text-align: center;\n  margin-top: 200px;\n}\n.BlocksViewer-module_blockList__5HIzE h3 {\n  display: inline-block;\n}\n.BlocksViewer-module_tabs__2zrvj .ant-tabs-bar {\n  border: 0;\n  margin-bottom: 24px;\n}\n.BlocksViewer-module_tabs__2zrvj .ant-tabs-tab {\n  padding: 4px 8px;\n}\n.BlocksViewer-module_block__2kCYr {\n  cursor: pointer;\n  float: left;\n  margin-right: 20px;\n  margin-bottom: 20px;\n  width: 140px;\n  height: 140px;\n  border: 1px solid #ccc;\n  overflow: hidden;\n  text-align: center;\n  position: relative;\n  background: #fff;\n  border-radius: 5px;\n}\n.BlocksViewer-module_spin__2OKvc {\n  position: absolute;\n  left: 0;\n  top: 50px;\n  width: 140px;\n}\n.BlocksViewer-module_block__2kCYr:hover {\n  border: 1px solid #1c92ff;\n  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);\n}\n.BlocksViewer-module_blockTitle__-GJZr {\n  font-size: 16px;\n  margin-bottom: 20px;\n}\n.ant-select-tree-indent {\n  white-space: pre;\n}\n.BlocksViewer-module_wrapper__28x_6 {\n  display: flex;\n  height: 100%;\n  overflow: auto;\n}\n.BlocksViewer-module_wrapper__28x_6 .BlocksViewer-module_side__1f0js {\n  width: 256px;\n  display: flex;\n  flex-direction: column;\n  border-right: 1px solid #000;\n}\n@media screen and (max-width: 768px) {\n  .BlocksViewer-module_wrapper__28x_6 .BlocksViewer-module_side__1f0js {\n    width: 212px;\n  }\n}\n.BlocksViewer-module_wrapper__28x_6 .BlocksViewer-module_main__3TcA2 {\n  flex: 1;\n}\n";
  var styles$2 = {"container":"BlocksViewer-module_container__2hb0e","min":"BlocksViewer-module_min__3qbtJ","loading":"BlocksViewer-module_loading__2v_E4","blockList":"BlocksViewer-module_blockList__5HIzE","tabs":"BlocksViewer-module_tabs__2zrvj","block":"BlocksViewer-module_block__2kCYr","spin":"BlocksViewer-module_spin__2OKvc","blockTitle":"BlocksViewer-module_blockTitle__-GJZr","wrapper":"BlocksViewer-module_wrapper__28x_6","side":"BlocksViewer-module_side__1f0js","main":"BlocksViewer-module_main__3TcA2"};
  styleInject(css$2);

  function preserveCamelCase(str) {
  	let isLastCharLower = false;
  	let isLastCharUpper = false;
  	let isLastLastCharUpper = false;

  	for (let i = 0; i < str.length; i++) {
  		const c = str[i];

  		if (isLastCharLower && /[a-zA-Z]/.test(c) && c.toUpperCase() === c) {
  			str = str.substr(0, i) + '-' + str.substr(i);
  			isLastCharLower = false;
  			isLastLastCharUpper = isLastCharUpper;
  			isLastCharUpper = true;
  			i++;
  		} else if (isLastCharUpper && isLastLastCharUpper && /[a-zA-Z]/.test(c) && c.toLowerCase() === c) {
  			str = str.substr(0, i - 1) + '-' + str.substr(i - 1);
  			isLastLastCharUpper = isLastCharUpper;
  			isLastCharUpper = false;
  			isLastCharLower = true;
  		} else {
  			isLastCharLower = c.toLowerCase() === c;
  			isLastLastCharUpper = isLastCharUpper;
  			isLastCharUpper = c.toUpperCase() === c;
  		}
  	}

  	return str;
  }

  var camelcase = function (str) {
  	if (arguments.length > 1) {
  		str = Array.from(arguments)
  			.map(x => x.trim())
  			.filter(x => x.length)
  			.join('-');
  	} else {
  		str = str.trim();
  	}

  	if (str.length === 0) {
  		return '';
  	}

  	if (str.length === 1) {
  		return str.toLowerCase();
  	}

  	if (/^[a-z0-9]+$/.test(str)) {
  		return str;
  	}

  	const hasUpperCase = str !== str.toLowerCase();

  	if (hasUpperCase) {
  		str = preserveCamelCase(str);
  	}

  	return str
  		.replace(/^[_.\- ]+/, '')
  		.toLowerCase()
  		.replace(/[_.\- ]+(\w|$)/g, (m, p1) => p1.toUpperCase());
  };

  var uppercamelcase = function () {
  	const cased = camelcase.apply(camelcase, arguments);
  	return cased.charAt(0).toUpperCase() + cased.slice(1);
  };

  var LogPanel = function LogPanel(_ref) {
    var loading = _ref.loading;

    var _useContext = React.useContext(UIApiContext),
        api = _useContext.api;

    var _useState = React.useState([]),
        _useState2 = _slicedToArray(_useState, 2),
        logs = _useState2[0],
        setLogs = _useState2[1];

    var _useState3 = React.useState(null),
        _useState4 = _slicedToArray(_useState3, 2),
        terminalRef = _useState4[0],
        setTerminalRef = _useState4[1];

    var Terminal = api.Terminal;
    React.useEffect(function () {
      if (!terminalRef) {
        return;
      }
      /**
       * 获取上次安装的日志
       * 安装完成会清空
       */


      api.callRemote({
        type: 'org.umi.block.get-adding-blocks-log'
      }).then(function (_ref2) {
        var data = _ref2.data;

        if (terminalRef) {
          terminalRef.write(data.replace(/\n/g, '\r\n'));
        }
      });
      var tempLogs = [];
      /**
       *监听日志，每次会 push 一条
       */

      api.listenRemote({
        type: 'org.umi.block.add-blocks-log',
        onMessage: function onMessage(_ref3) {
          var data = _ref3.data;
          tempLogs.push(data);

          if (terminalRef) {
            terminalRef.write(data.replace(/\n/g, '\r\n'));
          }

          setLogs([].concat(tempLogs));
        }
      });
    }, [terminalRef]);

    if (!Terminal) {
      return null;
    }

    return React__default.createElement(Terminal, {
      title: loading ? React__default.createElement(LoadingOutlined$2, null) : ' ',
      defaultValue: logs.join(''),
      onInit: function onInit(terminal) {
        setTerminalRef(terminal);
      },
      config: api.isMini() ? {
        fontSize: 12
      } : {}
    });
  };

  var css$3 = ".ResultPanel-module_result__8O86n {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ResultPanel-module_result__8O86n .ant-result-icon > .anticon {\n  font-size: 56px;\n}\n.ResultPanel-module_result__8O86n .ant-result-title {\n  font-size: 16px;\n}\n.ResultPanel-module_result__8O86n .ant-result-subtitle {\n  font-size: 14px;\n}\n.ResultPanel-module_result__8O86n .ant-result-extra {\n  margin-top: 40px;\n}\n";
  var styles$3 = {"result":"ResultPanel-module_result__8O86n"};
  styleInject(css$3);

  var ResultPanel = (function (_ref) {
    var name = _ref.name,
        onFinish = _ref.onFinish;

    var _useContext = React.useContext(UIApiContext),
        api = _useContext.api;

    var intl = api.intl; // const [alive, setAlive] = useState<boolean>(false);
    // const isMini = api.isMini();
    // useEffect(() => {
    //   (async () => {
    //     const msg = (await api.callRemote({
    //       type: 'tasks/is_dev_server_alive',
    //     })) as {
    //       alive: boolean;
    //     };
    //     setAlive(msg.alive);
    //   })();
    // }, []);

    return React__default.createElement("div", {
      className: styles$3.result
    }, React__default.createElement(antd.Result, {
      status: "success",
      title: "".concat(name, " ").concat(intl({
        id: 'org.umi.ui.blocks.adder.result.success'
      })),
      subTitle: intl({
        id: 'org.umi.ui.blocks.adder.result.subTitle'
      }),
      extra: React__default.createElement(antd.Button, {
        type: "primary",
        key: "preview",
        onClick: function onClick() {
          return onFinish();
        }
      }, intl({
        id: 'org.umi.ui.blocks.adder.result.done'
      }))
    }));
  });

  var InputGroup = antd.Input.Group;

  var CustomTreeSelect = function CustomTreeSelect(props) {
    var _props$value = props.value,
        value = _props$value === void 0 ? '' : _props$value,
        propOnChange = props.onChange,
        onlySelectLeaf = props.onlySelectLeaf,
        restProps = _objectWithoutProperties(props, ["value", "onChange", "onlySelectLeaf"]);

    var ref = React.useRef();

    var _onChange = function onChange(path, fileName) {
      propOnChange("".concat(path, "/").concat(fileName).replace(/\/\//g, '/'));
    };

    var fileArray = value.split('/');
    var name = fileArray.pop();
    var filePath = fileArray.join('/') || '/';
    var realValue = onlySelectLeaf ? value : filePath;
    var selectDom = React__default.createElement(antd.TreeSelect, Object.assign({
      showSearch: true,
      style: {
        width: onlySelectLeaf ? '100%' : '30%'
      },
      dropdownStyle: {
        backgroundColor: '#23232e'
      },
      labelInValue: true,
      dropdownMatchSelectWidth: onlySelectLeaf ? undefined : 400,
      value: {
        value: realValue
      },
      // 不加这个不会跟着进度条走
      getPopupContainer: function getPopupContainer() {
        return ref.current || document.body;
      },
      onSelect: function onSelect(_, node) {
        if (onlySelectLeaf) {
          propOnChange(node.value);
          return;
        }

        if (_onChange) {
          _onChange(node.value, name);
        }
      }
    }, restProps));
    return React__default.createElement("div", {
      ref: ref,
      style: {
        position: 'relative'
      }
    }, onlySelectLeaf ? selectDom : React__default.createElement(InputGroup, {
      compact: true
    }, selectDom, React__default.createElement(antd.Input, {
      style: {
        width: '70%'
      },
      value: name,
      onChange: function onChange(e) {
        _onChange(filePath, e.target.value);
      }
    })));
  };

  var RoutePathTree = function RoutePathTree(props) {
    var visible = props.visible,
        resetProps = _objectWithoutProperties(props, ["visible"]);

    var _useContext = React.useContext(UIApiContext),
        api = _useContext.api;
    /**
     * 这两个在 visible 的时候回重新加载一下
     */


    var _useCallData = useCallData( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
      return regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              if (!visible) {
                _context.next = 2;
                break;
              }

              return _context.abrupt("return", api.callRemote({
                type: 'org.umi.block.routes'
              }));

            case 2:
              return _context.abrupt("return", routePathTreeData);

            case 3:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    })), [visible], {
      defaultData: []
    }),
        routePathTreeData = _useCallData.data;

    return React__default.createElement(CustomTreeSelect, Object.assign({
      treeData: routePathTreeData
    }, resetProps));
  };

  var RoutePathTree$1 = function RoutePathTree(props) {
    var _useContext = React.useContext(UIApiContext),
        api = _useContext.api;

    var visible = props.visible,
        restProps = _objectWithoutProperties(props, ["visible"]);
    /**
     * 这两个在 visible 的时候回重新加载一下
     */


    var _useCallData = useCallData( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
      return regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              if (!visible) {
                _context.next = 2;
                break;
              }

              return _context.abrupt("return", api.callRemote({
                type: 'org.umi.block.pageFolders'
              }));

            case 2:
              return _context.abrupt("return", pageFoldersTreeData);

            case 3:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    })), [visible], {
      defaultData: []
    }),
        pageFoldersTreeData = _useCallData.data;

    return React__default.createElement(CustomTreeSelect, Object.assign({
      treeData: pageFoldersTreeData
    }, restProps));
  };

  var InfoToolTip = function InfoToolTip(_ref) {
    var title = _ref.title,
        placeholder = _ref.placeholder;
    return React__default.createElement(antd.Tooltip, {
      title: placeholder
    }, React__default.createElement("div", {
      style: {
        display: 'flex',
        alignItems: 'center'
      }
    }, title, React__default.createElement(QuestionCircleOutlined$2, {
      style: {
        marginLeft: 8
      }
    })));
  };

  var AddBlockForm = function AddBlockForm(_ref) {
    var visible = _ref.visible;

    var _useContext = React.useContext(UIApiContext),
        api = _useContext.api;

    var intl = api.intl;
    return React__default.createElement(React__default.Fragment, null, React__default.createElement(antd.Form.Item, {
      name: "routePath",
      label: React__default.createElement(InfoToolTip, {
        title: intl({
          id: 'org.umi.ui.blocks.adder.routePath'
        }),
        placeholder: intl({
          id: 'org.umi.ui.blocks.adder.routePath.placeholder'
        })
      }),
      rules: [{
        required: true,
        message: intl({
          id: 'org.umi.ui.blocks.adder.routePath.required'
        })
      }, {
        validator: function () {
          var _validator = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(rule, value) {
            var _yield$api$callRemote, exists;

            return regeneratorRuntime.wrap(function _callee$(_context) {
              while (1) {
                switch (_context.prev = _context.next) {
                  case 0:
                    if (!(value === '/')) {
                      _context.next = 2;
                      break;
                    }

                    return _context.abrupt("return");

                  case 2:
                    _context.next = 4;
                    return api.callRemote({
                      type: 'org.umi.block.checkExistRoute',
                      payload: {
                        path: value.toLowerCase()
                      }
                    });

                  case 4:
                    _yield$api$callRemote = _context.sent;
                    exists = _yield$api$callRemote.exists;

                    if (!exists) {
                      _context.next = 8;
                      break;
                    }

                    throw new Error(intl({
                      id: 'org.umi.ui.blocks.adder.routePath.exist'
                    }));

                  case 8:
                  case "end":
                    return _context.stop();
                }
              }
            }, _callee);
          }));

          function validator(_x, _x2) {
            return _validator.apply(this, arguments);
          }

          return validator;
        }()
      }]
    }, React__default.createElement(RoutePathTree, {
      visible: visible
    })), React__default.createElement(antd.Form.Item, {
      name: "path",
      label: React__default.createElement(InfoToolTip, {
        title: intl({
          id: 'org.umi.ui.blocks.adder.templatePath'
        }),
        placeholder: intl({
          id: 'org.umi.ui.blocks.adder.templatePath.tooltip'
        })
      }),
      rules: [{
        required: true,
        message: intl({
          id: 'org.umi.ui.blocks.adder.templatePath.required'
        })
      }, {
        validator: function () {
          var _validator2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(rule, filePath) {
            var _yield$api$callRemote2, exists;

            return regeneratorRuntime.wrap(function _callee2$(_context2) {
              while (1) {
                switch (_context2.prev = _context2.next) {
                  case 0:
                    if (!(filePath === '/')) {
                      _context2.next = 2;
                      break;
                    }

                    throw new Error(intl({
                      id: 'org.umi.ui.blocks.adder.templatePath.root'
                    }));

                  case 2:
                    _context2.next = 4;
                    return api.callRemote({
                      type: 'org.umi.block.checkExistFilePath',
                      payload: {
                        path: filePath
                      }
                    });

                  case 4:
                    _yield$api$callRemote2 = _context2.sent;
                    exists = _yield$api$callRemote2.exists;

                    if (!exists) {
                      _context2.next = 8;
                      break;
                    }

                    throw new Error(intl({
                      id: 'org.umi.ui.blocks.adder.templatePath.exist'
                    }));

                  case 8:
                  case "end":
                    return _context2.stop();
                }
              }
            }, _callee2);
          }));

          function validator(_x3, _x4) {
            return _validator2.apply(this, arguments);
          }

          return validator;
        }()
      }]
    }, React__default.createElement(RoutePathTree$1, {
      visible: visible
    })));
  };

  var PathLabel = function PathLabel(_ref) {
    var value = _ref.value,
        name = _ref.name;
    return React__default.createElement("div", {
      style: {
        display: 'flex',
        marginBottom: 24
      }
    }, "\u533A\u5757\u5C06\u88AB\u5B89\u88C5\u5230", React__default.createElement("code", {
      style: {
        backgroundColor: '#3b3b4d',
        margin: '0 8px',
        padding: '0 8px',
        borderRadius: 4
      }
    }, "".concat(value).concat(name ? "/".concat(name) : '').replace(/\//g, '/').replace(/\/\//g, '/')));
  };

  var AddBlockFormForUI = function AddBlockFormForUI(_ref2) {
    var blockTarget = _ref2.blockTarget,
        form = _ref2.form;

    var _useContext = React.useContext(UIApiContext),
        api = _useContext.api;

    var intl = api.intl;

    var _useState = React.useState(form.getFieldValue('name')),
        _useState2 = _slicedToArray(_useState, 2),
        varName = _useState2[0],
        setValueName = _useState2[1];

    return React__default.createElement(React__default.Fragment, null, React__default.createElement(antd.Form.Item, {
      noStyle: true,
      name: "path",
      label: React__default.createElement(InfoToolTip, {
        title: intl({
          id: 'org.umi.ui.blocks.adder.path'
        }),
        placeholder: intl({
          id: 'org.umi.ui.blocks.adder.path.minitooltip'
        })
      }),
      rules: [{
        required: true,
        message: intl({
          id: 'org.umi.ui.blocks.adder.path.rule'
        })
      }]
    }, React__default.createElement(PathLabel, {
      name: varName
    })), React__default.createElement(antd.Form.Item, {
      name: "name",
      label: React__default.createElement(InfoToolTip, {
        title: intl({
          id: 'org.umi.ui.blocks.adder.name'
        }),
        placeholder: intl({
          id: 'org.umi.ui.blocks.adder.name.tooltip'
        })
      }),
      rules: [{
        validator: function () {
          var _validator = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(rule, name) {
            var _yield$api$callRemote, exists, blockFileTarget, _yield$api$callRemote2, varExists;

            return regeneratorRuntime.wrap(function _callee$(_context) {
              while (1) {
                switch (_context.prev = _context.next) {
                  case 0:
                    if (name) {
                      _context.next = 2;
                      break;
                    }

                    throw new Error(intl({
                      id: 'org.umi.ui.blocks.adder.name.required'
                    }));

                  case 2:
                    if (/^[a-zA-Z$_][a-zA-Z\d_]*$/.test(name)) {
                      _context.next = 4;
                      break;
                    }

                    throw new Error(intl({
                      id: 'org.umi.ui.blocks.adder.name.illegal'
                    }));

                  case 4:
                    if (/^(?:[A-Z][a-z\d]+)+$/.test(name)) {
                      _context.next = 6;
                      break;
                    }

                    throw new Error(intl({
                      id: 'org.umi.ui.blocks.adder.name.illegalReact'
                    }));

                  case 6:
                    _context.next = 8;
                    return api.callRemote({
                      type: 'org.umi.block.checkExistFilePath',
                      payload: {
                        path: "".concat(blockTarget, "/").concat(name)
                      }
                    });

                  case 8:
                    _yield$api$callRemote = _context.sent;
                    exists = _yield$api$callRemote.exists;

                    if (!exists) {
                      _context.next = 12;
                      break;
                    }

                    throw new Error(intl({
                      id: 'org.umi.ui.blocks.adder.pathexist'
                    }));

                  case 12:
                    blockFileTarget = form.getFieldValue('path');
                    _context.next = 15;
                    return api.callRemote({
                      type: 'org.umi.block.checkBindingInFile',
                      payload: {
                        path: blockFileTarget,
                        name: name
                      }
                    });

                  case 15:
                    _yield$api$callRemote2 = _context.sent;
                    varExists = _yield$api$callRemote2.exists;

                    if (!varExists) {
                      _context.next = 19;
                      break;
                    }

                    throw new Error(intl({
                      id: 'org.umi.ui.blocks.adder.varexist'
                    }));

                  case 19:
                  case "end":
                    return _context.stop();
                }
              }
            }, _callee);
          }));

          function validator(_x, _x2) {
            return _validator.apply(this, arguments);
          }

          return validator;
        }()
      }]
    }, React__default.createElement(antd.Input, {
      placeholder: intl({
        id: 'org.umi.ui.blocks.adder.name.placeholder'
      }),
      onChange: function onChange(e) {
        setValueName(e.target.value);
      }
    })));
  };

  var RoutePathTree$2 = function RoutePathTree(props) {
    var _useContext = React.useContext(UIApiContext),
        api = _useContext.api;

    var visible = props.visible,
        resetProps = _objectWithoutProperties(props, ["visible"]);
    /**
     * 这两个在 visible 的时候回重新加载一下
     */


    var _useCallData = useCallData( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
      return regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              if (!visible) {
                _context.next = 2;
                break;
              }

              return _context.abrupt("return", api.callRemote({
                type: 'org.umi.block.routeFiles'
              }));

            case 2:
              return _context.abrupt("return", pageFoldersTreeData);

            case 3:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    })), [visible], {
      defaultData: []
    }),
        pageFoldersTreeData = _useCallData.data;

    return React__default.createElement(CustomTreeSelect // index.js -> index
    , Object.assign({
      // index.js -> index
      onlySelectLeaf: true,
      treeData: pageFoldersTreeData
    }, resetProps));
  };

  var AddBlockFormForUI$1 = function AddBlockFormForUI(_ref) {
    var form = _ref.form,
        visible = _ref.visible;

    var _useContext = React.useContext(UIApiContext),
        api = _useContext.api;

    var intl = api.intl;
    return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
      style: {
        display: 'flex',
        marginBottom: 24
      }
    }, intl({
      id: 'org.umi.ui.blocks.adder.minirecommend'
    })), React__default.createElement(antd.Form.Item, {
      name: "path",
      label: React__default.createElement(InfoToolTip, {
        title: intl({
          id: 'org.umi.ui.blocks.adder.path'
        }),
        placeholder: intl({
          id: 'org.umi.ui.blocks.adder.path.tooltip'
        })
      }),
      rules: [{
        required: true,
        message: intl({
          id: 'org.umi.ui.blocks.adder.path.rule'
        })
      }]
    }, React__default.createElement(RoutePathTree$2, {
      visible: visible
    })), React__default.createElement(antd.Form.Item, {
      name: "name",
      label: React__default.createElement(InfoToolTip, {
        title: intl({
          id: 'org.umi.ui.blocks.adder.name'
        }),
        placeholder: intl({
          id: 'org.umi.ui.blocks.adder.name.tooltip'
        })
      }),
      rules: [{
        validator: function () {
          var _validator = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(rule, name) {
            var filePath, _yield$api$callRemote, exists, blockFileTarget, _yield$api$callRemote2, varExists;

            return regeneratorRuntime.wrap(function _callee$(_context) {
              while (1) {
                switch (_context.prev = _context.next) {
                  case 0:
                    if (name) {
                      _context.next = 2;
                      break;
                    }

                    throw new Error(intl({
                      id: 'org.umi.ui.blocks.adder.name.required'
                    }));

                  case 2:
                    if (/^[a-zA-Z$_][a-zA-Z\d_]*$/.test(name)) {
                      _context.next = 4;
                      break;
                    }

                    throw new Error(intl({
                      id: 'org.umi.ui.blocks.adder.name.illegal'
                    }));

                  case 4:
                    if (/^(?:[A-Z][a-z]+)+$/.test(name)) {
                      _context.next = 6;
                      break;
                    }

                    throw new Error(intl({
                      id: 'org.umi.ui.blocks.adder.name.illegalReact'
                    }));

                  case 6:
                    _context.next = 8;
                    return getPathFromFilename(api, form.getFieldValue('path'));

                  case 8:
                    filePath = _context.sent;
                    _context.next = 11;
                    return api.callRemote({
                      type: 'org.umi.block.checkExistFilePath',
                      payload: {
                        path: "".concat(filePath, "/").concat(name)
                      }
                    });

                  case 11:
                    _yield$api$callRemote = _context.sent;
                    exists = _yield$api$callRemote.exists;

                    if (!exists) {
                      _context.next = 15;
                      break;
                    }

                    throw new Error(intl({
                      id: 'org.umi.ui.blocks.adder.pathexist'
                    }));

                  case 15:
                    blockFileTarget = form.getFieldValue('path');
                    _context.next = 18;
                    return api.callRemote({
                      type: 'org.umi.block.checkBindingInFile',
                      payload: {
                        path: blockFileTarget,
                        name: name
                      }
                    });

                  case 18:
                    _yield$api$callRemote2 = _context.sent;
                    varExists = _yield$api$callRemote2.exists;

                    if (!varExists) {
                      _context.next = 22;
                      break;
                    }

                    throw new Error(intl({
                      id: 'org.umi.ui.blocks.adder.varexist'
                    }));

                  case 22:
                  case "end":
                    return _context.stop();
                }
              }
            }, _callee);
          }));

          function validator(_x, _x2) {
            return _validator.apply(this, arguments);
          }

          return validator;
        }()
      }]
    }, React__default.createElement(antd.Input, {
      placeholder: intl({
        id: 'org.umi.ui.blocks.adder.name.placeholder'
      })
    })));
  };

  var defaultNameArray = ['Two', 'Three', 'Four', 'Five', 'Six', 'Seven'];

  var getNewName = function getNewName(name) {
    var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
    return "".concat(name).concat(defaultNameArray[index]);
  };
  /**
   * 获取一个未定义的变量名
   * @param param2
   */


  var getNoExitVar = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_ref) {
      var api, name, path, defaultName, _ref$index, index, _ref$need, need, _yield$api$callRemote, exists;

      return regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              api = _ref.api, name = _ref.name, path = _ref.path, defaultName = _ref.defaultName, _ref$index = _ref.index, index = _ref$index === void 0 ? 0 : _ref$index, _ref$need = _ref.need, need = _ref$need === void 0 ? true : _ref$need;

              if (need) {
                _context.next = 3;
                break;
              }

              return _context.abrupt("return", name);

            case 3:
              _context.prev = 3;
              _context.next = 6;
              return api.callRemote({
                type: 'org.umi.block.checkBindingInFile',
                payload: {
                  path: path,
                  name: name
                }
              });

            case 6:
              _yield$api$callRemote = _context.sent;
              exists = _yield$api$callRemote.exists;

              if (!(index < 6 && exists)) {
                _context.next = 10;
                break;
              }

              return _context.abrupt("return", getNoExitVar({
                name: getNewName(defaultName || name, index),
                path: path,
                api: api,
                defaultName: defaultName || name,
                index: index + 1
              }));

            case 10:
              return _context.abrupt("return", name);

            case 13:
              _context.prev = 13;
              _context.t0 = _context["catch"](3);

            case 15:
              return _context.abrupt("return", name);

            case 16:
            case "end":
              return _context.stop();
          }
        }
      }, _callee, null, [[3, 13]]);
    }));

    return function getNoExitVar(_x) {
      return _ref2.apply(this, arguments);
    };
  }();
  /**
   * 获取未定义的路由
   * @param param0
   */

  var getNoExitRoute = /*#__PURE__*/function () {
    var _ref4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(_ref3) {
      var api, path, defaultPath, _ref3$index, index, _ref3$need, need, _yield$api$callRemote2, exists, fileArray, name, filePath;

      return regeneratorRuntime.wrap(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
              api = _ref3.api, path = _ref3.path, defaultPath = _ref3.defaultPath, _ref3$index = _ref3.index, index = _ref3$index === void 0 ? 0 : _ref3$index, _ref3$need = _ref3.need, need = _ref3$need === void 0 ? true : _ref3$need;

              if (need) {
                _context2.next = 3;
                break;
              }

              return _context2.abrupt("return", path);

            case 3:
              _context2.prev = 3;
              _context2.next = 6;
              return api.callRemote({
                type: 'org.umi.block.checkExistRoute',
                payload: {
                  path: path.toLowerCase()
                }
              });

            case 6:
              _yield$api$callRemote2 = _context2.sent;
              exists = _yield$api$callRemote2.exists;

              if (!(index < 6 && exists)) {
                _context2.next = 13;
                break;
              }

              fileArray = (defaultPath || path).split('/');
              name = fileArray.pop();
              filePath = fileArray.join('/') || '/';
              return _context2.abrupt("return", getNoExitRoute({
                path: "".concat(filePath, "/").concat(getNewName(name, index)).replace(/\/\//g, '/'),
                api: api,
                defaultPath: defaultPath || path,
                index: index + 1
              }));

            case 13:
              return _context2.abrupt("return", path);

            case 16:
              _context2.prev = 16;
              _context2.t0 = _context2["catch"](3);

            case 18:
              return _context2.abrupt("return", path);

            case 19:
            case "end":
              return _context2.stop();
          }
        }
      }, _callee2, null, [[3, 16]]);
    }));

    return function getNoExitRoute(_x2) {
      return _ref4.apply(this, arguments);
    };
  }();
  /**
   * 获取未定义的文件列表
   * @param param0
   */

  var getNoExitPath = /*#__PURE__*/function () {
    var _ref6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(_ref5) {
      var api, path, defaultPath, _ref5$index, index, _ref5$need, need, _yield$api$callRemote3, exists, fileArray, name, filePath;

      return regeneratorRuntime.wrap(function _callee3$(_context3) {
        while (1) {
          switch (_context3.prev = _context3.next) {
            case 0:
              api = _ref5.api, path = _ref5.path, defaultPath = _ref5.defaultPath, _ref5$index = _ref5.index, index = _ref5$index === void 0 ? 0 : _ref5$index, _ref5$need = _ref5.need, need = _ref5$need === void 0 ? true : _ref5$need;

              if (need) {
                _context3.next = 3;
                break;
              }

              return _context3.abrupt("return", path);

            case 3:
              _context3.prev = 3;
              _context3.next = 6;
              return api.callRemote({
                type: 'org.umi.block.checkExistFilePath',
                payload: {
                  path: path
                }
              });

            case 6:
              _yield$api$callRemote3 = _context3.sent;
              exists = _yield$api$callRemote3.exists;

              if (!(index < 6 && exists)) {
                _context3.next = 13;
                break;
              }

              fileArray = (defaultPath || path).split('/');
              name = fileArray.pop();
              filePath = fileArray.join('/') || '/';
              return _context3.abrupt("return", getNoExitPath({
                path: "".concat(filePath, "/").concat(getNewName(name, index)).replace(/\/\//g, '/'),
                api: api,
                defaultPath: defaultPath || path,
                index: index + 1
              }));

            case 13:
              return _context3.abrupt("return", path);

            case 16:
              _context3.prev = 16;
              _context3.t0 = _context3["catch"](3);

            case 18:
              return _context3.abrupt("return", path);

            case 19:
            case "end":
              return _context3.stop();
          }
        }
      }, _callee3, null, [[3, 16]]);
    }));

    return function getNoExitPath(_x3) {
      return _ref6.apply(this, arguments);
    };
  }();

  /**
   * 安装区块
   * @param api
   * @param params
   */

  var addBlock = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(api, params) {
      var _yield$api$callRemote, _yield$api$callRemote2, info;

      return regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              _context.next = 2;
              return api.callRemote({
                type: 'org.umi.block.add',
                payload: params
              });

            case 2:
              _yield$api$callRemote = _context.sent;
              _yield$api$callRemote2 = _yield$api$callRemote.data;
              info = _yield$api$callRemote2 === void 0 ? {
                message: ''
              } : _yield$api$callRemote2;
              return _context.abrupt("return", info.message);

            case 6:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));

    return function addBlock(_x, _x2) {
      return _ref.apply(this, arguments);
    };
  }();

  var cancelAddBlockTask = function cancelAddBlockTask(api) {
    return api.callRemote({
      type: 'org.umi.block.cancel'
    });
  };

  var Adder = function Adder(props) {
    var visible = props.visible,
        blockTarget = props.blockTarget,
        onAddBlockChange = props.onAddBlockChange,
        onHideModal = props.onHideModal,
        index = props.index,
        _props$block = props.block,
        block = _props$block === void 0 ? {
      url: ''
    } : _props$block,
        blockType = props.blockType;

    var _useContext = React.useContext(UIApiContext),
        api = _useContext.api;

    var callRemote = api.callRemote,
        intl = api.intl,
        _analyze = api._analyze;
    var gtag = _analyze.gtag;

    var _useState = React.useState(false),
        _useState2 = _slicedToArray(_useState, 2),
        taskLoading = _useState2[0],
        setTaskLoading = _useState2[1]; // 防止重复提交


    var _useState3 = React.useState(false),
        _useState4 = _slicedToArray(_useState3, 2),
        fromCheck = _useState4[0],
        setFromCheck = _useState4[1];

    var _Form$useForm = antd.Form.useForm(),
        _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
        form = _Form$useForm2[0]; // 展示哪个界面
    // log 日志  form 表单


    var _useState5 = React.useState('form'),
        _useState6 = _slicedToArray(_useState5, 2),
        addStatus = _useState6[0],
        setAddStatus = _useState6[1]; // 预览界面需要消费的日志


    var _useState7 = React.useState(undefined),
        _useState8 = _slicedToArray(_useState7, 2),
        succeededBlock = _useState8[0],
        setSucceededBlock = _useState8[1];

    var _useCallData = useCallData(function () {
      return callRemote({
        type: '@@project/getNpmClients'
      });
    }, [], {
      defaultData: ['npm']
    }),
        _useCallData$data = _useCallData.data,
        npmClients = _useCallData$data === void 0 ? [] : _useCallData$data;

    React.useEffect(function () {
      if (api.detectNpmClients) {
        api.detectNpmClients().then(function (clients) {
          form.setFieldsValue({
            npmClient: clients.find(function (c) {
              return npmClients.includes(c);
            })
          });
        });
      }
    }, [npmClients]);
    React.useEffect(function () {
      /**
       * 成功之后清理状态
       */
      api.listenRemote({
        type: 'org.umi.block.add-blocks-success',
        onMessage: function onMessage(msg) {
          setTaskLoading(false);
          onAddBlockChange(undefined); // 如果标签页不激活，不处理它

          if (document.visibilityState !== 'hidden') {
            // 设置预览界面
            setAddStatus('result');
            setSucceededBlock(msg.data);
          } else {
            setAddStatus('form');
          }

          gtag('event', 'add-blocks-success', {
            event_category: 'block',
            event_label: msg.data && msg.data.path ? msg.data.path : ''
          });
        }
      });
      /**
       * 失败之后清理状态
       * 应该保留日志，所以进行页面的切换
       */

      api.listenRemote({
        type: 'org.umi.block.add-blocks-fail',
        onMessage: function onMessage(msg) {
          setTaskLoading(false);
          onAddBlockChange(undefined); // 如果标签页不激活，不处理它

          if (document.visibilityState !== 'hidden') {
            antd.message.error(intl({
              id: 'org.umi.ui.blocks.adder.failed'
            }));
          }

          gtag('event', 'add-blocks-fail', {
            event_category: 'block',
            event_label: msg.data && msg.data.path ? msg.data.path : ''
          });
        }
      });
      /**
       * 获取上次的安装的区块 url
       */

      callRemote({
        type: 'org.umi.block.get-adding-block-url'
      }).then(function (_ref2) {
        var data = _ref2.data;

        if (data) {
          // 如果有安装未完成的区块，设置显示页面为log
          // 并打开loading
          setAddStatus('log');
          setTaskLoading(true);
        }
      }); // detect language

      if (api.detectLanguage) {
        api.detectLanguage().then(function (language) {
          form.setFieldsValue({
            js: language === 'JavaScript'
          });
        });
      }
    }, []);
    React.useEffect(function () {
      if (!block || !block.url) {
        return;
      } // 生成 defaultName


      var defaultName = block.url.split('/').pop();
      var initPath = blockType !== 'template' ? '/' : "/".concat(defaultName);

      var resetInitialValues = /*#__PURE__*/function () {
        var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
          var noExitVar, initialValues;
          return regeneratorRuntime.wrap(function _callee2$(_context2) {
            while (1) {
              switch (_context2.prev = _context2.next) {
                case 0:
                  _context2.next = 2;
                  return getNoExitVar({
                    name: uppercamelcase(defaultName),
                    path: blockTarget || initPath,
                    api: api,
                    need: !!blockTarget
                  });

                case 2:
                  noExitVar = _context2.sent;
                  _context2.next = 5;
                  return getNoExitPath({
                    path: blockTarget || initPath,
                    api: api,
                    need: blockType === 'template'
                  });

                case 5:
                  _context2.t0 = _context2.sent;
                  _context2.next = 8;
                  return getNoExitRoute({
                    path: "/".concat(defaultName.toLocaleLowerCase()),
                    api: api,
                    need: blockType === 'template'
                  });

                case 8:
                  _context2.t1 = _context2.sent;
                  _context2.t2 = noExitVar;
                  initialValues = {
                    path: _context2.t0,
                    routePath: _context2.t1,
                    name: _context2.t2
                  };
                  form.setFieldsValue(initialValues);

                case 12:
                case "end":
                  return _context2.stop();
              }
            }
          }, _callee2);
        }));

        return function resetInitialValues() {
          return _ref3.apply(this, arguments);
        };
      }();

      resetInitialValues();
    }, [block ? block.url : '', blockTarget || '']);
    React.useEffect(function () {
      if (index !== null && index !== undefined) {
        form.setFieldsValue({
          index: index
        });
      }
    }, [index]);

    if (!block || !block.url) {
      return null;
    }
    /**
     * 计算初始值
     */


    var initialValues = {
      js: false,
      uni18n: localStorage.getItem('umi-ui-block-removeLocale') === 'true',
      npmClient: 'npm'
    };

    var renderOkText = function renderOkText(status, loading) {
      if (status === 'log' && !loading) {
        return intl({
          id: 'org.umi.ui.blocks.adder.stop'
        });
      }

      if (status === 'log') {
        return intl({
          id: 'org.umi.ui.blocks.adder.stop'
        });
      }

      return intl({
        id: 'org.umi.ui.blocks.adder.ok'
      });
    };

    return React__default.createElement(antd.Modal, {
      title: React__default.createElement("div", {
        style: {
          display: 'flex'
        }
      }, intl({
        id: "org.umi.ui.blocks.adder.title.".concat(blockType)
      })),
      closable: true,
      visible: visible,
      destroyOnClose: true,
      onCancel: function onCancel() {
        onHideModal();

        if (!taskLoading) {
          setAddStatus('form');
        }
      },
      footer: addStatus === 'result' ? null : undefined,
      confirmLoading: fromCheck,
      bodyStyle: {
        height: '60vh',
        overflow: 'auto',
        transition: '.3s'
      },
      centered: true,
      okText: renderOkText(addStatus, taskLoading),
      onOk: function onOk() {
        if (addStatus === 'log' && !taskLoading) {
          onHideModal();
          setAddStatus('form');
          setSucceededBlock(undefined);
          return;
        }

        if (addStatus === 'log') {
          antd.Modal.confirm({
            title: intl({
              id: 'org.umi.ui.blocks.adder.stop.title'
            }),
            content: intl({
              id: 'org.umi.ui.blocks.adder.stop.content'
            }),
            okType: 'danger',
            okText: intl({
              id: 'org.umi.ui.blocks.adder.stop.okText'
            }),
            cancelText: intl({
              id: 'org.umi.ui.blocks.adder.stop.cancelText'
            }),
            onOk: function () {
              var _onOk = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
                return regeneratorRuntime.wrap(function _callee3$(_context3) {
                  while (1) {
                    switch (_context3.prev = _context3.next) {
                      case 0:
                        _context3.next = 2;
                        return cancelAddBlockTask(api);

                      case 2:
                        setTaskLoading(false);
                        onAddBlockChange(undefined);

                      case 4:
                      case "end":
                        return _context3.stop();
                    }
                  }
                }, _callee3);
              }));

              function onOk() {
                return _onOk.apply(this, arguments);
              }

              return onOk;
            }()
          });
          return;
        } // loading 状态更新


        setTaskLoading(true);
        setFromCheck(true);
        form.validateFields().then( /*#__PURE__*/function () {
          var _ref4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(values) {
            var params;
            return regeneratorRuntime.wrap(function _callee4$(_context4) {
              while (1) {
                switch (_context4.prev = _context4.next) {
                  case 0:
                    setAddStatus('log');
                    _context4.prev = 1;
                    _context4.t0 = _objectSpread2;
                    _context4.t1 = {};
                    _context4.t2 = values;
                    _context4.t3 = block.url;
                    _context4.next = 8;
                    return getPathFromFilename(api, values.path);

                  case 8:
                    _context4.t4 = _context4.sent;
                    _context4.t5 = blockType === 'template' ? values.routePath : undefined;
                    _context4.t6 = blockType === 'template';
                    _context4.t7 = values.index && values.index.startsWith('l-') ? values.index : parseInt(values.index || '0', 10);
                    _context4.t8 = blockType === 'template' ? block.name : values.name;
                    _context4.t9 = {
                      url: _context4.t3,
                      path: _context4.t4,
                      routePath: _context4.t5,
                      page: _context4.t6,
                      index: _context4.t7,
                      name: _context4.t8
                    };
                    params = (0, _context4.t0)(_context4.t1, _context4.t2, _context4.t9);
                    addBlock(api, params);
                    localStorage.setItem('umi-ui-block-removeLocale', values.uni18n);
                    onAddBlockChange(block);
                    gtag('event', 'install-block', {
                      event_category: 'block',
                      event_label: params && params.path ? params.path : ''
                    });
                    _context4.next = 24;
                    break;

                  case 21:
                    _context4.prev = 21;
                    _context4.t10 = _context4["catch"](1);
                    antd.message.error(_context4.t10.message);

                  case 24:
                  case "end":
                    return _context4.stop();
                }
              }
            }, _callee4, null, [[1, 21]]);
          }));

          return function (_x3) {
            return _ref4.apply(this, arguments);
          };
        }()).catch(function () {
          return setTaskLoading(false);
        }).finally(function () {
          return setFromCheck(false);
        });
      }
    }, React__default.createElement(antd.Form, {
      hideRequiredMark: true,
      initialValues: initialValues,
      layout: "vertical",
      form: form,
      style: {
        display: addStatus !== 'form' && 'none'
      }
    }, blockType === 'template' && React__default.createElement(AddBlockForm, {
      visible: visible,
      blockType: blockType
    }), blockType === 'block' && !api.isMini() && React__default.createElement(AddBlockFormForUI$1, {
      form: form,
      visible: visible
    }), blockType === 'block' && api.isMini() && React__default.createElement(AddBlockFormForUI, {
      form: form,
      blockTarget: blockTarget
    }), React__default.createElement(antd.Form.Item, {
      name: "js",
      label: intl({
        id: 'org.umi.ui.blocks.adder.js'
      }),
      valuePropName: "checked",
      style: {
        display: 'none'
      }
    }, React__default.createElement(antd.Switch, {
      size: "small"
    })), blockType === 'template' && React__default.createElement(antd.Form.Item, {
      name: "uni18n",
      label: intl({
        id: 'org.umi.ui.blocks.adder.uni18n'
      }),
      valuePropName: "checked"
    }, React__default.createElement(antd.Switch, {
      size: "small"
    })), React__default.createElement(antd.Form.Item, {
      name: "npmClient",
      label: intl({
        id: 'org.umi.ui.blocks.adder.npmClient'
      }),
      rules: [{
        required: true,
        message: intl({
          id: 'org.umi.ui.blocks.adder.npmClient.required'
        })
      }]
    }, React__default.createElement(antd.Select, null, npmClients.map(function (client) {
      return React__default.createElement(antd.Select.Option, {
        key: client,
        value: client
      }, client);
    }))), React__default.createElement(antd.Form.Item, {
      name: "index"
    }, React__default.createElement("input", {
      type: "hidden"
    }))), addStatus === 'log' && React__default.createElement(LogPanel, {
      loading: taskLoading
    }), addStatus === 'result' && succeededBlock && React__default.createElement(ResultPanel, {
      onFinish: function onFinish() {
        onHideModal();
        setAddStatus('form');
        setSucceededBlock(undefined);
        api.hideMini();
      },
      name: succeededBlock.name || block.name,
      url: succeededBlock.previewUrl
    }));
  };

  var css$4 = ".index-module_resource__1cpFM {\n  height: 60px;\n  background: #23232e;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  padding: 0 24px;\n}\n.index-module_resource__1cpFM .index-module_icon__2Sa7e {\n  padding-right: 12px;\n  text-align: center;\n}\n.index-module_resource__1cpFM .index-module_titleAndDescription__35XDa {\n  flex: 1;\n}\n.index-module_resource__1cpFM .index-module_titleAndDescription__35XDa .index-module_title__2L46l {\n  color: #dfdfe1;\n  font-size: 14px;\n}\n.index-module_resource__1cpFM .index-module_titleAndDescription__35XDa .index-module_description__VuUlo {\n  color: #8a8a90;\n  font-size: 12px;\n}\n.index-module_resource__1cpFM:hover {\n  background: #2b2b36;\n}\n.index-module_resource__1cpFM.index-module_current__39A9v {\n  background: #2b2b36;\n}\n.index-module_cats__3uAOD {\n  flex: 1;\n  background: #2b2b36;\n  border-bottom: 1px solid #000;\n  overflow: auto;\n}\n.index-module_catsLoading__sfJo7 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.index-module_cat__2yIGS {\n  color: #b5b5b8;\n  cursor: pointer;\n  height: 38px;\n  line-height: 38px;\n  text-indent: 24px;\n}\n.index-module_cat__2yIGS:hover,\n.index-module_cat__2yIGS.index-module_current__39A9v {\n  background: #33333d;\n  color: #fff;\n}\n";
  var styles$4 = {"resource":"index-module_resource__1cpFM","icon":"index-module_icon__2Sa7e","titleAndDescription":"index-module_titleAndDescription__35XDa","title":"index-module_title__2L46l","description":"index-module_description__VuUlo","current":"index-module_current__39A9v","cats":"index-module_cats__3uAOD","catsLoading":"index-module_catsLoading__sfJo7","cat":"index-module_cat__2yIGS"};
  styleInject(css$4);

  var AssetsMenu = (function (props) {
    var type = props.type,
        matchedResources = props.matchedResources,
        current = props.current,
        setActiveResource = props.setActiveResource,
        updateUrlQuery = props.updateUrlQuery,
        blocks = props.blocks,
        selectedTag = props.selectedTag,
        setSelectedTag = props.setSelectedTag,
        loading = props.loading;

    var _useContext = React.useContext(UIApiContext),
        api = _useContext.api;

    var _api$_ = api._,
        uniq = _api$_.uniq,
        flatten = _api$_.flatten;
    var tags = React.useMemo(function () {
      return uniq(flatten(blocks.map(function (item) {
        return item.category ? [item.category] : item.tags;
      })));
    }, [blocks]); // const sortTagMap = {
    //   表格: 10,
    //   表单: 9,
    //   通用: 8,
    //   列表: 7,
    //   用户: 6,
    //   数据录入: 5,
    //   数据展示: 4,
    //   基本: 3,
    //   高级: 2,
    // };
    //
    // const sortTag = (a, b) => {
    //   if (sortTagMap[a]) {
    //     return -sortTagMap[a];
    //   }
    //   if (sortTagMap[b]) {
    //     return -sortTagMap[b];
    //   }
    //   return 0;
    // };

    function renderCats() {
      if (loading) {
        return React__default.createElement("div", {
          className: "".concat(styles$4.cats, " ").concat(loading ? styles$4.catsLoading : '')
        }, React__default.createElement(antd.Spin, {
          size: "large"
        }));
      }

      var getTagCls = function getTagCls(selected) {
        return classnames(styles$4.cat, _defineProperty({}, styles$4.current, selectedTag === selected));
      };

      return React__default.createElement("div", {
        className: styles$4.cats
      }, React__default.createElement("div", {
        key: "\u5168\u90E8",
        className: getTagCls(''),
        onClick: function onClick() {
          return setSelectedTag('');
        }
      }, "\u5168\u90E8"), tags // .sort(sortTag)
      .filter(function (tag) {
        return tag !== '废弃';
      }).map(function (tag) {
        return React__default.createElement("div", {
          key: tag,
          className: getTagCls(tag),
          onClick: function onClick() {
            return setSelectedTag(tag);
          }
        }, tag);
      }));
    }

    function renderResources() {
      function resourceSwitchHandler(r) {
        if (r.id === current.id) {
          setActiveResource({
            id: null
          });
          return;
        }

        setActiveResource(r);
        updateUrlQuery({
          type: type,
          resource: r.id
        });
      }

      return matchedResources.map(function (r) {
        var isCurrent = current.id === r.id;
        var resourceCls = classnames(styles$4.resource, _defineProperty({}, styles$4.current, !!isCurrent));
        return React__default.createElement(React__default.Fragment, {
          key: r.id
        }, React__default.createElement("div", {
          className: resourceCls,
          onClick: resourceSwitchHandler.bind(null, r)
        }, React__default.createElement("div", {
          className: styles$4.icon
        }, React__default.createElement("img", {
          src: r.icon,
          style: {
            width: '32px',
            height: '32px'
          }
        })), React__default.createElement("div", {
          className: styles$4.titleAndDescription
        }, React__default.createElement("div", {
          className: styles$4.title
        }, r.name), React__default.createElement("div", {
          className: styles$4.description
        }, r.description)), React__default.createElement("div", {
          className: styles$4.switcher
        }, isCurrent ? React__default.createElement(UpOutlined$2, {
          style: {
            fontSize: '12px'
          }
        }) : React__default.createElement(DownOutlined$2, {
          style: {
            fontSize: '12px'
          }
        }))), isCurrent ? renderCats() : null);
      });
    }

    return React__default.createElement(React__default.Fragment, null, renderResources());
  });

  var namespace = 'org.umi.block';
  var callRemote;
  function initApiToGlobal(api) {
    // eslint-disable-next-line
    callRemote = api.callRemote;
  }
  var model = {
    namespace: namespace,
    // TODO fill state
    state: {
      blockData: {},
      currentResourceId: null
    },
    effects: {
      // 获取数据
      fetch: /*#__PURE__*/regeneratorRuntime.mark(function fetch(_ref, _ref2) {
        var payload, call, put, select, _yield$select, blockData, currentResourceId, _payload$resourceId, resourceId, reload, _yield$call, list;

        return regeneratorRuntime.wrap(function fetch$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                payload = _ref.payload;
                call = _ref2.call, put = _ref2.put, select = _ref2.select;
                _context.next = 4;
                return select(function (state) {
                  return state[namespace];
                });

              case 4:
                _yield$select = _context.sent;
                blockData = _yield$select.blockData;
                currentResourceId = _yield$select.currentResourceId;
                _payload$resourceId = payload.resourceId, resourceId = _payload$resourceId === void 0 ? currentResourceId : _payload$resourceId, reload = payload.reload;

                if (!(blockData[resourceId] && !reload)) {
                  _context.next = 10;
                  break;
                }

                return _context.abrupt("return", blockData[resourceId]);

              case 10:
                _context.next = 12;
                return call(function () {
                  return callRemote({
                    type: 'org.umi.block.list',
                    payload: {
                      resourceId: resourceId,
                      force: reload
                    }
                  });
                });

              case 12:
                _yield$call = _context.sent;
                list = _yield$call.data;
                _context.next = 16;
                return put({
                  type: 'saveData',
                  payload: {
                    resourceId: resourceId,
                    list: list
                  }
                });

              case 16:
                return _context.abrupt("return", []);

              case 17:
              case "end":
                return _context.stop();
            }
          }
        }, fetch);
      })
    },
    reducers: {
      saveData: function saveData(_ref3, _ref4) {
        var blockData = _ref3.blockData;
        var payload = _ref4.payload;
        var resourceId = payload.resourceId,
            list = payload.list;
        var newState = {
          blockData: _objectSpread2({}, blockData, _defineProperty({}, resourceId, list)),
          currentResourceId: resourceId
        };
        return newState;
      }
    }
  };

  function createContainer(useHook) {
    var Context = React__default.createContext(null);

    function Provider(props) {
      var value = useHook(props.initialState);
      return React__default.createElement(Context.Provider, {
        value: value
      }, props.children);
    }

    function useContainer() {
      var value = React__default.useContext(Context);

      if (value === null) {
        throw new Error('Component must be wrapped with <Container.Provider>');
      }

      return value;
    }

    return {
      Provider: Provider,
      useContainer: useContainer
    };
  }

  var Container = createContainer(function (initialState) {
    var getQueryConfig = function getQueryConfig() {
      return lib_2$1(window.location.search.substr(1));
    };

    var query = getQueryConfig();

    var _useState = React.useState(query.type || 'block'),
        _useState2 = _slicedToArray(_useState, 2),
        type = _useState2[0],
        setType = _useState2[1];

    var _useState3 = React.useState(query.resource ? {
      id: query.resource
    } : null),
        _useState4 = _slicedToArray(_useState3, 2),
        activeResource = _useState4[0],
        setActiveResource = _useState4[1];

    return _objectSpread2({}, initialState, {
      type: type,
      setType: setType,
      activeResource: activeResource,
      setActiveResource: setActiveResource
    });
  });

  /**
   * get substr from url
   */

  var getQueryConfig = function getQueryConfig() {
    return lib_2$1(window.location.search.substr(1));
  };
  /**
   *  更新 search
   * @param params
   */


  var updateUrlQuery = function updateUrlQuery(params) {
    var defaultParas = getQueryConfig();
    window.history.pushState({}, '', "?".concat(lib_3$1(_objectSpread2({}, defaultParas, {}, params))));
  };

  var clearCache = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(api) {
      var hide, _yield$api$callRemote, data;

      return regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              _context.prev = 0;
              hide = antd.message.loading('缓存清理中！');
              _context.next = 4;
              return api.callRemote({
                type: 'org.umi.block.clear'
              });

            case 4:
              _yield$api$callRemote = _context.sent;
              data = _yield$api$callRemote.data;
              // 用户记忆的参数
              localStorage.removeItem('umi-ui-block-removeLocale');
              hide(); // 等动画播放完

              setTimeout(function () {
                antd.message.success(data);
              }, 30);
              _context.next = 14;
              break;

            case 11:
              _context.prev = 11;
              _context.t0 = _context["catch"](0);
              antd.message.error(_context.t0.message);

            case 14:
            case "end":
              return _context.stop();
          }
        }
      }, _callee, null, [[0, 11]]);
    }));

    return function clearCache(_x) {
      return _ref.apply(this, arguments);
    };
  }();

  var openUmiBlocks = function openUmiBlocks() {
    window.open('https://github.com/umijs/umi-blocks');
  };
  /**
   * 从 id 的 dom 滚动到 target 的 dom
   * @param id
   * @param target
   */


  var scrollToById = function scrollToById(id, target) {
    var dom = document.getElementById(id);
    var targetDom = document.getElementById(target);

    if (dom && targetDom) {
      var axis = dom.getBoundingClientRect();
      targetDom.scrollTop = axis.top + axis.height / 2;
    }
  };

  var BlocksViewer = function BlocksViewer(props) {
    var dispatch = props.dispatch,
        block = props.block,
        fetchDataLoading = props.loading;

    var _Container$useContain = Container.useContainer(),
        api = _Container$useContain.api,
        type = _Container$useContain.type,
        setType = _Container$useContain.setType,
        activeResource = _Container$useContain.activeResource,
        setActiveResource = _Container$useContain.setActiveResource;

    var callRemote = api.callRemote,
        intl = api.intl;
    /**
     * 是不是umi
     */

    var isMini = api.isMini();
    /**
     * 用到的各种状态
     */

    var _useState = React.useState(null),
        _useState2 = _slicedToArray(_useState, 2),
        willAddBlock = _useState2[0],
        setWillAddBlock = _useState2[1];

    var _useState3 = React.useState(null),
        _useState4 = _slicedToArray(_useState3, 2),
        addingBlock = _useState4[0],
        setAddBlock = _useState4[1];

    var _useState5 = React.useState(false),
        _useState6 = _slicedToArray(_useState5, 2),
        addModalVisible = _useState6[0],
        setAddModalVisible = _useState6[1];

    var _useState7 = React.useState(null),
        _useState8 = _slicedToArray(_useState7, 2),
        blockParams = _useState8[0],
        setBlockParams = _useState8[1];

    var _useState9 = React.useState(''),
        _useState10 = _slicedToArray(_useState9, 2),
        searchValue = _useState10[0],
        setSearchValue = _useState10[1];

    var _useState11 = React.useState(''),
        _useState12 = _slicedToArray(_useState11, 2),
        selectedTag = _useState12[0],
        setSelectedTag = _useState12[1];
    /**
     * 获取 query 中的设置
     */


    React.useLayoutEffect(function () {
      // 更新一下url，让他们同步一下
      if (type) {
        updateUrlQuery({
          type: type
        });
      }
    }, []); // 获取数据源

    var _useCallData = useCallData(function () {
      return callRemote({
        type: 'org.umi.block.resource'
      });
    }, [], {
      defaultData: []
    }),
        resources = _useCallData.data; // 当前的数据源列表


    var current = React.useMemo(function () {
      return activeResource || resources.filter(function (item) {
        return item.blockType === type;
      })[0];
    }, [resources, activeResource, type]); // 计算选中的区块

    var blocks = React.useMemo(function () {
      return current && block.blockData[current.id] ? block.blockData[current.id] : [];
    }, [block, current]); // 初始化 block dva model data

    React.useEffect(function () {
      if (current && current.id) {
        dispatch({
          type: "".concat(namespace, "/fetch"),
          payload: {
            resourceId: current.id
          }
        });
      }
    }, [current]);
    React.useEffect(function () {
      /**
       * 获取上次的安装的区块 url
       * 成功之后会被清除
       */
      callRemote({
        type: 'org.umi.block.get-adding-block-url'
      }).then(function (_ref3) {
        var data = _ref3.data;

        if (data) {
          setAddBlock({
            url: data
          });
        }
      });
    }, []); // 如果区块不在屏幕范围内，滚动过去

    React.useEffect(function () {
      if (willAddBlock) {
        // 我把每个 item 都加了一个 id，就是他的 url
        scrollToById(willAddBlock.url, 'block-list-view');
      }
    }, [fetchDataLoading]); // 区块右上角的区域 三个按钮

    React.useEffect(function () {
      var buttonPadding = isMini ? '0 4px' : '0 8px';

      var handleSearchChange = function handleSearchChange(v) {
        setSearchValue(v.toLocaleLowerCase());
      };

      if (api.setActionPanel) {
        api.setActionPanel(function () {
          return [React__default.createElement(GlobalSearch, {
            key: "global-search",
            onChange: handleSearchChange,
            api: api
          }), React__default.createElement(antd.Tooltip, {
            title: intl({
              id: 'org.umi.ui.blocks.actions.reload'
            }),
            getPopupContainer: function getPopupContainer(node) {
              return node ? node.parentNode : document.body;
            },
            placement: "bottom"
          }, React__default.createElement(antd.Button, {
            size: isMini ? 'small' : 'default',
            key: "reload",
            style: {
              padding: buttonPadding
            },
            onClick: function onClick() {
              dispatch({
                type: "".concat(namespace, "/fetch"),
                payload: {
                  reload: true
                }
              });
            }
          }, React__default.createElement(ReloadOutlined$2, null))), React__default.createElement(antd.Tooltip, {
            title: intl({
              id: 'org.umi.ui.blocks.actions.clear'
            }),
            getPopupContainer: function getPopupContainer(node) {
              return node ? node.parentNode : document.body;
            },
            placement: "bottom"
          }, React__default.createElement(antd.Button, {
            size: isMini ? 'small' : 'default',
            key: "clear",
            onClick: function onClick() {
              return clearCache(api);
            },
            style: {
              padding: buttonPadding
            }
          }, React__default.createElement(Clear, null))), React__default.createElement(antd.Tooltip, {
            title: intl({
              id: 'org.umi.ui.blocks.actions.submit'
            }),
            getPopupContainer: function getPopupContainer(node) {
              return node ? node.parentNode : document.body;
            },
            placement: "bottom"
          }, React__default.createElement(antd.Button, {
            size: isMini ? 'small' : 'default',
            key: "clear",
            onClick: function onClick() {
              return openUmiBlocks();
            },
            style: {
              padding: buttonPadding
            }
          }, React__default.createElement(PlusOutlined$2, null)))];
        });
      }
    }, []);
    var matchedResources = resources.filter(function (r) {
      return r.blockType === type;
    });
    return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
      className: styles$2.wrapper
    }, React__default.createElement("div", {
      className: styles$2.side
    }, React__default.createElement(AssetsMenu, {
      type: type,
      matchedResources: matchedResources,
      setActiveResource: setActiveResource,
      updateUrlQuery: updateUrlQuery,
      setSelectedTag: setSelectedTag,
      selectedTag: selectedTag,
      current: current,
      blocks: blocks,
      loading: fetchDataLoading
    })), React__default.createElement("div", {
      className: styles$2.main
    }, React__default.createElement("div", {
      className: "".concat(styles$2.container, " ").concat(isMini && styles$2.min),
      id: "block-list-view"
    }, current ? React__default.createElement("div", {
      className: styles$2.blockList
    }, matchedResources.length > 0 ? React__default.createElement(BlockList, {
      type: type,
      keyword: searchValue,
      addingBlock: willAddBlock || addingBlock,
      list: blocks,
      setSelectedTag: setSelectedTag,
      selectedTag: selectedTag,
      onShowModal: function onShowModal(currentBlock, option) {
        setAddModalVisible(true);
        setWillAddBlock(currentBlock);
        setBlockParams(option);
      },
      loading: fetchDataLoading
    }) : React__default.createElement("div", null, "\u6CA1\u6709\u627E\u5230\u6570\u636E\u6E90")) : React__default.createElement("div", {
      className: styles$2.loading
    }, React__default.createElement(antd.Spin, null))))), React__default.createElement(Adder, Object.assign({
      block: willAddBlock,
      blockType: type
    }, blockParams, {
      visible: addModalVisible,
      onAddBlockChange: function onAddBlockChange(addBlock) {
        return setAddBlock(addBlock);
      },
      onHideModal: function onHideModal() {
        setAddModalVisible(false);
        setWillAddBlock(undefined);
        setBlockParams(undefined);
      }
    })));
  };

  var css$5 = ".index-module_tabs__32HsW {\n  margin-bottom: -16px;\n}\n.index-module_tabs__32HsW .ant-tabs-bar {\n  border: 0;\n}\n.index-module_tabs__32HsW .ant-tabs-tab {\n  padding: 16px 0 !important;\n  font-size: 20px;\n}\n.isMini .index-module_tabs__32HsW .ant-tabs-tab {\n  padding: 8px 0 !important;\n  font-size: 16px;\n  margin: 0 22px 0 0 !important;\n}\n";
  var styles$5 = {"tabs":"index-module_tabs__32HsW"};
  styleInject(css$5);

  var TabPane = antd.Tabs.TabPane;
  function TitleTab () {
    var _Container$useContain = Container.useContainer(),
        api = _Container$useContain.api,
        type = _Container$useContain.type,
        setType = _Container$useContain.setType,
        setActiveResource = _Container$useContain.setActiveResource;

    var callRemote = api.callRemote,
        intl = api.intl;

    var getQueryConfig = function getQueryConfig() {
      return lib_2$1(window.location.search.substr(1));
    };

    var updateUrlQuery = function updateUrlQuery(params) {
      var defaultParas = getQueryConfig();
      window.history.pushState({}, '', "?".concat(lib_3$1(_objectSpread2({}, defaultParas, {}, params))));
    };

    return React__default.createElement(antd.Tabs, {
      className: styles$5.tabs,
      size: "large",
      activeKey: type,
      onChange: function onChange(activeKey) {
        setType(activeKey);
        setActiveResource(null);
        /**
         * 修改 url 中的参数，数据源改变时
         * 清空 resource
         */

        updateUrlQuery({
          type: activeKey,
          resource: undefined
        });
      }
    }, React__default.createElement(TabPane, {
      tab: intl({
        id: 'org.umi.ui.blocks.tabs.blocks'
      }),
      key: "block"
    }), React__default.createElement(TabPane, {
      tab: intl({
        id: 'org.umi.ui.blocks.tabs.templates'
      }),
      key: "template"
    }));
  }

  var zhCN = {
    'org.umi.ui.blocks.content.title': '资产',
    'org.umi.ui.blocks.content.search_block': '搜索资产',
    'org.umi.ui.blocks.actions.clear': '清除区块的本地缓存',
    'org.umi.ui.blocks.actions.submit': '提交新的区块',
    'org.umi.ui.blocks.actions.reload': '重新加载列表',
    'org.umi.ui.blocks.tabs.blocks': '区块',
    'org.umi.ui.blocks.tabs.templates': '模板',
    'org.umi.ui.blocks.list.nodata': '暂无数据',
    'org.umi.ui.blocks.list.nofound': '未搜索到任何数据',
    'org.umi.ui.blocks.list.viewlog': '查看日志',
    'org.umi.ui.blocks.list.add': '添加到项目',
    'org.umi.ui.blocks.list.preview.image': '预览图片',
    'org.umi.ui.blocks.list.preview.demo': '查看 demo 文档',
    'org.umi.ui.blocks.tag.all': '全部',
    'org.umi.ui.blocks.tag.collapse': '收起',
    'org.umi.ui.blocks.tag.expand': '展开',
    'org.umi.ui.blocks.adder.failed': '添加失败，请重试！',
    'org.umi.ui.blocks.adder.title.template': '添加模板',
    'org.umi.ui.blocks.adder.title.block': '添加区块',
    'org.umi.ui.blocks.adder.stop': '停止',
    'org.umi.ui.blocks.adder.ok': '确认',
    'org.umi.ui.blocks.adder.stop.title': '停止安装',
    'org.umi.ui.blocks.adder.stop.content': '确定要停止安装区块吗？',
    'org.umi.ui.blocks.adder.stop.okText': '确认',
    'org.umi.ui.blocks.adder.stop.cancelText': '取消',
    'org.umi.ui.blocks.adder.js': '编译为 JS',
    'org.umi.ui.blocks.adder.uni18n': '移除国际化',
    'org.umi.ui.blocks.adder.npmClient': '包管理器',
    'org.umi.ui.blocks.adder.npmClient.required': '请选择包管理器',
    'org.umi.ui.blocks.adder.minirecommend': '在 mini ui 中添加，获取更好的使用体验。',
    'org.umi.ui.blocks.adder.path': '添加到',
    'org.umi.ui.blocks.adder.path.tooltip': '此处选择的是 config.js 中的路由，他会根据路由来找到需要添加到的文件！',
    'org.umi.ui.blocks.adder.path.minitooltip': '当前选中页面的路径',
    'org.umi.ui.blocks.adder.path.rule': '添加路由为必填项！',
    'org.umi.ui.blocks.adder.name': '变量名',
    'org.umi.ui.blocks.adder.name.tooltip': '区块的源代码将会放在 [添加路径][变量名]的位置，并且将作为变量名加入页面中。',
    'org.umi.ui.blocks.adder.name.required': '变量名为必填项!',
    'org.umi.ui.blocks.adder.name.placeholder': '请输入变量名！',
    'org.umi.ui.blocks.adder.name.illegal': '变量名不合法!',
    'org.umi.ui.blocks.adder.name.illegalReact': '变量名不是一个合法的 React 组件名!',
    'org.umi.ui.blocks.adder.pathexist': '目标路径已存在文件!',
    'org.umi.ui.blocks.adder.varexist': '变量已存在于目标页面!',
    'org.umi.ui.blocks.adder.disabledTitle': '同一时间只能进行一个添加任务',
    'org.umi.ui.blocks.adder.routePath': '路由路径',
    'org.umi.ui.blocks.adder.routePath.placeholder': '路由路径代表你通过 url 访问到这个页面的路径，会写入 config.ts 中。',
    'org.umi.ui.blocks.adder.routePath.required': '路由必选',
    'org.umi.ui.blocks.adder.routePath.exist': '路由路径已存在',
    'org.umi.ui.blocks.adder.templatePath': '添加到',
    'org.umi.ui.blocks.adder.templatePath.tooltip': '表示相对于 src/pages 的文件路径，区块的源码将放在这个地方。',
    'org.umi.ui.blocks.adder.templatePath.required': '添加路径为必填项！',
    'org.umi.ui.blocks.adder.templatePath.root': '安装文件夹不能为根目录！',
    'org.umi.ui.blocks.adder.templatePath.exist': '安装文件路径已存在文件！',
    'org.umi.ui.blocks.adder.result.success': '安装成功！',
    'org.umi.ui.blocks.adder.result.subTitle': '代码已插入页面。编译完成后页面将会自动刷新。',
    'org.umi.ui.blocks.adder.result.done': '完成',
    'org.umi.ui.blocks.adder.result.preview': '预览'
  };

  var enUS = {
    'org.umi.ui.blocks.content.title': 'Assets',
    'org.umi.ui.blocks.content.search_block': 'Search Assets',
    'org.umi.ui.blocks.actions.clear': 'Clear blocks local cache',
    'org.umi.ui.blocks.actions.submit': 'Submit new block',
    'org.umi.ui.blocks.actions.reload': 'Reload list',
    'org.umi.ui.blocks.tabs.blocks': 'Blocks',
    'org.umi.ui.blocks.tabs.templates': 'Templates',
    'org.umi.ui.blocks.list.nodata': 'No Data',
    'org.umi.ui.blocks.list.nofound': 'No data found',
    'org.umi.ui.blocks.list.viewlog': 'Log',
    'org.umi.ui.blocks.list.add': 'Add',
    'org.umi.ui.blocks.list.preview.image': 'Preview Image',
    'org.umi.ui.blocks.list.preview.demo': 'Preview Demo',
    'org.umi.ui.blocks.tag.all': 'All',
    'org.umi.ui.blocks.tag.collapse': 'Collapse',
    'org.umi.ui.blocks.tag.expand': 'Expand',
    'org.umi.ui.blocks.adder.failed': 'Add failed, please retry!',
    'org.umi.ui.blocks.adder.title.template': 'Add Template',
    'org.umi.ui.blocks.adder.title.block': 'Add Block',
    'org.umi.ui.blocks.adder.stop': 'Stop',
    'org.umi.ui.blocks.adder.ok': 'OK',
    'org.umi.ui.blocks.adder.stop.title': 'Stop add',
    'org.umi.ui.blocks.adder.stop.content': 'Are you sure you want to stop adding the block?',
    'org.umi.ui.blocks.adder.stop.okText': 'Confirm',
    'org.umi.ui.blocks.adder.stop.cancelText': 'Cancle',
    'org.umi.ui.blocks.adder.js': 'Transform to JS',
    'org.umi.ui.blocks.adder.uni18n': 'Remove i18n',
    'org.umi.ui.blocks.adder.npmClient': 'Package Manage Client',
    'org.umi.ui.blocks.adder.npmClient.required': 'Please select a package manage client',
    'org.umi.ui.blocks.adder.minirecommend': 'Open in mini ui for add, get a better experience.',
    'org.umi.ui.blocks.adder.path': 'Add to',
    'org.umi.ui.blocks.adder.path.tooltip': 'Select route in config.js, umi will find the file with route path!',
    'org.umi.ui.blocks.adder.path.minitooltip': 'The path of current select page',
    'org.umi.ui.blocks.adder.path.rule': 'Route is required',
    'org.umi.ui.blocks.adder.name': 'Variable Name',
    'org.umi.ui.blocks.adder.name.tooltip': 'The source code of the block will be placed in the [Add Path][Variable Name] location and will be added to the page as a variable name.',
    'org.umi.ui.blocks.adder.name.required': 'Variable name is required',
    'org.umi.ui.blocks.adder.name.placeholder': 'Please input name!',
    'org.umi.ui.blocks.adder.name.illegal': 'Variable name is illegal!',
    'org.umi.ui.blocks.adder.name.illegalReact': 'Variable name is a illegal React Component name!',
    'org.umi.ui.blocks.adder.pathexist': 'Target path already exist file!',
    'org.umi.ui.blocks.adder.varexist': 'Variable already exits in target page!',
    'org.umi.ui.blocks.adder.disabledTitle': 'Only one adding task can be performed at the same time',
    'org.umi.ui.blocks.adder.routePath': 'Route Path',
    'org.umi.ui.blocks.adder.routePath.placeholder': 'The route path represents the path you access through the URL to this page, which is written to config.ts.',
    'org.umi.ui.blocks.adder.routePath.required': 'Route path is required',
    'org.umi.ui.blocks.adder.routePath.exist': 'Route path is already exist',
    'org.umi.ui.blocks.adder.templatePath': 'Add To',
    'org.umi.ui.blocks.adder.templatePath.tooltip': 'Represents the file path of the block relative to src/pages, where the source code for the block will be placed.',
    'org.umi.ui.blocks.adder.templatePath.required': 'Add path is required',
    'org.umi.ui.blocks.adder.templatePath.root': 'Add folder cannot be the root directory!',
    'org.umi.ui.blocks.adder.templatePath.exist': 'The target file path already exists!',
    'org.umi.ui.blocks.adder.result.success': 'Add Success!',
    'org.umi.ui.blocks.adder.result.subTitle': 'The code has been inserted into the page. The page will refresh automatically after compilation.',
    'org.umi.ui.blocks.adder.result.done': 'Done',
    'org.umi.ui.blocks.adder.result.preview': 'Preview'
  };

  var index = (function (api) {
    initApiToGlobal(api);
    var FormattedMessage = api.intl.FormattedMessage;
    api.addLocales({
      'zh-CN': zhCN,
      'en-US': enUS
    });
    var ConnectedBlockViewer = api.connect(function (state) {
      return {
        block: state[namespace],
        loading: state.loading.models[namespace]
      };
    })(BlocksViewer);
    api.addPanel({
      title: 'org.umi.ui.blocks.content.title',
      headerTitle: React__default.createElement(TitleTab, null),
      provider: function provider(_ref) {
        var children = _ref.children,
            restProps = _objectWithoutProperties(_ref, ["children"]);

        return React__default.createElement(Container.Provider, Object.assign({
          initialState: {
            api: api
          }
        }, restProps), children);
      },
      path: '/blocks',
      icon: React__default.createElement(Icon$2, null),
      actions: [],
      component: function component() {
        return React__default.createElement(UIApiContext.Provider, {
          value: {
            api: api
          }
        }, React__default.createElement(ConnectedBlockViewer, null));
      }
    }); // 注册 model

    api.registerModel(model);
  });

  return index;

})));
