hanbiro-react16-sdk 1.0.27 → 1.0.28

package/dist/hanbiro-react16-sdk.umd.js

@@ -1,7 +1,8 @@
 /*!
- * hanbiro-react16-sdk v1.0.27
- * Build Date: 2026-05-21
+ * hanbiro-react16-sdk v1.0.28
+ * Build Date: 2026-05-22
  */
+function _toArray(r) { return _arrayWithHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableRest(); }
 function _readOnlyError(r) { throw new TypeError('"' + r + '" is read-only'); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 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."); }
@@ -211,20 +212,6 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       return "https://" + (dataArr == null ? void 0 : dataArr[0]);
     }
   };
-  var getGroupwareUrl = function getGroupwareUrl() {
-    var locationInfo = window.location;
-    if (isDevelopment) {
-      return getBaseUrl() || "https://vndev.hanbiro.com/ngw";
-    } else {
-      if (window.location !== window.parent.location) {
-        locationInfo = window.parent.location;
-      }
-      var _locationInfo = locationInfo,
-        hostname = _locationInfo.hostname,
-        protocol = _locationInfo.protocol;
-      return [protocol, "//", hostname, "/ngw"].join("");
-    }
-  };
   function callAI(_0, _1) {
     return __async(this, arguments, function (params, _ref3) {
       var setContent = _ref3.setContent,
@@ -413,8 +400,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
   }
   var propTypesExports = propTypes.exports;
   var PropTypes = /* @__PURE__ */getDefaultExportFromCjs(propTypesExports);
-  function _extends$l() {
-    _extends$l = Object.assign || function (target) {
+  function _extends$q() {
+    _extends$q = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -425,11 +412,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$l.apply(this, arguments);
+    return _extends$q.apply(this, arguments);
   }
-  function _objectWithoutProperties$l(source, excluded) {
+  function _objectWithoutProperties$q(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$l(source, excluded);
+    var target = _objectWithoutPropertiesLoose$q(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -442,7 +429,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$l(source, excluded) {
+  function _objectWithoutPropertiesLoose$q(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -459,8 +446,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$l(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$l({
+      rest = _objectWithoutProperties$q(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$q({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -498,8 +485,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
   AlignJustify.displayName = "AlignJustify";
-  function _extends$k() {
-    _extends$k = Object.assign || function (target) {
+  function _extends$p() {
+    _extends$p = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -510,11 +497,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$k.apply(this, arguments);
+    return _extends$p.apply(this, arguments);
   }
-  function _objectWithoutProperties$k(source, excluded) {
+  function _objectWithoutProperties$p(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$k(source, excluded);
+    var target = _objectWithoutPropertiesLoose$p(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -527,7 +514,79 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$k(source, excluded) {
+  function _objectWithoutPropertiesLoose$p(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 ArrowDown = React.forwardRef(function (_ref, ref) {
+    var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "currentColor" : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$p(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$p({
+      ref: ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, rest), /* @__PURE__ */React.createElement("line", {
+      x1: "12",
+      y1: "5",
+      x2: "12",
+      y2: "19"
+    }), /* @__PURE__ */React.createElement("polyline", {
+      points: "19 12 12 19 5 12"
+    }));
+  });
+  ArrowDown.propTypes = {
+    color: PropTypes.string,
+    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  };
+  ArrowDown.displayName = "ArrowDown";
+  function _extends$o() {
+    _extends$o = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends$o.apply(this, arguments);
+  }
+  function _objectWithoutProperties$o(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose$o(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$o(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -544,8 +603,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$k(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$k({
+      rest = _objectWithoutProperties$o(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$o({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -570,8 +629,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
   ArrowLeft.displayName = "ArrowLeft";
-  function _extends$j() {
-    _extends$j = Object.assign || function (target) {
+  function _extends$n() {
+    _extends$n = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -582,11 +641,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$j.apply(this, arguments);
+    return _extends$n.apply(this, arguments);
   }
-  function _objectWithoutProperties$j(source, excluded) {
+  function _objectWithoutProperties$n(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$j(source, excluded);
+    var target = _objectWithoutPropertiesLoose$n(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -599,7 +658,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$j(source, excluded) {
+  function _objectWithoutPropertiesLoose$n(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -616,8 +675,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$j(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$j({
+      rest = _objectWithoutProperties$n(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$n({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -642,8 +701,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
   ArrowUp.displayName = "ArrowUp";
-  function _extends$i() {
-    _extends$i = Object.assign || function (target) {
+  function _extends$m() {
+    _extends$m = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -654,11 +713,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$i.apply(this, arguments);
+    return _extends$m.apply(this, arguments);
   }
-  function _objectWithoutProperties$i(source, excluded) {
+  function _objectWithoutProperties$m(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$i(source, excluded);
+    var target = _objectWithoutPropertiesLoose$m(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -671,7 +730,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$i(source, excluded) {
+  function _objectWithoutPropertiesLoose$m(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -688,8 +747,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$i(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$i({
+      rest = _objectWithoutProperties$m(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$m({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -713,8 +772,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
   Award.displayName = "Award";
-  function _extends$h() {
-    _extends$h = Object.assign || function (target) {
+  function _extends$l() {
+    _extends$l = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -725,11 +784,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$h.apply(this, arguments);
+    return _extends$l.apply(this, arguments);
   }
-  function _objectWithoutProperties$h(source, excluded) {
+  function _objectWithoutProperties$l(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$h(source, excluded);
+    var target = _objectWithoutPropertiesLoose$l(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -742,7 +801,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$h(source, excluded) {
+  function _objectWithoutPropertiesLoose$l(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -759,8 +818,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$h(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$h({
+      rest = _objectWithoutProperties$l(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$l({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -780,8 +839,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
   Check.displayName = "Check";
-  function _extends$g() {
-    _extends$g = Object.assign || function (target) {
+  function _extends$k() {
+    _extends$k = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -792,11 +851,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$g.apply(this, arguments);
+    return _extends$k.apply(this, arguments);
   }
-  function _objectWithoutProperties$g(source, excluded) {
+  function _objectWithoutProperties$k(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$g(source, excluded);
+    var target = _objectWithoutPropertiesLoose$k(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -809,7 +868,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$g(source, excluded) {
+  function _objectWithoutPropertiesLoose$k(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -826,8 +885,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$g(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$g({
+      rest = _objectWithoutProperties$k(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$k({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -847,8 +906,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
   ChevronDown.displayName = "ChevronDown";
-  function _extends$f() {
-    _extends$f = Object.assign || function (target) {
+  function _extends$j() {
+    _extends$j = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -859,11 +918,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$f.apply(this, arguments);
+    return _extends$j.apply(this, arguments);
   }
-  function _objectWithoutProperties$f(source, excluded) {
+  function _objectWithoutProperties$j(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$f(source, excluded);
+    var target = _objectWithoutPropertiesLoose$j(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -876,7 +935,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$f(source, excluded) {
+  function _objectWithoutPropertiesLoose$j(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -888,13 +947,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var Compass = React.forwardRef(function (_ref, ref) {
+  var ChevronLeft = React.forwardRef(function (_ref, ref) {
     var _ref$color = _ref.color,
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$f(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$f({
+      rest = _objectWithoutProperties$j(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$j({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -905,21 +964,17 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    }, rest), /* @__PURE__ */React.createElement("circle", {
-      cx: "12",
-      cy: "12",
-      r: "10"
-    }), /* @__PURE__ */React.createElement("polygon", {
-      points: "16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"
+    }, rest), /* @__PURE__ */React.createElement("polyline", {
+      points: "15 18 9 12 15 6"
     }));
   });
-  Compass.propTypes = {
+  ChevronLeft.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  Compass.displayName = "Compass";
-  function _extends$e() {
-    _extends$e = Object.assign || function (target) {
+  ChevronLeft.displayName = "ChevronLeft";
+  function _extends$i() {
+    _extends$i = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -930,11 +985,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$e.apply(this, arguments);
+    return _extends$i.apply(this, arguments);
   }
-  function _objectWithoutProperties$e(source, excluded) {
+  function _objectWithoutProperties$i(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$e(source, excluded);
+    var target = _objectWithoutPropertiesLoose$i(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -947,7 +1002,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$e(source, excluded) {
+  function _objectWithoutPropertiesLoose$i(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -959,13 +1014,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var Copy = React.forwardRef(function (_ref, ref) {
+  var ChevronRight = React.forwardRef(function (_ref, ref) {
     var _ref$color = _ref.color,
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$e(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$e({
+      rest = _objectWithoutProperties$i(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$i({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -976,24 +1031,17 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    }, rest), /* @__PURE__ */React.createElement("rect", {
-      x: "9",
-      y: "9",
-      width: "13",
-      height: "13",
-      rx: "2",
-      ry: "2"
-    }), /* @__PURE__ */React.createElement("path", {
-      d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+    }, rest), /* @__PURE__ */React.createElement("polyline", {
+      points: "9 18 15 12 9 6"
     }));
   });
-  Copy.propTypes = {
+  ChevronRight.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  Copy.displayName = "Copy";
-  function _extends$d() {
-    _extends$d = Object.assign || function (target) {
+  ChevronRight.displayName = "ChevronRight";
+  function _extends$h() {
+    _extends$h = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -1004,11 +1052,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$d.apply(this, arguments);
+    return _extends$h.apply(this, arguments);
   }
-  function _objectWithoutProperties$d(source, excluded) {
+  function _objectWithoutProperties$h(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$d(source, excluded);
+    var target = _objectWithoutPropertiesLoose$h(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1021,7 +1069,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$d(source, excluded) {
+  function _objectWithoutPropertiesLoose$h(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1033,13 +1081,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var FileText = React.forwardRef(function (_ref, ref) {
+  var Compass = React.forwardRef(function (_ref, ref) {
     var _ref$color = _ref.color,
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$d(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$d({
+      rest = _objectWithoutProperties$h(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$h({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -1050,31 +1098,21 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    }, rest), /* @__PURE__ */React.createElement("path", {
-      d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
-    }), /* @__PURE__ */React.createElement("polyline", {
-      points: "14 2 14 8 20 8"
-    }), /* @__PURE__ */React.createElement("line", {
-      x1: "16",
-      y1: "13",
-      x2: "8",
-      y2: "13"
-    }), /* @__PURE__ */React.createElement("line", {
-      x1: "16",
-      y1: "17",
-      x2: "8",
-      y2: "17"
-    }), /* @__PURE__ */React.createElement("polyline", {
-      points: "10 9 9 9 8 9"
+    }, rest), /* @__PURE__ */React.createElement("circle", {
+      cx: "12",
+      cy: "12",
+      r: "10"
+    }), /* @__PURE__ */React.createElement("polygon", {
+      points: "16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"
     }));
   });
-  FileText.propTypes = {
+  Compass.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  FileText.displayName = "FileText";
-  function _extends$c() {
-    _extends$c = Object.assign || function (target) {
+  Compass.displayName = "Compass";
+  function _extends$g() {
+    _extends$g = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -1085,11 +1123,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$c.apply(this, arguments);
+    return _extends$g.apply(this, arguments);
   }
-  function _objectWithoutProperties$c(source, excluded) {
+  function _objectWithoutProperties$g(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$c(source, excluded);
+    var target = _objectWithoutPropertiesLoose$g(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1102,7 +1140,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$c(source, excluded) {
+  function _objectWithoutPropertiesLoose$g(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1114,13 +1152,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var Frown = React.forwardRef(function (_ref, ref) {
+  var Copy = React.forwardRef(function (_ref, ref) {
     var _ref$color = _ref.color,
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$c(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$c({
+      rest = _objectWithoutProperties$g(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$g({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -1131,31 +1169,24 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    }, rest), /* @__PURE__ */React.createElement("circle", {
-      cx: "12",
-      cy: "12",
-      r: "10"
-    }), /* @__PURE__ */React.createElement("path", {
-      d: "M16 16s-1.5-2-4-2-4 2-4 2"
-    }), /* @__PURE__ */React.createElement("line", {
-      x1: "9",
-      y1: "9",
-      x2: "9.01",
-      y2: "9"
-    }), /* @__PURE__ */React.createElement("line", {
-      x1: "15",
-      y1: "9",
-      x2: "15.01",
-      y2: "9"
+    }, rest), /* @__PURE__ */React.createElement("rect", {
+      x: "9",
+      y: "9",
+      width: "13",
+      height: "13",
+      rx: "2",
+      ry: "2"
+    }), /* @__PURE__ */React.createElement("path", {
+      d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
     }));
   });
-  Frown.propTypes = {
+  Copy.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  Frown.displayName = "Frown";
-  function _extends$b() {
-    _extends$b = Object.assign || function (target) {
+  Copy.displayName = "Copy";
+  function _extends$f() {
+    _extends$f = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -1166,11 +1197,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$b.apply(this, arguments);
+    return _extends$f.apply(this, arguments);
   }
-  function _objectWithoutProperties$b(source, excluded) {
+  function _objectWithoutProperties$f(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$b(source, excluded);
+    var target = _objectWithoutPropertiesLoose$f(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1183,7 +1214,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$b(source, excluded) {
+  function _objectWithoutPropertiesLoose$f(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1195,13 +1226,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var Heart = React.forwardRef(function (_ref, ref) {
+  var FileText = React.forwardRef(function (_ref, ref) {
     var _ref$color = _ref.color,
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$b(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$b({
+      rest = _objectWithoutProperties$f(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$f({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -1213,16 +1244,30 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }, rest), /* @__PURE__ */React.createElement("path", {
-      d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
+      d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
+    }), /* @__PURE__ */React.createElement("polyline", {
+      points: "14 2 14 8 20 8"
+    }), /* @__PURE__ */React.createElement("line", {
+      x1: "16",
+      y1: "13",
+      x2: "8",
+      y2: "13"
+    }), /* @__PURE__ */React.createElement("line", {
+      x1: "16",
+      y1: "17",
+      x2: "8",
+      y2: "17"
+    }), /* @__PURE__ */React.createElement("polyline", {
+      points: "10 9 9 9 8 9"
     }));
   });
-  Heart.propTypes = {
+  FileText.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  Heart.displayName = "Heart";
-  function _extends$a() {
-    _extends$a = Object.assign || function (target) {
+  FileText.displayName = "FileText";
+  function _extends$e() {
+    _extends$e = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -1233,11 +1278,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$a.apply(this, arguments);
+    return _extends$e.apply(this, arguments);
   }
-  function _objectWithoutProperties$a(source, excluded) {
+  function _objectWithoutProperties$e(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$a(source, excluded);
+    var target = _objectWithoutPropertiesLoose$e(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1250,7 +1295,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$a(source, excluded) {
+  function _objectWithoutPropertiesLoose$e(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1262,13 +1307,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var Lock = React.forwardRef(function (_ref, ref) {
+  var Frown = React.forwardRef(function (_ref, ref) {
     var _ref$color = _ref.color,
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$a(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$a({
+      rest = _objectWithoutProperties$e(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$e({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -1279,24 +1324,31 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    }, rest), /* @__PURE__ */React.createElement("rect", {
-      x: "3",
-      y: "11",
-      width: "18",
-      height: "11",
-      rx: "2",
-      ry: "2"
+    }, rest), /* @__PURE__ */React.createElement("circle", {
+      cx: "12",
+      cy: "12",
+      r: "10"
     }), /* @__PURE__ */React.createElement("path", {
-      d: "M7 11V7a5 5 0 0 1 10 0v4"
+      d: "M16 16s-1.5-2-4-2-4 2-4 2"
+    }), /* @__PURE__ */React.createElement("line", {
+      x1: "9",
+      y1: "9",
+      x2: "9.01",
+      y2: "9"
+    }), /* @__PURE__ */React.createElement("line", {
+      x1: "15",
+      y1: "9",
+      x2: "15.01",
+      y2: "9"
     }));
   });
-  Lock.propTypes = {
+  Frown.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  Lock.displayName = "Lock";
-  function _extends$9() {
-    _extends$9 = Object.assign || function (target) {
+  Frown.displayName = "Frown";
+  function _extends$d() {
+    _extends$d = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -1307,11 +1359,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$9.apply(this, arguments);
+    return _extends$d.apply(this, arguments);
   }
-  function _objectWithoutProperties$9(source, excluded) {
+  function _objectWithoutProperties$d(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$9(source, excluded);
+    var target = _objectWithoutPropertiesLoose$d(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1324,7 +1376,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$9(source, excluded) {
+  function _objectWithoutPropertiesLoose$d(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1336,13 +1388,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var Mail = React.forwardRef(function (_ref, ref) {
+  var Globe = React.forwardRef(function (_ref, ref) {
     var _ref$color = _ref.color,
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$9(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$9({
+      rest = _objectWithoutProperties$d(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$d({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -1353,19 +1405,26 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    }, rest), /* @__PURE__ */React.createElement("path", {
-      d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
-    }), /* @__PURE__ */React.createElement("polyline", {
-      points: "22,6 12,13 2,6"
+    }, rest), /* @__PURE__ */React.createElement("circle", {
+      cx: "12",
+      cy: "12",
+      r: "10"
+    }), /* @__PURE__ */React.createElement("line", {
+      x1: "2",
+      y1: "12",
+      x2: "22",
+      y2: "12"
+    }), /* @__PURE__ */React.createElement("path", {
+      d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
     }));
   });
-  Mail.propTypes = {
+  Globe.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  Mail.displayName = "Mail";
-  function _extends$8() {
-    _extends$8 = Object.assign || function (target) {
+  Globe.displayName = "Globe";
+  function _extends$c() {
+    _extends$c = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -1376,11 +1435,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$8.apply(this, arguments);
+    return _extends$c.apply(this, arguments);
   }
-  function _objectWithoutProperties$8(source, excluded) {
+  function _objectWithoutProperties$c(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$8(source, excluded);
+    var target = _objectWithoutPropertiesLoose$c(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1393,7 +1452,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$8(source, excluded) {
+  function _objectWithoutPropertiesLoose$c(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1405,13 +1464,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var MessageCircle = React.forwardRef(function (_ref, ref) {
+  var Heart = React.forwardRef(function (_ref, ref) {
     var _ref$color = _ref.color,
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$8(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$8({
+      rest = _objectWithoutProperties$c(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$c({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -1423,16 +1482,16 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }, rest), /* @__PURE__ */React.createElement("path", {
-      d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
+      d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
     }));
   });
-  MessageCircle.propTypes = {
+  Heart.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  MessageCircle.displayName = "MessageCircle";
-  function _extends$7() {
-    _extends$7 = Object.assign || function (target) {
+  Heart.displayName = "Heart";
+  function _extends$b() {
+    _extends$b = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -1443,11 +1502,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$7.apply(this, arguments);
+    return _extends$b.apply(this, arguments);
   }
-  function _objectWithoutProperties$7(source, excluded) {
+  function _objectWithoutProperties$b(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$7(source, excluded);
+    var target = _objectWithoutPropertiesLoose$b(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1460,7 +1519,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$7(source, excluded) {
+  function _objectWithoutPropertiesLoose$b(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1472,13 +1531,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var MessageSquare = React.forwardRef(function (_ref, ref) {
+  var Lock = React.forwardRef(function (_ref, ref) {
     var _ref$color = _ref.color,
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$7(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$7({
+      rest = _objectWithoutProperties$b(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$b({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -1489,17 +1548,24 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    }, rest), /* @__PURE__ */React.createElement("path", {
-      d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
+    }, rest), /* @__PURE__ */React.createElement("rect", {
+      x: "3",
+      y: "11",
+      width: "18",
+      height: "11",
+      rx: "2",
+      ry: "2"
+    }), /* @__PURE__ */React.createElement("path", {
+      d: "M7 11V7a5 5 0 0 1 10 0v4"
     }));
   });
-  MessageSquare.propTypes = {
+  Lock.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  MessageSquare.displayName = "MessageSquare";
-  function _extends$6() {
-    _extends$6 = Object.assign || function (target) {
+  Lock.displayName = "Lock";
+  function _extends$a() {
+    _extends$a = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -1510,11 +1576,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$6.apply(this, arguments);
+    return _extends$a.apply(this, arguments);
   }
-  function _objectWithoutProperties$6(source, excluded) {
+  function _objectWithoutProperties$a(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$6(source, excluded);
+    var target = _objectWithoutPropertiesLoose$a(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1527,7 +1593,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$6(source, excluded) {
+  function _objectWithoutPropertiesLoose$a(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1539,13 +1605,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var Paperclip = React.forwardRef(function (_ref, ref) {
+  var Mail = React.forwardRef(function (_ref, ref) {
     var _ref$color = _ref.color,
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$6(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$6({
+      rest = _objectWithoutProperties$a(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$a({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -1557,16 +1623,18 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }, rest), /* @__PURE__ */React.createElement("path", {
-      d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"
+      d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
+    }), /* @__PURE__ */React.createElement("polyline", {
+      points: "22,6 12,13 2,6"
     }));
   });
-  Paperclip.propTypes = {
+  Mail.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  Paperclip.displayName = "Paperclip";
-  function _extends$5() {
-    _extends$5 = Object.assign || function (target) {
+  Mail.displayName = "Mail";
+  function _extends$9() {
+    _extends$9 = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -1577,11 +1645,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$5.apply(this, arguments);
+    return _extends$9.apply(this, arguments);
   }
-  function _objectWithoutProperties$5(source, excluded) {
+  function _objectWithoutProperties$9(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$5(source, excluded);
+    var target = _objectWithoutPropertiesLoose$9(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1594,7 +1662,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$5(source, excluded) {
+  function _objectWithoutPropertiesLoose$9(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1606,13 +1674,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var Plus = React.forwardRef(function (_ref, ref) {
+  var MessageCircle = React.forwardRef(function (_ref, ref) {
     var _ref$color = _ref.color,
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$5(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$5({
+      rest = _objectWithoutProperties$9(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$9({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -1623,25 +1691,17 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    }, rest), /* @__PURE__ */React.createElement("line", {
-      x1: "12",
-      y1: "5",
-      x2: "12",
-      y2: "19"
-    }), /* @__PURE__ */React.createElement("line", {
-      x1: "5",
-      y1: "12",
-      x2: "19",
-      y2: "12"
+    }, rest), /* @__PURE__ */React.createElement("path", {
+      d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
     }));
   });
-  Plus.propTypes = {
+  MessageCircle.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  Plus.displayName = "Plus";
-  function _extends$4() {
-    _extends$4 = Object.assign || function (target) {
+  MessageCircle.displayName = "MessageCircle";
+  function _extends$8() {
+    _extends$8 = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -1652,11 +1712,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$4.apply(this, arguments);
+    return _extends$8.apply(this, arguments);
   }
-  function _objectWithoutProperties$4(source, excluded) {
+  function _objectWithoutProperties$8(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$4(source, excluded);
+    var target = _objectWithoutPropertiesLoose$8(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1669,7 +1729,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$4(source, excluded) {
+  function _objectWithoutPropertiesLoose$8(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1681,13 +1741,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var Scissors = React.forwardRef(function (_ref, ref) {
+  var MessageSquare = React.forwardRef(function (_ref, ref) {
     var _ref$color = _ref.color,
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$4(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$4({
+      rest = _objectWithoutProperties$8(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$8({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -1698,38 +1758,17 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    }, rest), /* @__PURE__ */React.createElement("circle", {
-      cx: "6",
-      cy: "6",
-      r: "3"
-    }), /* @__PURE__ */React.createElement("circle", {
-      cx: "6",
-      cy: "18",
-      r: "3"
-    }), /* @__PURE__ */React.createElement("line", {
-      x1: "20",
-      y1: "4",
-      x2: "8.12",
-      y2: "15.88"
-    }), /* @__PURE__ */React.createElement("line", {
-      x1: "14.47",
-      y1: "14.48",
-      x2: "20",
-      y2: "20"
-    }), /* @__PURE__ */React.createElement("line", {
-      x1: "8.12",
-      y1: "8.12",
-      x2: "12",
-      y2: "12"
+    }, rest), /* @__PURE__ */React.createElement("path", {
+      d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
     }));
   });
-  Scissors.propTypes = {
+  MessageSquare.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  Scissors.displayName = "Scissors";
-  function _extends$3() {
-    _extends$3 = Object.assign || function (target) {
+  MessageSquare.displayName = "MessageSquare";
+  function _extends$7() {
+    _extends$7 = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -1740,11 +1779,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$3.apply(this, arguments);
+    return _extends$7.apply(this, arguments);
   }
-  function _objectWithoutProperties$3(source, excluded) {
+  function _objectWithoutProperties$7(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$3(source, excluded);
+    var target = _objectWithoutPropertiesLoose$7(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1757,7 +1796,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$3(source, excluded) {
+  function _objectWithoutPropertiesLoose$7(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1769,13 +1808,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var Settings = React.forwardRef(function (_ref, ref) {
+  var Paperclip = React.forwardRef(function (_ref, ref) {
     var _ref$color = _ref.color,
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$3(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$3({
+      rest = _objectWithoutProperties$7(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$7({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -1786,21 +1825,17 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    }, rest), /* @__PURE__ */React.createElement("circle", {
-      cx: "12",
-      cy: "12",
-      r: "3"
-    }), /* @__PURE__ */React.createElement("path", {
-      d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
+    }, rest), /* @__PURE__ */React.createElement("path", {
+      d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"
     }));
   });
-  Settings.propTypes = {
+  Paperclip.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  Settings.displayName = "Settings";
-  function _extends$2() {
-    _extends$2 = Object.assign || function (target) {
+  Paperclip.displayName = "Paperclip";
+  function _extends$6() {
+    _extends$6 = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -1811,11 +1846,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$2.apply(this, arguments);
+    return _extends$6.apply(this, arguments);
   }
-  function _objectWithoutProperties$2(source, excluded) {
+  function _objectWithoutProperties$6(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$2(source, excluded);
+    var target = _objectWithoutPropertiesLoose$6(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1828,7 +1863,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$2(source, excluded) {
+  function _objectWithoutPropertiesLoose$6(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1840,13 +1875,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var Smile = React.forwardRef(function (_ref, ref) {
+  var Plus = React.forwardRef(function (_ref, ref) {
     var _ref$color = _ref.color,
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$2(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$2({
+      rest = _objectWithoutProperties$6(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$6({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -1857,31 +1892,25 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    }, rest), /* @__PURE__ */React.createElement("circle", {
-      cx: "12",
-      cy: "12",
-      r: "10"
-    }), /* @__PURE__ */React.createElement("path", {
-      d: "M8 14s1.5 2 4 2 4-2 4-2"
-    }), /* @__PURE__ */React.createElement("line", {
-      x1: "9",
-      y1: "9",
-      x2: "9.01",
-      y2: "9"
+    }, rest), /* @__PURE__ */React.createElement("line", {
+      x1: "12",
+      y1: "5",
+      x2: "12",
+      y2: "19"
     }), /* @__PURE__ */React.createElement("line", {
-      x1: "15",
-      y1: "9",
-      x2: "15.01",
-      y2: "9"
+      x1: "5",
+      y1: "12",
+      x2: "19",
+      y2: "12"
     }));
   });
-  Smile.propTypes = {
+  Plus.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  Smile.displayName = "Smile";
-  function _extends$1() {
-    _extends$1 = Object.assign || function (target) {
+  Plus.displayName = "Plus";
+  function _extends$5() {
+    _extends$5 = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -1892,11 +1921,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends$1.apply(this, arguments);
+    return _extends$5.apply(this, arguments);
   }
-  function _objectWithoutProperties$1(source, excluded) {
+  function _objectWithoutProperties$5(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$1(source, excluded);
+    var target = _objectWithoutPropertiesLoose$5(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1909,7 +1938,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$1(source, excluded) {
+  function _objectWithoutPropertiesLoose$5(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1921,13 +1950,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var ThumbsUp = React.forwardRef(function (_ref, ref) {
+  var Scissors = React.forwardRef(function (_ref, ref) {
     var _ref$color = _ref.color,
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties$1(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends$1({
+      rest = _objectWithoutProperties$5(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$5({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -1938,17 +1967,38 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    }, rest), /* @__PURE__ */React.createElement("path", {
-      d: "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
+    }, rest), /* @__PURE__ */React.createElement("circle", {
+      cx: "6",
+      cy: "6",
+      r: "3"
+    }), /* @__PURE__ */React.createElement("circle", {
+      cx: "6",
+      cy: "18",
+      r: "3"
+    }), /* @__PURE__ */React.createElement("line", {
+      x1: "20",
+      y1: "4",
+      x2: "8.12",
+      y2: "15.88"
+    }), /* @__PURE__ */React.createElement("line", {
+      x1: "14.47",
+      y1: "14.48",
+      x2: "20",
+      y2: "20"
+    }), /* @__PURE__ */React.createElement("line", {
+      x1: "8.12",
+      y1: "8.12",
+      x2: "12",
+      y2: "12"
     }));
   });
-  ThumbsUp.propTypes = {
+  Scissors.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  ThumbsUp.displayName = "ThumbsUp";
-  function _extends() {
-    _extends = Object.assign || function (target) {
+  Scissors.displayName = "Scissors";
+  function _extends$4() {
+    _extends$4 = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
         for (var key in source) {
@@ -1959,11 +2009,11 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
       return target;
     };
-    return _extends.apply(this, arguments);
+    return _extends$4.apply(this, arguments);
   }
-  function _objectWithoutProperties(source, excluded) {
+  function _objectWithoutProperties$4(source, excluded) {
     if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose(source, excluded);
+    var target = _objectWithoutPropertiesLoose$4(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -1976,7 +2026,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose(source, excluded) {
+  function _objectWithoutPropertiesLoose$4(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1988,13 +2038,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }
     return target;
   }
-  var Zap = React.forwardRef(function (_ref, ref) {
+  var Settings = React.forwardRef(function (_ref, ref) {
     var _ref$color = _ref.color,
       color = _ref$color === void 0 ? "currentColor" : _ref$color,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 24 : _ref$size,
-      rest = _objectWithoutProperties(_ref, ["color", "size"]);
-    return /* @__PURE__ */React.createElement("svg", _extends({
+      rest = _objectWithoutProperties$4(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$4({
       ref: ref,
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -2005,69 +2055,363 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    }, rest), /* @__PURE__ */React.createElement("polygon", {
-      points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2"
+    }, rest), /* @__PURE__ */React.createElement("circle", {
+      cx: "12",
+      cy: "12",
+      r: "3"
+    }), /* @__PURE__ */React.createElement("path", {
+      d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
     }));
   });
-  Zap.propTypes = {
+  Settings.propTypes = {
     color: PropTypes.string,
     size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   };
-  Zap.displayName = "Zap";
-  var ARROW_SIZE = 6;
-  var GAP = 4;
-  var Tooltip = /*#__PURE__*/function (_React__namespace$Com) {
-    function Tooltip(props) {
-      var _this;
-      _classCallCheck(this, Tooltip);
-      _this = _callSuper(this, Tooltip, [props]);
-      __publicField(_this, "triggerRef");
-      __publicField(_this, "tooltipRef");
-      __publicField(_this, "enterTimer", null);
-      __publicField(_this, "leaveTimer", null);
-      __publicField(_this, "handleMouseEnter", function () {
-        if (_this.leaveTimer) {
-          clearTimeout(_this.leaveTimer);
-          _this.leaveTimer = null;
-        }
-        var enterDelay = _this.props.enterDelay;
-        _this.enterTimer = setTimeout(function () {
-          _this.setState({
-            visible: true
-          }, function () {
-            var coords = _this.computeCoords();
-            _this.setState({
-              coords: coords
-            });
-          });
-        }, enterDelay);
-      });
-      __publicField(_this, "handleMouseLeave", function () {
-        if (_this.enterTimer) {
-          clearTimeout(_this.enterTimer);
-          _this.enterTimer = null;
-        }
-        var leaveDelay = _this.props.leaveDelay;
-        _this.leaveTimer = setTimeout(function () {
-          _this.setState({
-            visible: false
-          });
-        }, leaveDelay);
-      });
-      _this.state = {
-        visible: false,
-        coords: {
-          top: 0,
-          left: 0
+  Settings.displayName = "Settings";
+  function _extends$3() {
+    _extends$3 = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
         }
-      };
-      _this.triggerRef = React__namespace.createRef();
-      _this.tooltipRef = React__namespace.createRef();
-      return _this;
-    }
-    _inherits(Tooltip, _React__namespace$Com);
-    return _createClass(Tooltip, [{
-      key: "computeCoords",
+      }
+      return target;
+    };
+    return _extends$3.apply(this, arguments);
+  }
+  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 Smile = React.forwardRef(function (_ref, ref) {
+    var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "currentColor" : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$3(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$3({
+      ref: ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, rest), /* @__PURE__ */React.createElement("circle", {
+      cx: "12",
+      cy: "12",
+      r: "10"
+    }), /* @__PURE__ */React.createElement("path", {
+      d: "M8 14s1.5 2 4 2 4-2 4-2"
+    }), /* @__PURE__ */React.createElement("line", {
+      x1: "9",
+      y1: "9",
+      x2: "9.01",
+      y2: "9"
+    }), /* @__PURE__ */React.createElement("line", {
+      x1: "15",
+      y1: "9",
+      x2: "15.01",
+      y2: "9"
+    }));
+  });
+  Smile.propTypes = {
+    color: PropTypes.string,
+    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  };
+  Smile.displayName = "Smile";
+  function _extends$2() {
+    _extends$2 = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends$2.apply(this, arguments);
+  }
+  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;
+  }
+  var ThumbsUp = React.forwardRef(function (_ref, ref) {
+    var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "currentColor" : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$2(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$2({
+      ref: ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, rest), /* @__PURE__ */React.createElement("path", {
+      d: "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
+    }));
+  });
+  ThumbsUp.propTypes = {
+    color: PropTypes.string,
+    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  };
+  ThumbsUp.displayName = "ThumbsUp";
+  function _extends$1() {
+    _extends$1 = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends$1.apply(this, arguments);
+  }
+  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;
+  }
+  var X = React.forwardRef(function (_ref, ref) {
+    var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "currentColor" : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties$1(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends$1({
+      ref: ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, rest), /* @__PURE__ */React.createElement("line", {
+      x1: "18",
+      y1: "6",
+      x2: "6",
+      y2: "18"
+    }), /* @__PURE__ */React.createElement("line", {
+      x1: "6",
+      y1: "6",
+      x2: "18",
+      y2: "18"
+    }));
+  });
+  X.propTypes = {
+    color: PropTypes.string,
+    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  };
+  X.displayName = "X";
+  function _extends() {
+    _extends = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends.apply(this, arguments);
+  }
+  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 _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;
+  }
+  var Zap = React.forwardRef(function (_ref, ref) {
+    var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "currentColor" : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      rest = _objectWithoutProperties(_ref, ["color", "size"]);
+    return /* @__PURE__ */React.createElement("svg", _extends({
+      ref: ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, rest), /* @__PURE__ */React.createElement("polygon", {
+      points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2"
+    }));
+  });
+  Zap.propTypes = {
+    color: PropTypes.string,
+    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  };
+  Zap.displayName = "Zap";
+  var ARROW_SIZE = 6;
+  var GAP = 4;
+  var Tooltip = /*#__PURE__*/function (_React__namespace$Com) {
+    function Tooltip(props) {
+      var _this;
+      _classCallCheck(this, Tooltip);
+      _this = _callSuper(this, Tooltip, [props]);
+      __publicField(_this, "triggerRef");
+      __publicField(_this, "tooltipRef");
+      __publicField(_this, "enterTimer", null);
+      __publicField(_this, "leaveTimer", null);
+      __publicField(_this, "handleMouseEnter", function () {
+        if (_this.leaveTimer) {
+          clearTimeout(_this.leaveTimer);
+          _this.leaveTimer = null;
+        }
+        var enterDelay = _this.props.enterDelay;
+        _this.enterTimer = setTimeout(function () {
+          _this.setState({
+            visible: true
+          }, function () {
+            var coords = _this.computeCoords();
+            _this.setState({
+              coords: coords
+            });
+          });
+        }, enterDelay);
+      });
+      __publicField(_this, "handleMouseLeave", function () {
+        if (_this.enterTimer) {
+          clearTimeout(_this.enterTimer);
+          _this.enterTimer = null;
+        }
+        var leaveDelay = _this.props.leaveDelay;
+        _this.leaveTimer = setTimeout(function () {
+          _this.setState({
+            visible: false
+          });
+        }, leaveDelay);
+      });
+      _this.state = {
+        visible: false,
+        coords: {
+          top: 0,
+          left: 0
+        }
+      };
+      _this.triggerRef = React__namespace.createRef();
+      _this.tooltipRef = React__namespace.createRef();
+      return _this;
+    }
+    _inherits(Tooltip, _React__namespace$Com);
+    return _createClass(Tooltip, [{
+      key: "computeCoords",
       value: function computeCoords() {
         var _this$props = this.props,
           placement = _this$props.placement,
@@ -4752,11 +5096,12 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         alignItems: "center",
         gap: 6,
         background: "var(--background-softGrey)",
-        borderRadius: 8,
-        borderTopLeftRadius: 0,
+        borderRadius: 16,
+        borderTopLeftRadius: 4,
         padding: "8px 12px",
         fontSize: 13,
-        color: "var(--text-secondary)"
+        color: "var(--text-secondary)",
+        width: "fit-content"
       }
     }, /* @__PURE__ */React__namespace.createElement("span", null, label), /* @__PURE__ */React__namespace.createElement("span", {
       className: "chat-ai-dots",
@@ -4829,8 +5174,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         question: item.question
       },
       style: {
-        borderRadius: 8,
-        borderTopRightRadius: 0,
+        borderRadius: 12,
+        borderTopRightRadius: 4,
         padding: "8px 12px",
         background: "var(--primary-main)",
         color: "var(--primary-contrasttext)"
@@ -4859,8 +5204,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       },
       style: {
         background: "var(--background-softGrey)",
-        borderRadius: 8,
-        borderTopLeftRadius: 0,
+        borderRadius: 12,
+        borderTopLeftRadius: 4,
         padding: "8px 12px"
       }
     }), /* @__PURE__ */React__namespace.createElement("div", {
@@ -6603,7 +6948,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     label: "1-liner",
     value: "one_liner"
   }];
-  var getFlagCode = function getFlagCode(value) {
+  var getFlagCode$1 = function getFlagCode$1(value) {
     var _a2;
     return (_a2 = AI_LANG_FLAGS.find(function (l) {
       return l.value === value;
@@ -6660,7 +7005,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           value = _this$props3.value,
           options = _this$props3.options;
         var open = this.state.open;
-        var selectedFlag = getFlagCode(value == null ? void 0 : value.value);
+        var selectedFlag = getFlagCode$1(value == null ? void 0 : value.value);
         return /* @__PURE__ */React__namespace.createElement("div", {
           ref: this.ref,
           style: {
@@ -6717,7 +7062,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             zIndex: 2
           }
         }, options.map(function (opt) {
-          var fc = getFlagCode(opt.value);
+          var fc = getFlagCode$1(opt.value);
           var isActive = (value == null ? void 0 : value.value) === opt.value;
           return /* @__PURE__ */React__namespace.createElement("button", {
             key: opt.value,
@@ -7624,9 +7969,113 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     title: "Refine with conversation",
     desc: "Get an AI draft, then adjust freely with chips or messages."
   }];
+  var EmptyState = function EmptyState() {
+    return /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        flex: 1,
+        minHeight: 0,
+        overflowY: "auto",
+        display: "flex",
+        flexDirection: "column",
+        paddingRight: 8,
+        marginRight: -8,
+        paddingBottom: 16,
+        gap: 12
+      }
+    }, /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        textAlign: "center",
+        marginTop: 8
+      }
+    }, /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        fontSize: 13,
+        color: "var(--text-secondary)",
+        lineHeight: 1.6
+      }
+    }, "We'll draft a reply based on the received email.", /* @__PURE__ */React__namespace.createElement("br", null), "Add send history if you want to match the tone.")), /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        alignSelf: "center",
+        width: 100,
+        height: 100,
+        borderRadius: "50%",
+        background: "var(--primary-lighter)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        margin: "8px 0",
+        color: "var(--primary-main)",
+        flexShrink: 0
+      }
+    }, /* @__PURE__ */React__namespace.createElement(CustomAiIcon, {
+      size: 44,
+      stroke: 1.5
+    })), /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        textAlign: "center"
+      }
+    }, /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        fontSize: 13,
+        color: "var(--text-secondary)",
+        lineHeight: 1.6
+      }
+    }, "The source is auto-included. Adjust tone and length through conversation.")), /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        borderTop: "1px solid var(--border-light)",
+        marginTop: 8,
+        paddingTop: 16,
+        display: "flex",
+        flexDirection: "column",
+        gap: 14
+      }
+    }, FEATURES.map(function (f, i) {
+      return /* @__PURE__ */React__namespace.createElement("div", {
+        key: i,
+        style: {
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "flex-start",
+          gap: 10
+        }
+      }, /* @__PURE__ */React__namespace.createElement("div", {
+        style: {
+          width: 28,
+          height: 28,
+          borderRadius: "50%",
+          background: "var(--primary-lighter)",
+          color: "var(--primary-main)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0
+        }
+      }, f.icon), /* @__PURE__ */React__namespace.createElement("div", {
+        style: {
+          flex: 1,
+          minWidth: 0
+        }
+      }, /* @__PURE__ */React__namespace.createElement("div", {
+        style: {
+          fontSize: 13,
+          fontWeight: 600,
+          color: "var(--text-primary)"
+        }
+      }, f.title), /* @__PURE__ */React__namespace.createElement("div", {
+        style: {
+          fontSize: 12,
+          color: "var(--text-secondary)",
+          marginTop: 2,
+          lineHeight: 1.5
+        }
+      }, f.desc)));
+    })));
+  };
   var SourceCard = function SourceCard(_ref30) {
-    var mail = _ref30.mail;
+    var mail = _ref30.mail,
+      onClick = _ref30.onClick;
     return /* @__PURE__ */React__namespace.createElement("div", {
+      onClick: onClick,
       style: {
         border: "1px solid var(--border-light)",
         borderRadius: 8,
@@ -7634,7 +8083,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         display: "flex",
         gap: 8,
         alignItems: "flex-start",
-        background: "#fff"
+        background: "#fff",
+        cursor: onClick ? "pointer" : "default"
       }
     }, /* @__PURE__ */React__namespace.createElement("div", {
       style: {
@@ -7664,8 +8114,12 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
   var SelectedChip = function SelectedChip(_ref31) {
     var index = _ref31.index,
       mail = _ref31.mail,
+      _onClick = _ref31.onClick,
       onRemove = _ref31.onRemove;
     return /* @__PURE__ */React__namespace.createElement("div", {
+      onClick: function onClick() {
+        return _onClick(mail);
+      },
       style: {
         display: "inline-flex",
         alignItems: "center",
@@ -7675,7 +8129,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         border: "1px solid var(--border-light)",
         background: "var(--primary-lighter)",
         fontSize: 12,
-        maxWidth: 160
+        maxWidth: 160,
+        cursor: "pointer"
       }
     }, /* @__PURE__ */React__namespace.createElement("span", {
       style: {
@@ -7700,8 +8155,9 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
     }, mail.subject || "(no subject)"), /* @__PURE__ */React__namespace.createElement("button", {
       type: "button",
-      onClick: function onClick() {
-        return onRemove(mail.mid);
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        onRemove(mail.mid);
       },
       style: {
         border: "none",
@@ -7715,22 +8171,20 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }
     }, "×"));
   };
-  var EmptyState = function EmptyState(_ref32) {
+  var ContextHeader = function ContextHeader(_ref32) {
     var sourceMail = _ref32.sourceMail,
       selectedMails = _ref32.selectedMails,
       onAddClick = _ref32.onAddClick,
-      onRemoveSelected = _ref32.onRemoveSelected;
+      onSourceClick = _ref32.onSourceClick,
+      onChipClick = _ref32.onChipClick,
+      onRemoveChip = _ref32.onRemoveChip;
     return /* @__PURE__ */React__namespace.createElement("div", {
       style: {
-        flex: 1,
-        minHeight: 0,
-        overflowY: "auto",
         display: "flex",
         flexDirection: "column",
-        paddingRight: 8,
-        marginRight: -8,
-        paddingBottom: 16,
-        gap: 12
+        gap: 12,
+        paddingBottom: 12,
+        marginBottom: 12
       }
     }, sourceMail && /* @__PURE__ */React__namespace.createElement("div", {
       style: {
@@ -7768,7 +8222,10 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }, /* @__PURE__ */React__namespace.createElement(Lock, {
       size: 11
     }), " Auto")), /* @__PURE__ */React__namespace.createElement(SourceCard, {
-      mail: sourceMail
+      mail: sourceMail,
+      onClick: function onClick() {
+        return onSourceClick(sourceMail);
+      }
     })), /* @__PURE__ */React__namespace.createElement("div", {
       style: {
         display: "flex",
@@ -7816,97 +8273,200 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         key: m.mid,
         index: i,
         mail: m,
-        onRemove: onRemoveSelected
+        onClick: onChipClick,
+        onRemove: onRemoveChip
       });
-    }))), /* @__PURE__ */React__namespace.createElement("div", {
+    }))));
+  };
+  var LoadingCircular = function LoadingCircular(_ref33) {
+    var _ref33$size = _ref33.size,
+      size = _ref33$size === void 0 ? 40 : _ref33$size,
+      _ref33$color = _ref33.color,
+      color = _ref33$color === void 0 ? "var(--primary-main)" : _ref33$color,
+      _ref33$thickness = _ref33.thickness,
+      thickness = _ref33$thickness === void 0 ? 3.6 : _ref33$thickness;
+    var radius = 20;
+    var circumference = 2 * Math.PI * radius;
+    return /* @__PURE__ */React.createElement("div", {
+      className: "circular-container",
       style: {
-        textAlign: "center",
-        marginTop: 8
-      }
-    }, /* @__PURE__ */React__namespace.createElement("div", {
+        width: size,
+        height: size
+      },
+      role: "progressbar"
+    }, /* @__PURE__ */React.createElement("svg", {
+      className: "circular-svg",
+      viewBox: "22 22 44 44"
+    }, /* @__PURE__ */React.createElement("circle", {
+      className: "circular-circle",
+      cx: "44",
+      cy: "44",
+      r: radius,
+      fill: "none",
+      stroke: color,
+      strokeWidth: thickness,
+      strokeDasharray: circumference,
       style: {
-        fontSize: 13,
-        color: "var(--text-secondary)",
-        lineHeight: 1.6
+        strokeDashoffset: circumference * 0.7
+        // Độ dài của thanh loading
       }
-    }, "We'll draft a reply based on the received email.", /* @__PURE__ */React__namespace.createElement("br", null), "Add send history if you want to match the tone.")), /* @__PURE__ */React__namespace.createElement("div", {
-      style: {
-        alignSelf: "center",
-        width: 100,
-        height: 100,
-        borderRadius: "50%",
-        background: "var(--primary-lighter)",
+    })));
+  };
+  var circularSize = {
+    small: 28,
+    medium: 40
+  };
+  var LoadingContainer = function LoadingContainer(_ref34) {
+    var style = _ref34.style,
+      _ref34$fullHeight = _ref34.fullHeight,
+      fullHeight = _ref34$fullHeight === void 0 ? false : _ref34$fullHeight,
+      _ref34$size = _ref34.size,
+      size = _ref34$size === void 0 ? "medium" : _ref34$size,
+      label = _ref34.label;
+    return /* @__PURE__ */React.createElement("div", {
+      style: __spreadValues({
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        margin: "8px 0",
-        color: "var(--primary-main)",
-        flexShrink: 0
-      }
-    }, /* @__PURE__ */React__namespace.createElement(CustomAiIcon, {
-      size: 44,
-      stroke: 1.5
-    })), /* @__PURE__ */React__namespace.createElement("div", {
-      style: {
-        textAlign: "center"
-      }
-    }, /* @__PURE__ */React__namespace.createElement("div", {
-      style: {
-        fontSize: 13,
-        color: "var(--text-secondary)",
-        lineHeight: 1.6
-      }
-    }, "The source is auto-included. Adjust tone and length through conversation.")), /* @__PURE__ */React__namespace.createElement("div", {
+        width: "100%",
+        height: fullHeight ? "100%" : 350
+      }, style)
+    }, /* @__PURE__ */React.createElement(LoadingCircular, {
+      size: circularSize[size]
+    }), label && /* @__PURE__ */React.createElement("p", {
+      color: "text.secondary",
       style: {
-        borderTop: "1px solid var(--border-light)",
-        marginTop: 8,
-        paddingTop: 16,
-        display: "flex",
-        flexDirection: "column",
-        gap: 14
-      }
-    }, FEATURES.map(function (f, i) {
-      return /* @__PURE__ */React__namespace.createElement("div", {
-        key: i,
-        style: {
-          display: "flex",
-          flexDirection: "row",
-          alignItems: "flex-start",
-          gap: 10
-        }
-      }, /* @__PURE__ */React__namespace.createElement("div", {
-        style: {
-          width: 28,
-          height: 28,
-          borderRadius: "50%",
-          background: "var(--primary-lighter)",
-          color: "var(--primary-main)",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          flexShrink: 0
-        }
-      }, f.icon), /* @__PURE__ */React__namespace.createElement("div", {
-        style: {
-          flex: 1,
-          minWidth: 0
+        marginTop: 16,
+        fontSize: size === "small" ? 12 : 13
+      }
+    }, label));
+  };
+  var Pagination = /*#__PURE__*/function (_React__namespace$Com6) {
+    function Pagination(props) {
+      var _this15;
+      _classCallCheck(this, Pagination);
+      _this15 = _callSuper(this, Pagination, [props]);
+      __publicField(_this15, "clamp", function (value) {
+        var totalPages = _this15.props.totalPages;
+        if (Number.isNaN(value)) return _this15.props.page;
+        return Math.min(Math.max(1, Math.floor(value)), Math.max(1, totalPages));
+      });
+      __publicField(_this15, "handleInputChange", function (e) {
+        _this15.setState({
+          inputValue: e.target.value
+        });
+      });
+      __publicField(_this15, "commit", function () {
+        var next = _this15.clamp(parseInt(_this15.state.inputValue, 10));
+        _this15.setState({
+          inputValue: String(next)
+        });
+        if (next !== _this15.props.page) {
+          _this15.props.onChangePage(next);
         }
-      }, /* @__PURE__ */React__namespace.createElement("div", {
-        style: {
-          fontSize: 13,
-          fontWeight: 600,
-          color: "var(--text-primary)"
+      });
+      __publicField(_this15, "handleKeyDown", function (e) {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          _this15.commit();
         }
-      }, f.title), /* @__PURE__ */React__namespace.createElement("div", {
-        style: {
-          fontSize: 12,
-          color: "var(--text-secondary)",
-          marginTop: 2,
-          lineHeight: 1.5
+      });
+      _this15.state = {
+        inputValue: String(props.page)
+      };
+      return _this15;
+    }
+    _inherits(Pagination, _React__namespace$Com6);
+    return _createClass(Pagination, [{
+      key: "componentDidUpdate",
+      value: function componentDidUpdate(prevProps) {
+        if (prevProps.page !== this.props.page) {
+          this.setState({
+            inputValue: String(this.props.page)
+          });
         }
-      }, f.desc)));
-    })));
-  };
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var _this$props7 = this.props,
+          total = _this$props7.total,
+          page = _this$props7.page,
+          totalPages = _this$props7.totalPages,
+          onChangePage = _this$props7.onChangePage;
+        var inputValue = this.state.inputValue;
+        return /* @__PURE__ */React__namespace.createElement("div", {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 8,
+            padding: "8px 0",
+            marginTop: 8,
+            borderTop: "1px solid var(--border-light)"
+          }
+        }, /* @__PURE__ */React__namespace.createElement("span", {
+          style: {
+            fontSize: 12,
+            color: "var(--text-secondary)"
+          }
+        }, "Total ", total, " | Page ", page, " / ", totalPages), /* @__PURE__ */React__namespace.createElement("div", {
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 4
+          }
+        }, /* @__PURE__ */React__namespace.createElement("button", {
+          type: "button",
+          onClick: function onClick() {
+            return page > 1 && onChangePage(page - 1);
+          },
+          disabled: page <= 1,
+          className: "icon-button small"
+        }, /* @__PURE__ */React__namespace.createElement(ChevronLeft, {
+          size: 14
+        })), /* @__PURE__ */React__namespace.createElement("button", {
+          type: "button",
+          onClick: function onClick() {
+            return page < totalPages && onChangePage(page + 1);
+          },
+          disabled: page >= totalPages,
+          className: "icon-button small"
+        }, /* @__PURE__ */React__namespace.createElement(ChevronRight, {
+          size: 14
+        })), /* @__PURE__ */React__namespace.createElement("span", {
+          style: {
+            fontSize: 12,
+            color: "var(--text-secondary)",
+            marginLeft: 4
+          }
+        }, "Page"), /* @__PURE__ */React__namespace.createElement("input", {
+          type: "number",
+          min: 1,
+          max: Math.max(1, totalPages),
+          value: inputValue,
+          onChange: this.handleInputChange,
+          onBlur: this.commit,
+          onKeyDown: this.handleKeyDown,
+          className: "pagination-input",
+          style: {
+            width: "".concat(Math.min(4, Math.max(1, inputValue.length || 1)) * 10 + 14, "px"),
+            height: 24,
+            padding: "0 6px 0 6px",
+            borderRadius: 4,
+            border: "1px solid var(--border-light)",
+            background: "#fff",
+            fontSize: 12,
+            color: "var(--text-primary)",
+            textAlign: "center",
+            fontFamily: "inherit",
+            outline: "none",
+            MozAppearance: "textfield"
+          }
+        })));
+      }
+    }]);
+  }(React__namespace.Component);
   var parseFromField = function parseFromField(raw) {
     var email = extractEmail(raw);
     var decoded = String(raw || "").replace(/&lt;/g, "<").replace(/&gt;/g, ">");
@@ -8053,15 +8613,15 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
       }, _callee9);
     }));
   };
-  var PAGE_SIZE = 6;
+  var PAGE_SIZE$1 = 6;
   var MAX_SELECTED = 5;
-  var MailListSelect = /*#__PURE__*/function (_React__namespace$Com6) {
+  var MailListSelect = /*#__PURE__*/function (_React__namespace$Com7) {
     function MailListSelect(props) {
-      var _this15;
+      var _this16;
       _classCallCheck(this, MailListSelect);
-      _this15 = _callSuper(this, MailListSelect, [props]);
-      __publicField(_this15, "loadPage", function (page) {
-        return __async(_this15, null, /*#__PURE__*/_regenerator().m(function _callee0() {
+      _this16 = _callSuper(this, MailListSelect, [props]);
+      __publicField(_this16, "loadPage", function (page) {
+        return __async(_this16, null, /*#__PURE__*/_regenerator().m(function _callee0() {
           var _yield$fetchMailList, items, total;
           return _regenerator().w(function (_context0) {
             while (1) switch (_context0.n) {
@@ -8072,7 +8632,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
                 _context0.n = 1;
                 return fetchMailList({
                   page: page,
-                  pageSize: PAGE_SIZE,
+                  pageSize: PAGE_SIZE$1,
                   accountEmail: this.props.accountEmail
                 });
               case 1:
@@ -8091,8 +8651,8 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           }, _callee0, this);
         }));
       });
-      __publicField(_this15, "toggleMid", function (mid) {
-        _this15.setState(function (prev) {
+      __publicField(_this16, "toggleMid", function (mid) {
+        _this16.setState(function (prev) {
           var isSelected = prev.selectedMids.includes(mid);
           if (isSelected) {
             return {
@@ -8109,44 +8669,39 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           };
         });
       });
-      __publicField(_this15, "toggleAll", function () {
-        var _this15$state = _this15.state,
-          items = _this15$state.items,
-          selectedMids = _this15$state.selectedMids;
+      __publicField(_this16, "toggleAll", function () {
+        var _this16$state = _this16.state,
+          items = _this16$state.items,
+          selectedMids = _this16$state.selectedMids;
+        if (selectedMids.length >= MAX_SELECTED) {
+          _this16.setState({
+            selectedMids: []
+          });
+          return;
+        }
         var pageMids = items.map(function (it) {
           return it.mid;
         });
-        var allSelected = pageMids.every(function (m) {
-          return selectedMids.includes(m);
+        var merged = Array.from(/* @__PURE__ */new Set([].concat(_toConsumableArray(selectedMids), _toConsumableArray(pageMids)))).slice(0, MAX_SELECTED);
+        _this16.setState({
+          selectedMids: merged
         });
-        if (allSelected) {
-          _this15.setState({
-            selectedMids: selectedMids.filter(function (m) {
-              return !pageMids.includes(m);
-            })
-          });
-        } else {
-          var merged = Array.from(/* @__PURE__ */new Set([].concat(_toConsumableArray(selectedMids), _toConsumableArray(pageMids)))).slice(0, MAX_SELECTED);
-          _this15.setState({
-            selectedMids: merged
-          });
-        }
       });
-      __publicField(_this15, "clearAll", function () {
-        _this15.setState({
+      __publicField(_this16, "clearAll", function () {
+        _this16.setState({
           selectedMids: []
         });
       });
-      _this15.state = {
+      _this16.state = {
         page: 1,
         total: 0,
         items: [],
         selectedMids: _toConsumableArray(props.initialSelected),
         isLoading: false
       };
-      return _this15;
+      return _this16;
     }
-    _inherits(MailListSelect, _React__namespace$Com6);
+    _inherits(MailListSelect, _React__namespace$Com7);
     return _createClass(MailListSelect, [{
       key: "componentDidMount",
       value: function componentDidMount() {
@@ -8155,75 +8710,31 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
     }, {
       key: "renderPagination",
       value: function renderPagination() {
-        var _this16 = this;
         var _this$state5 = this.state,
           page = _this$state5.page,
           total = _this$state5.total;
-        var totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
-        var pages = [];
-        for (var _i9 = 1; _i9 <= totalPages; _i9++) pages.push(_i9);
-        return /* @__PURE__ */React__namespace.createElement("div", {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            gap: 4,
-            padding: "12px 0"
-          }
-        }, /* @__PURE__ */React__namespace.createElement("button", {
-          type: "button",
-          onClick: function onClick() {
-            return page > 1 && _this16.loadPage(page - 1);
-          },
-          disabled: page <= 1,
-          className: "icon-button small"
-        }, "‹"), pages.map(function (p) {
-          return /* @__PURE__ */React__namespace.createElement("button", {
-            key: p,
-            type: "button",
-            onClick: function onClick() {
-              return p !== page && _this16.loadPage(p);
-            },
-            style: {
-              minWidth: 28,
-              height: 28,
-              borderRadius: 4,
-              border: "none",
-              background: p === page ? "var(--primary-main)" : "transparent",
-              color: p === page ? "var(--primary-contrasttext)" : "var(--text-primary)",
-              cursor: "pointer",
-              fontSize: 12,
-              fontFamily: "inherit",
-              fontWeight: p === page ? 600 : 400
-            }
-          }, p);
-        }), /* @__PURE__ */React__namespace.createElement("button", {
-          type: "button",
-          onClick: function onClick() {
-            return page < totalPages && _this16.loadPage(page + 1);
-          },
-          disabled: page >= totalPages,
-          className: "icon-button small"
-        }, "›"));
+        var totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE$1));
+        return /* @__PURE__ */React__namespace.createElement(Pagination, {
+          total: total,
+          page: page,
+          totalPages: totalPages,
+          onChangePage: this.loadPage
+        });
       }
     }, {
       key: "render",
       value: function render() {
         var _this17 = this;
-        var _this$props7 = this.props,
-          onCancel = _this$props7.onCancel,
-          onConfirm = _this$props7.onConfirm;
+        var _this$props8 = this.props,
+          onCancel = _this$props8.onCancel,
+          onConfirm = _this$props8.onConfirm,
+          isConfirming = _this$props8.isConfirming;
         var _this$state6 = this.state,
           items = _this$state6.items,
           total = _this$state6.total,
           selectedMids = _this$state6.selectedMids,
           isLoading = _this$state6.isLoading;
-        var pageMids = items.map(function (it) {
-          return it.mid;
-        });
-        var allOnPageSelected = pageMids.length > 0 && pageMids.every(function (m) {
-          return selectedMids.includes(m);
-        });
+        var isFull = selectedMids.length >= MAX_SELECTED;
         return /* @__PURE__ */React__namespace.createElement("div", {
           style: {
             display: "flex",
@@ -8272,16 +8783,31 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           style: {
             display: "inline-flex",
             alignItems: "center",
-            gap: 6,
+            gap: 8,
             fontSize: 12,
-            color: "var(--text-primary)",
+            color: "var(--text-secondary)",
             cursor: "pointer"
           }
         }, /* @__PURE__ */React__namespace.createElement("input", {
           type: "checkbox",
-          checked: allOnPageSelected,
+          checked: isFull,
           onChange: this.toggleAll
-        }), /* @__PURE__ */React__namespace.createElement("span", null, "Select all · ", total, " total")), /* @__PURE__ */React__namespace.createElement("span", {
+        }), /* @__PURE__ */React__namespace.createElement("span", {
+          style: {
+            background: "var(--primary-main)",
+            color: "var(--primary-contrasttext)",
+            padding: "2px 8px",
+            borderRadius: 999,
+            fontWeight: 600
+          }
+        }, selectedMids.length, "/", MAX_SELECTED), /* @__PURE__ */React__namespace.createElement("span", null, "selected · up to ", MAX_SELECTED), selectedMids.length > 0 && /* @__PURE__ */React__namespace.createElement("button", {
+          type: "button",
+          onClick: function onClick(e) {
+            e.preventDefault();
+            _this17.clearAll();
+          },
+          className: "text-button primary"
+        }, "Clear all")), /* @__PURE__ */React__namespace.createElement("span", {
           style: {
             fontSize: 11,
             color: "var(--text-secondary)"
@@ -8294,14 +8820,10 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             paddingRight: 8,
             marginRight: -8
           }
-        }, isLoading ? /* @__PURE__ */React__namespace.createElement("div", {
-          style: {
-            padding: 24,
-            textAlign: "center",
-            color: "var(--text-secondary)",
-            fontSize: 12
-          }
-        }, "Loading...") : items.length === 0 ? /* @__PURE__ */React__namespace.createElement("div", {
+        }, isLoading ? /* @__PURE__ */React__namespace.createElement(LoadingContainer, {
+          fullHeight: true,
+          size: "small"
+        }) : items.length === 0 ? /* @__PURE__ */React__namespace.createElement("div", {
           style: {
             padding: 24,
             textAlign: "center",
@@ -8387,44 +8909,6 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             }
           }, it.from_name, it.from_addr ? " <".concat(it.from_addr, ">") : "", it.preview ? " \xB7 ".concat(it.preview) : "")));
         }), !isLoading && items.length > 0 && this.renderPagination()), /* @__PURE__ */React__namespace.createElement("div", {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            paddingTop: 12,
-            borderTop: "1px solid var(--border-light)",
-            marginTop: 8,
-            gap: 8
-          }
-        }, /* @__PURE__ */React__namespace.createElement("div", {
-          style: {
-            fontSize: 12,
-            color: "var(--text-secondary)",
-            display: "inline-flex",
-            alignItems: "center",
-            gap: 8
-          }
-        }, /* @__PURE__ */React__namespace.createElement("span", {
-          style: {
-            background: "var(--primary-main)",
-            color: "var(--primary-contrasttext)",
-            padding: "2px 8px",
-            borderRadius: 999,
-            fontWeight: 600
-          }
-        }, selectedMids.length, "/", MAX_SELECTED), /* @__PURE__ */React__namespace.createElement("span", null, "selected · up to ", MAX_SELECTED), selectedMids.length > 0 && /* @__PURE__ */React__namespace.createElement("button", {
-          type: "button",
-          onClick: this.clearAll,
-          style: {
-            border: "none",
-            background: "transparent",
-            color: "var(--primary-main)",
-            cursor: "pointer",
-            fontSize: 12,
-            padding: 0,
-            fontFamily: "inherit"
-          }
-        }, "Clear all"))), /* @__PURE__ */React__namespace.createElement("div", {
           style: {
             display: "flex",
             gap: 8,
@@ -8446,7 +8930,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           }
         }, "Cancel"), /* @__PURE__ */React__namespace.createElement("button", {
           type: "button",
-          disabled: selectedMids.length === 0,
+          disabled: selectedMids.length === 0 || isConfirming,
           onClick: function onClick() {
             return onConfirm(selectedMids);
           },
@@ -8455,25 +8939,174 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
             padding: "10px 12px",
             borderRadius: 8,
             border: "none",
-            background: selectedMids.length === 0 ? "var(--primary-lighter)" : "var(--primary-main)",
+            background: selectedMids.length === 0 || isConfirming ? "var(--primary-lighter)" : "var(--primary-main)",
             color: "var(--primary-contrasttext)",
-            cursor: selectedMids.length === 0 ? "not-allowed" : "pointer",
+            cursor: selectedMids.length === 0 || isConfirming ? "not-allowed" : "pointer",
             fontSize: 13,
             fontWeight: 600,
+            fontFamily: "inherit",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 8
+          }
+        }, isConfirming && /* @__PURE__ */React__namespace.createElement(LoadingCircular, {
+          size: 16,
+          color: "var(--primary-contrasttext)"
+        }), /* @__PURE__ */React__namespace.createElement("span", null, "Add ", selectedMids.length > 0 ? "".concat(selectedMids.length, " ") : "", "as context →"))));
+      }
+    }]);
+  }(React__namespace.Component);
+  var BaseModal = /*#__PURE__*/function (_React__namespace$Com8) {
+    function BaseModal() {
+      var _this18;
+      _classCallCheck(this, BaseModal);
+      _this18 = _callSuper(this, BaseModal, arguments);
+      __publicField(_this18, "handleKeyDown", function (e) {
+        if (e.key === "Escape" && _this18.props.isOpen) _this18.props.onClose();
+      });
+      return _this18;
+    }
+    _inherits(BaseModal, _React__namespace$Com8);
+    return _createClass(BaseModal, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        document.addEventListener("keydown", this.handleKeyDown);
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        document.removeEventListener("keydown", this.handleKeyDown);
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var _this$props9 = this.props,
+          isOpen = _this$props9.isOpen,
+          onClose = _this$props9.onClose,
+          header = _this$props9.header,
+          children = _this$props9.children,
+          _this$props9$maxWidth = _this$props9.maxWidth,
+          maxWidth = _this$props9$maxWidth === void 0 ? 600 : _this$props9$maxWidth;
+        if (!isOpen) return null;
+        return ReactDOM__namespace.createPortal(/* @__PURE__ */React__namespace.createElement("div", {
+          onClick: onClose,
+          style: {
+            position: "fixed",
+            inset: 0,
+            background: "rgba(0, 0, 0, 0.1)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 1100,
+            padding: 16
+          }
+        }, /* @__PURE__ */React__namespace.createElement("div", {
+          onClick: function onClick(e) {
+            return e.stopPropagation();
+          },
+          style: {
+            background: "#fff",
+            borderRadius: 12,
+            maxWidth: maxWidth,
+            width: "100%",
+            maxHeight: "80vh",
+            display: "flex",
+            flexDirection: "column",
+            boxShadow: "0 10px 40px rgba(0, 0, 0, 0.15)",
+            overflow: "hidden",
             fontFamily: "inherit"
           }
-        }, "Add ", selectedMids.length > 0 ? "".concat(selectedMids.length, " ") : "", "as context →")));
+        }, /* @__PURE__ */React__namespace.createElement("div", {
+          style: {
+            display: "flex",
+            alignItems: "flex-start",
+            gap: 8,
+            padding: "16px 16px 12px",
+            borderBottom: "1px solid var(--border-light)"
+          }
+        }, /* @__PURE__ */React__namespace.createElement("div", {
+          style: {
+            flex: 1,
+            minWidth: 0
+          }
+        }, header), /* @__PURE__ */React__namespace.createElement("button", {
+          type: "button",
+          onClick: onClose,
+          className: "icon-button small"
+        }, /* @__PURE__ */React__namespace.createElement(X, {
+          size: 16
+        }))), /* @__PURE__ */React__namespace.createElement("div", {
+          style: {
+            flex: 1,
+            minHeight: 0,
+            overflowY: "auto",
+            padding: 16,
+            fontSize: 13,
+            lineHeight: 1.6,
+            color: "var(--text-primary)"
+          }
+        }, children))), document.body);
+      }
+    }]);
+  }(React__namespace.Component);
+  var renderMarkdown = function renderMarkdown(md) {
+    try {
+      return marked.parse(md, {
+        async: false
+      });
+    } catch (e) {
+      return md;
+    }
+  };
+  var MailHeader = function MailHeader(_ref35) {
+    var mail = _ref35.mail;
+    return /* @__PURE__ */React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        fontSize: 14,
+        fontWeight: 600,
+        color: "var(--text-primary)",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
       }
-    }]);
-  }(React__namespace.Component);
-  var ReplyPanel = /*#__PURE__*/function (_React__namespace$Com7) {
+    }, mail.subject || "(no subject)"), /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        fontSize: 12,
+        color: "var(--text-secondary)",
+        marginTop: 2,
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+      }
+    }, mail.from_name, mail.from_addr ? " <".concat(mail.from_addr, ">") : "", mail.date ? " \xB7 ".concat(mail.date) : ""));
+  };
+  var ContextPreviewModal = function ContextPreviewModal(_ref36) {
+    var preview = _ref36.preview,
+      onClose = _ref36.onClose;
+    var html2 = preview ? preview.mode === "html" ? preview.mail.contents || "" : renderMarkdown(preview.mail.ai_contents || "") : "";
+    return /* @__PURE__ */React__namespace.createElement(BaseModal, {
+      isOpen: !!preview,
+      onClose: onClose,
+      header: preview && /* @__PURE__ */React__namespace.createElement(MailHeader, {
+        mail: preview.mail
+      }),
+      maxWidth: (preview == null ? void 0 : preview.mode) === "html" ? 900 : 600
+    }, preview && /* @__PURE__ */React__namespace.createElement("div", {
+      className: "chat-ai-context-preview",
+      dangerouslySetInnerHTML: {
+        __html: html2
+      }
+    }));
+  };
+  var ReplyPanel = /*#__PURE__*/function (_React__namespace$Com9) {
     function ReplyPanel(props) {
-      var _this18;
+      var _this19;
       _classCallCheck(this, ReplyPanel);
-      _this18 = _callSuper(this, ReplyPanel, [props]);
-      __publicField(_this18, "rootRef");
-      __publicField(_this18, "loadSourceMail", function () {
-        return __async(_this18, null, /*#__PURE__*/_regenerator().m(function _callee1() {
+      _this19 = _callSuper(this, ReplyPanel, [props]);
+      __publicField(_this19, "rootRef");
+      __publicField(_this19, "loadSourceMail", function () {
+        return __async(_this19, null, /*#__PURE__*/_regenerator().m(function _callee1() {
           var sourceMid, view;
           return _regenerator().w(function (_context1) {
             while (1) switch (_context1.n) {
@@ -8517,18 +9150,18 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           }, _callee1, this);
         }));
       });
-      __publicField(_this18, "handleAddClick", function () {
-        _this18.setState({
+      __publicField(_this19, "handleAddClick", function () {
+        _this19.setState({
           view: "list"
         });
       });
-      __publicField(_this18, "handleListCancel", function () {
-        _this18.setState({
-          view: _this18.state.messages.length > 0 ? "chat" : "empty"
+      __publicField(_this19, "handleListCancel", function () {
+        _this19.setState({
+          view: _this19.state.messages.length > 0 ? "chat" : "empty"
         });
       });
-      __publicField(_this18, "handleListConfirm", function (mids) {
-        return __async(_this18, null, /*#__PURE__*/_regenerator().m(function _callee10() {
+      __publicField(_this19, "handleListConfirm", function (mids) {
+        return __async(_this19, null, /*#__PURE__*/_regenerator().m(function _callee10() {
           var selectedMails;
           return _regenerator().w(function (_context10) {
             while (1) switch (_context10.n) {
@@ -8551,21 +9184,42 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           }, _callee10, this);
         }));
       });
-      __publicField(_this18, "handleRemoveSelected", function (mid) {
-        _this18.setState({
-          selectedMails: _this18.state.selectedMails.filter(function (m) {
+      __publicField(_this19, "handleRemoveSelected", function (mid) {
+        _this19.setState({
+          selectedMails: _this19.state.selectedMails.filter(function (m) {
             return m.mid !== mid;
           })
         });
       });
-      __publicField(_this18, "handleMessageChange", function (value) {
-        _this18.setState({
+      __publicField(_this19, "handlePreviewSelected", function (mail) {
+        _this19.setState({
+          preview: {
+            mail: mail,
+            mode: "ai"
+          }
+        });
+      });
+      __publicField(_this19, "handlePreviewSource", function (mail) {
+        _this19.setState({
+          preview: {
+            mail: mail,
+            mode: "html"
+          }
+        });
+      });
+      __publicField(_this19, "handlePreviewClose", function () {
+        _this19.setState({
+          preview: null
+        });
+      });
+      __publicField(_this19, "handleMessageChange", function (value) {
+        _this19.setState({
           message: value
         });
       });
-      __publicField(_this18, "handleSubmit", function () {
-        return __async(_this18, null, /*#__PURE__*/_regenerator().m(function _callee11() {
-          var _this19 = this;
+      __publicField(_this19, "handleSubmit", function () {
+        return __async(_this19, null, /*#__PURE__*/_regenerator().m(function _callee11() {
+          var _this20 = this;
           var type, _this$state7, message, messages, lang, tone, length, conversationId, sourceMail, selectedMails, newId, newMessage, params, setContent, setIsLoading, setConversationId;
           return _regenerator().w(function (_context11) {
             while (1) switch (_context11.n) {
@@ -8612,7 +9266,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
                 if (length) params.length = length.value;
                 if (conversationId) params.conversation_id = conversationId;
                 setContent = function setContent(nContent) {
-                  _this19.setState(function (prevState) {
+                  _this20.setState(function (prevState) {
                     return {
                       messages: prevState.messages.map(function (m) {
                         return m.id === newId ? __spreadProps(__spreadValues({}, m), {
@@ -8626,7 +9280,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
                   });
                 };
                 setIsLoading = function setIsLoading(loading) {
-                  _this19.setState(function (prevState) {
+                  _this20.setState(function (prevState) {
                     return {
                       messages: prevState.messages.map(function (m) {
                         return m.id === newId ? __spreadProps(__spreadValues({}, m), {
@@ -8637,7 +9291,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
                   });
                 };
                 setConversationId = function setConversationId(id) {
-                  _this19.setState({
+                  _this20.setState({
                     conversationId: id
                   });
                 };
@@ -8657,32 +9311,33 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
           }, _callee11, this);
         }));
       });
-      __publicField(_this18, "setLang", function (lang) {
-        return _this18.setState({
+      __publicField(_this19, "setLang", function (lang) {
+        return _this19.setState({
           lang: lang
         });
       });
-      __publicField(_this18, "setTone", function (tone) {
-        return _this18.setState({
+      __publicField(_this19, "setTone", function (tone) {
+        return _this19.setState({
           tone: tone
         });
       });
-      __publicField(_this18, "setLength", function (length) {
-        return _this18.setState({
+      __publicField(_this19, "setLength", function (length) {
+        return _this19.setState({
           length: length
         });
       });
-      _this18.rootRef = React__namespace.createRef();
+      _this19.rootRef = React__namespace.createRef();
       var lang = (AI_LANG_FLAGS == null ? void 0 : AI_LANG_FLAGS.find(function (_item) {
         return (_item == null ? void 0 : _item.value) === (props == null ? void 0 : props.defaultLang);
       })) || AI_LANG_FLAGS[0];
-      _this18.state = {
+      _this19.state = {
         view: "empty",
         sourceMail: null,
         accountEmail: "",
         selectedMails: [],
         isLoadingSource: false,
         isLoadingSelected: false,
+        preview: null,
         message: "",
         messages: [],
         isSending: false,
@@ -8691,325 +9346,663 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
         length: LENGTH_OPTIONS[2],
         conversationId: ""
       };
-      return _this18;
+      return _this19;
     }
-    _inherits(ReplyPanel, _React__namespace$Com7);
+    _inherits(ReplyPanel, _React__namespace$Com9);
     return _createClass(ReplyPanel, [{
       key: "componentDidMount",
       value: function componentDidMount() {
         this.loadSourceMail();
       }
     }, {
-      key: "renderContextHeader",
-      value: function renderContextHeader() {
-        var _this20 = this;
+      key: "render",
+      value: function render() {
+        var _this$props0 = this.props,
+          onApply = _this$props0.onApply,
+          getEditorContent = _this$props0.getEditorContent;
         var _this$state8 = this.state,
+          view = _this$state8.view,
           sourceMail = _this$state8.sourceMail,
-          selectedMails = _this$state8.selectedMails;
+          accountEmail = _this$state8.accountEmail,
+          selectedMails = _this$state8.selectedMails,
+          message = _this$state8.message,
+          messages = _this$state8.messages,
+          isSending = _this$state8.isSending,
+          lang = _this$state8.lang,
+          tone = _this$state8.tone,
+          length = _this$state8.length,
+          isLoadingSelected = _this$state8.isLoadingSelected,
+          preview = _this$state8.preview;
+        if (view === "list") {
+          return /* @__PURE__ */React__namespace.createElement(MailListSelect, {
+            accountEmail: accountEmail,
+            initialSelected: selectedMails.map(function (m) {
+              return m.mid;
+            }),
+            isConfirming: isLoadingSelected,
+            onCancel: this.handleListCancel,
+            onConfirm: this.handleListConfirm
+          });
+        }
         return /* @__PURE__ */React__namespace.createElement("div", {
+          ref: this.rootRef,
           style: {
             display: "flex",
+            height: "100%",
+            padding: 16,
             flexDirection: "column",
-            gap: 8,
-            paddingBottom: 12,
-            borderBottom: "1px solid var(--border-light)",
-            marginBottom: 12
-          }
-        }, sourceMail && /* @__PURE__ */React__namespace.createElement("div", {
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            gap: 4
-          }
-        }, /* @__PURE__ */React__namespace.createElement("div", {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            gap: 6,
-            fontSize: 12,
-            fontWeight: 600,
-            color: "var(--text-primary)"
-          }
-        }, /* @__PURE__ */React__namespace.createElement("span", null, "Source context"), /* @__PURE__ */React__namespace.createElement("span", {
-          style: {
-            background: "var(--primary-main)",
-            color: "var(--primary-contrasttext)",
-            fontSize: 10,
-            padding: "1px 6px",
-            borderRadius: 999
-          }
-        }, "1"), /* @__PURE__ */React__namespace.createElement("span", {
-          style: {
-            display: "inline-flex",
-            alignItems: "center",
-            gap: 2,
-            fontSize: 11,
-            color: "var(--text-secondary)"
+            background: "#fff",
+            fontFamily: "inherit",
+            boxSizing: "border-box"
           }
-        }, /* @__PURE__ */React__namespace.createElement(Lock, {
-          size: 11
-        }), " Auto")), /* @__PURE__ */React__namespace.createElement("div", {
+        }, /* @__PURE__ */React__namespace.createElement(ContextHeader, {
+          sourceMail: sourceMail,
+          selectedMails: selectedMails,
+          onAddClick: this.handleAddClick,
+          onSourceClick: this.handlePreviewSource,
+          onChipClick: this.handlePreviewSelected,
+          onRemoveChip: this.handleRemoveSelected
+        }), view === "chat" ? /* @__PURE__ */React__namespace.createElement(ChatList, {
+          items: messages,
+          onApply: onApply,
+          getEditorContent: getEditorContent
+        }) : /* @__PURE__ */React__namespace.createElement(EmptyState, null), isLoadingSelected && /* @__PURE__ */React__namespace.createElement("div", {
           style: {
             fontSize: 12,
             color: "var(--text-secondary)",
-            whiteSpace: "nowrap",
-            overflow: "hidden",
-            textOverflow: "ellipsis"
-          }
-        }, sourceMail.subject, " ·", " ", /* @__PURE__ */React__namespace.createElement("span", {
-          style: {
-            color: "var(--text-primary)"
-          }
-        }, sourceMail.from_name))), /* @__PURE__ */React__namespace.createElement("div", {
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            gap: 6
-          }
-        }, /* @__PURE__ */React__namespace.createElement("div", {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between"
-          }
-        }, /* @__PURE__ */React__namespace.createElement("div", {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            gap: 6,
-            fontSize: 12,
-            fontWeight: 600,
-            color: "var(--text-primary)"
-          }
-        }, /* @__PURE__ */React__namespace.createElement("span", null, "Selected context"), /* @__PURE__ */React__namespace.createElement("span", {
-          style: {
-            background: "var(--background-softGrey)",
-            color: "var(--text-primary)",
-            fontSize: 10,
-            padding: "1px 6px",
-            borderRadius: 999
+            padding: 8,
+            textAlign: "center"
           }
-        }, selectedMails.length)), /* @__PURE__ */React__namespace.createElement("button", {
-          type: "button",
-          onClick: this.handleAddClick,
-          className: "text-button primary"
-        }, /* @__PURE__ */React__namespace.createElement(Plus, {
-          size: 12
-        }), " Add")), selectedMails.length > 0 && /* @__PURE__ */React__namespace.createElement("div", {
+        }, "Loading context..."), /* @__PURE__ */React__namespace.createElement(ChatInput, {
+          message: message,
+          onMessageChange: this.handleMessageChange,
+          onSubmit: this.handleSubmit,
+          isSending: isSending,
+          lang: lang,
+          setLang: this.setLang,
+          tone: tone,
+          setTone: this.setTone,
+          length: length,
+          setLength: this.setLength,
+          parentRef: this.rootRef,
+          placeholder: "Type a message..."
+        }), /* @__PURE__ */React__namespace.createElement(ContextPreviewModal, {
+          preview: preview,
+          onClose: this.handlePreviewClose
+        }));
+      }
+    }]);
+  }(React__namespace.Component);
+  var ChatAIDraft = function ChatAIDraft(props) {
+    var _a2 = props,
+      _a2$type = _a2.type,
+      type = _a2$type === void 0 ? "new" : _a2$type,
+      sourceMid = _a2.sourceMid,
+      rest = __objRest(_a2, ["type", "sourceMid"]);
+    if ((type === "reply" || type === "forward") && sourceMid) {
+      return /* @__PURE__ */React__namespace.createElement(ReplyPanel, __spreadValues({
+        type: type,
+        sourceMid: sourceMid
+      }, rest));
+    }
+    return /* @__PURE__ */React__namespace.createElement(CreatePanel, __spreadValues({}, rest));
+  };
+  var TargetInfoBar = function TargetInfoBar(_ref37) {
+    var targetName = _ref37.targetName,
+      targetEmail = _ref37.targetEmail,
+      currentLangLabel = _ref37.currentLangLabel,
+      onOpenLang = _ref37.onOpenLang;
+    return /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: 12,
+        gap: 8
+      }
+    }, /* @__PURE__ */React__namespace.createElement("span", {
+      style: {
+        fontSize: 13,
+        display: "flex",
+        flexWrap: "wrap",
+        alignItems: "center",
+        gap: 6,
+        minWidth: 0
+      }
+    }, targetName && /* @__PURE__ */React__namespace.createElement("span", {
+      style: {
+        fontSize: 14,
+        fontWeight: 600,
+        color: "var(--text-primary)"
+      }
+    }, targetName), targetEmail && /* @__PURE__ */React__namespace.createElement("span", {
+      style: {
+        color: "var(--text-secondary)",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+      }
+    }, targetEmail)), /* @__PURE__ */React__namespace.createElement("span", {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        flexShrink: 0
+      }
+    }, /* @__PURE__ */React__namespace.createElement("span", {
+      style: {
+        fontSize: 13,
+        color: "var(--text-primary)"
+      }
+    }, currentLangLabel), /* @__PURE__ */React__namespace.createElement("button", {
+      type: "button",
+      onClick: function onClick(e) {
+        return onOpenLang(e.currentTarget);
+      },
+      className: "icon-button small"
+    }, /* @__PURE__ */React__namespace.createElement(Globe, {
+      size: 14
+    }), /* @__PURE__ */React__namespace.createElement(ChevronDown, {
+      size: 12,
+      style: {
+        marginLeft: 2
+      }
+    }))));
+  };
+  var PAGE_SIZE = 5;
+  var FILTERS = [{
+    value: "all",
+    label: "All"
+  }, {
+    value: "receive",
+    label: "Received"
+  }, {
+    value: "sent",
+    label: "Sent"
+  }];
+  var formatDate = function formatDate(raw) {
+    if (!raw) return "";
+    return String(raw).replace(/\//g, "-");
+  };
+  var parseDataLine = function parseDataLine(line) {
+    if (!line) return null;
+    var trimmed = line.trim();
+    if (trimmed.startsWith("{")) {
+      try {
+        var parsed = JSON.parse(trimmed);
+        return parsed;
+      } catch (e) {}
+    }
+    var parts = trimmed.split("|").map(function (p) {
+      return p.trim();
+    });
+    if (parts.length < 2) return null;
+    var _parts = _toArray(parts),
+      date = _parts[0],
+      sig = _parts[1],
+      _parts$ = _parts[2],
+      subject = _parts$ === void 0 ? "" : _parts$,
+      rest = _arrayLikeToArray(_parts).slice(3);
+    var messages = rest.join(" | ");
+    var direction = sig === "out" ? "sent" : "receive";
+    return {
+      date: date,
+      sig: sig,
+      direction: direction,
+      direction_label: direction === "sent" ? "Sent" : "Received",
+      subject: subject,
+      messages: messages
+    };
+  };
+  var findLangLabel = function findLangLabel(lang, langList) {
+    var found = langList == null ? void 0 : langList.find(function (l) {
+      return l.value === lang;
+    });
+    if (found) return found.label;
+    return lang === "ko" ? "한국어" : lang;
+  };
+  var FilterTabs = function FilterTabs(_ref38) {
+    var mailtype = _ref38.mailtype,
+      onChangeFilter = _ref38.onChangeFilter;
+    return /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: 12,
+        gap: 8
+      }
+    }, /* @__PURE__ */React__namespace.createElement("span", {
+      style: {
+        fontSize: 13,
+        color: "var(--text-secondary)"
+      }
+    }, "This is a summary compiled by AI · May contain some inaccuracies"), /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        display: "inline-flex",
+        background: "var(--background-softGrey)",
+        borderRadius: 6,
+        padding: 2,
+        flexShrink: 0
+      }
+    }, FILTERS.map(function (f) {
+      var isActive = mailtype === f.value;
+      return /* @__PURE__ */React__namespace.createElement("button", {
+        key: f.value,
+        type: "button",
+        onClick: function onClick() {
+          return onChangeFilter(f.value);
+        },
+        style: {
+          border: "none",
+          background: isActive ? "var(--primary-main)" : "transparent",
+          color: isActive ? "var(--primary-contrasttext)" : "var(--text-primary)",
+          fontSize: 12,
+          fontWeight: isActive ? 600 : 400,
+          padding: "4px 12px",
+          borderRadius: 4,
+          cursor: "pointer",
+          fontFamily: "inherit",
+          transition: "background 0.15s ease-in-out"
+        }
+      }, f.label);
+    })));
+  };
+  var SummaryItem = function SummaryItem(_ref39) {
+    var item = _ref39.item;
+    var isSent = (item == null ? void 0 : item.direction) === "sent" || (item == null ? void 0 : item.sig) === "out";
+    return /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        background: "#fff",
+        border: "1px solid var(--border-light)",
+        borderRadius: 8,
+        padding: 12
+      }
+    }, /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        marginBottom: 4
+      }
+    }, /* @__PURE__ */React__namespace.createElement("span", {
+      style: {
+        color: "var(--text-secondary)",
+        fontSize: 12
+      }
+    }, formatDate(item == null ? void 0 : item.date)), /* @__PURE__ */React__namespace.createElement("span", {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 2,
+        padding: "2px 6px",
+        borderRadius: 4,
+        fontSize: 11,
+        fontWeight: 500,
+        background: isSent ? "rgba(33, 150, 243, 0.1)" : "rgba(76, 175, 80, 0.1)",
+        color: isSent ? "#1976d2" : "#2e7d32"
+      }
+    }, isSent ? /* @__PURE__ */React__namespace.createElement(ArrowUp, {
+      size: 11
+    }) : /* @__PURE__ */React__namespace.createElement(ArrowDown, {
+      size: 11
+    }), isSent ? "Sent" : "Received")), /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        fontSize: 14,
+        fontWeight: 600,
+        color: "var(--text-primary)",
+        marginBottom: 4
+      }
+    }, (item == null ? void 0 : item.subject) || "-"), /* @__PURE__ */React__namespace.createElement("div", {
+      style: {
+        fontSize: 13,
+        color: "var(--text-secondary)",
+        lineHeight: 1.5
+      }
+    }, (item == null ? void 0 : item.messages) || ""));
+  };
+  var getFlagCode = function getFlagCode(value) {
+    var _a2;
+    return (_a2 = AI_LANG_FLAGS.find(function (l) {
+      return l.value === value;
+    })) == null ? void 0 : _a2.flagCode;
+  };
+  var LanguagePopover = /*#__PURE__*/function (_React__namespace$Com0) {
+    function LanguagePopover(props) {
+      var _this21;
+      _classCallCheck(this, LanguagePopover);
+      _this21 = _callSuper(this, LanguagePopover, [props]);
+      __publicField(_this21, "panelRef");
+      __publicField(_this21, "updatePosition", function () {
+        var anchorEl = _this21.props.anchorEl;
+        if (!anchorEl) return;
+        var rect = anchorEl.getBoundingClientRect();
+        var top = rect.bottom + (window.scrollY || document.documentElement.scrollTop) + 4;
+        var right = window.innerWidth - rect.right - (window.scrollX || document.documentElement.scrollLeft);
+        _this21.setState({
+          top: top,
+          left: window.innerWidth - right - 180
+        });
+      });
+      __publicField(_this21, "handleClickOutside", function (e) {
+        var target = e.target;
+        if (_this21.panelRef.current && !_this21.panelRef.current.contains(target) && _this21.props.anchorEl && !_this21.props.anchorEl.contains(target)) {
+          _this21.props.onClose();
+        }
+      });
+      _this21.panelRef = React__namespace.createRef();
+      _this21.state = {
+        top: 0,
+        left: 0
+      };
+      return _this21;
+    }
+    _inherits(LanguagePopover, _React__namespace$Com0);
+    return _createClass(LanguagePopover, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        document.addEventListener("mousedown", this.handleClickOutside);
+        this.updatePosition();
+      }
+    }, {
+      key: "componentDidUpdate",
+      value: function componentDidUpdate(prevProps) {
+        if (prevProps.anchorEl !== this.props.anchorEl) {
+          this.updatePosition();
+        }
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        document.removeEventListener("mousedown", this.handleClickOutside);
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var _this$props1 = this.props,
+          anchorEl = _this$props1.anchorEl,
+          langList = _this$props1.langList,
+          currentLang = _this$props1.currentLang,
+          onSelect = _this$props1.onSelect;
+        if (!anchorEl) return null;
+        var _this$state9 = this.state,
+          top = _this$state9.top,
+          left = _this$state9.left;
+        return ReactDOM__namespace.createPortal(/* @__PURE__ */React__namespace.createElement("div", {
+          ref: this.panelRef,
           style: {
-            display: "flex",
-            flexWrap: "wrap",
-            gap: 6
+            position: "absolute",
+            top: top,
+            left: left,
+            width: 180,
+            maxHeight: 280,
+            overflowY: "auto",
+            background: "#fff",
+            border: "1px solid var(--border-main)",
+            borderRadius: 6,
+            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)",
+            zIndex: 1200,
+            padding: "4px 0"
           }
-        }, selectedMails.map(function (m, i) {
-          return /* @__PURE__ */React__namespace.createElement("div", {
-            key: m.mid,
-            style: {
-              display: "inline-flex",
-              alignItems: "center",
-              gap: 6,
-              padding: "4px 8px",
-              borderRadius: 8,
-              border: "1px solid var(--border-light)",
-              background: "var(--primary-lighter)",
-              fontSize: 11,
-              maxWidth: 160
-            }
-          }, /* @__PURE__ */React__namespace.createElement("span", {
-            style: {
-              width: 14,
-              height: 14,
-              borderRadius: "50%",
-              background: "var(--primary-main)",
-              color: "var(--primary-contrasttext)",
-              fontSize: 9,
-              fontWeight: 700,
-              display: "inline-flex",
-              alignItems: "center",
-              justifyContent: "center",
-              flexShrink: 0
-            }
-          }, i + 1), /* @__PURE__ */React__namespace.createElement("span", {
-            style: {
-              whiteSpace: "nowrap",
-              overflow: "hidden",
-              textOverflow: "ellipsis"
-            }
-          }, m.subject || "(no subject)"), /* @__PURE__ */React__namespace.createElement("button", {
+        }, langList.map(function (l) {
+          var isActive = l.value === currentLang;
+          var flag = getFlagCode(l.value);
+          return /* @__PURE__ */React__namespace.createElement("button", {
+            key: l.value,
             type: "button",
             onClick: function onClick() {
-              return _this20.handleRemoveSelected(m.mid);
+              return onSelect(l.value);
             },
             style: {
+              width: "100%",
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              padding: "8px 12px",
               border: "none",
-              background: "transparent",
+              background: isActive ? "var(--primary-lighter)" : "transparent",
               cursor: "pointer",
-              padding: 0,
-              color: "var(--text-secondary)",
-              display: "inline-flex",
-              alignItems: "center",
+              fontSize: 13,
+              fontFamily: "inherit",
+              textAlign: "left",
+              color: "var(--text-primary)"
+            }
+          }, flag && /* @__PURE__ */React__namespace.createElement(CountryFlag, {
+            flagCode: flag,
+            style: {
+              width: 18,
+              height: 14,
               flexShrink: 0
             }
-          }, "×"));
-        }))));
+          }), /* @__PURE__ */React__namespace.createElement("span", null, l.label));
+        })), document.body);
+      }
+    }]);
+  }(React__namespace.Component);
+  var INITIAL_META = {
+    total: 0,
+    receive: 0,
+    sent: 0,
+    totalPages: 1,
+    filterCount: 0
+  };
+  var SummaryAIEmails = /*#__PURE__*/function (_React__namespace$Com1) {
+    function SummaryAIEmails(props) {
+      var _this22;
+      _classCallCheck(this, SummaryAIEmails);
+      _this22 = _callSuper(this, SummaryAIEmails, [props]);
+      __publicField(_this22, "eventSource", null);
+      __publicField(_this22, "closeStream", function () {
+        if (_this22.eventSource) {
+          _this22.eventSource.close();
+          _this22.eventSource = null;
+        }
+      });
+      __publicField(_this22, "startStream", function () {
+        var targetEmail = _this22.props.targetEmail;
+        var _this22$state = _this22.state,
+          lang = _this22$state.lang,
+          mailtype = _this22$state.mailtype,
+          page = _this22$state.page;
+        if (!targetEmail) return;
+        _this22.closeStream();
+        _this22.setState({
+          items: [],
+          isLoading: true
+        });
+        var url = "".concat(getBaseUrl(), "/email/ai/fromsumstreaming/").concat(encodeURIComponent(targetEmail), "/").concat(lang, "/").concat(PAGE_SIZE, "/").concat(page, "?mailtype=").concat(mailtype);
+        var es = new EventSource(url);
+        _this22.eventSource = es;
+        es.addEventListener("meta", function (ev) {
+          var _a2, _b, _c;
+          try {
+            var parsed = JSON.parse(ev.data || "{}");
+            _this22.setState({
+              meta: {
+                total: ((_a2 = parsed == null ? void 0 : parsed.counts) == null ? void 0 : _a2.total) || 0,
+                receive: ((_b = parsed == null ? void 0 : parsed.counts) == null ? void 0 : _b.receive) || 0,
+                sent: ((_c = parsed == null ? void 0 : parsed.counts) == null ? void 0 : _c.sent) || 0,
+                totalPages: (parsed == null ? void 0 : parsed.total_pages) || 1,
+                filterCount: (parsed == null ? void 0 : parsed.filter_count) || 0
+              }
+            });
+          } catch (e) {}
+        });
+        es.onmessage = function (ev) {
+          if (!(ev == null ? void 0 : ev.data)) return;
+          if (ev.data === "[DONE]") {
+            _this22.closeStream();
+            _this22.setState({
+              isLoading: false
+            });
+            return;
+          }
+          var parsed = parseDataLine(ev.data);
+          if (parsed) {
+            _this22.setState(function (prev) {
+              return {
+                items: [].concat(_toConsumableArray(prev.items), [parsed]),
+                isLoading: false
+              };
+            });
+          }
+        };
+        es.onerror = function () {
+          _this22.closeStream();
+          _this22.setState({
+            isLoading: false
+          });
+        };
+      });
+      __publicField(_this22, "handleChangeFilter", function (val) {
+        if (val === _this22.state.mailtype) return;
+        _this22.setState({
+          mailtype: val,
+          page: 1
+        });
+      });
+      __publicField(_this22, "handleChangeLang", function (val) {
+        _this22.setState({
+          langAnchor: null
+        });
+        if (val === _this22.state.lang) return;
+        _this22.setState({
+          lang: val,
+          page: 1
+        });
+      });
+      __publicField(_this22, "handleChangePage", function (page) {
+        _this22.setState({
+          page: page
+        });
+      });
+      __publicField(_this22, "handleOpenLang", function (anchor) {
+        _this22.setState({
+          langAnchor: anchor
+        });
+      });
+      __publicField(_this22, "handleCloseLang", function () {
+        _this22.setState({
+          langAnchor: null
+        });
+      });
+      _this22.state = {
+        lang: props.defaultLang || "ko",
+        mailtype: "all",
+        page: 1,
+        items: [],
+        meta: INITIAL_META,
+        isLoading: false,
+        langAnchor: null
+      };
+      return _this22;
+    }
+    _inherits(SummaryAIEmails, _React__namespace$Com1);
+    return _createClass(SummaryAIEmails, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        this.startStream();
+      }
+    }, {
+      key: "componentDidUpdate",
+      value: function componentDidUpdate(prevProps, prevState) {
+        var targetChanged = prevProps.targetEmail !== this.props.targetEmail;
+        var filterChanged = prevState.lang !== this.state.lang || prevState.mailtype !== this.state.mailtype || prevState.page !== this.state.page;
+        if (targetChanged || filterChanged) {
+          this.startStream();
+        }
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        this.closeStream();
       }
     }, {
       key: "render",
       value: function render() {
-        var _this$props8 = this.props,
-          onApply = _this$props8.onApply,
-          getEditorContent = _this$props8.getEditorContent;
-        var _this$state9 = this.state,
-          view = _this$state9.view,
-          sourceMail = _this$state9.sourceMail,
-          accountEmail = _this$state9.accountEmail,
-          selectedMails = _this$state9.selectedMails,
-          message = _this$state9.message,
-          messages = _this$state9.messages,
-          isSending = _this$state9.isSending,
-          lang = _this$state9.lang,
-          tone = _this$state9.tone,
-          length = _this$state9.length,
-          isLoadingSelected = _this$state9.isLoadingSelected;
-        if (view === "list") {
-          return /* @__PURE__ */React__namespace.createElement(MailListSelect, {
-            accountEmail: accountEmail,
-            initialSelected: selectedMails.map(function (m) {
-              return m.mid;
-            }),
-            onCancel: this.handleListCancel,
-            onConfirm: this.handleListConfirm
-          });
-        }
+        var _this$props10 = this.props,
+          targetEmail = _this$props10.targetEmail,
+          targetName = _this$props10.targetName,
+          _this$props10$langLis = _this$props10.langList,
+          langList = _this$props10$langLis === void 0 ? [] : _this$props10$langLis;
+        var _this$state0 = this.state,
+          lang = _this$state0.lang,
+          mailtype = _this$state0.mailtype,
+          page = _this$state0.page,
+          items = _this$state0.items,
+          meta = _this$state0.meta,
+          isLoading = _this$state0.isLoading,
+          langAnchor = _this$state0.langAnchor;
+        var currentLangLabel = findLangLabel(lang, langList);
+        var totalPages = Math.max(1, meta.totalPages || Math.ceil((meta.filterCount || meta.total) / PAGE_SIZE));
+        var filterCount = meta.filterCount || meta.total || 0;
         return /* @__PURE__ */React__namespace.createElement("div", {
-          ref: this.rootRef,
           style: {
             display: "flex",
-            height: "100%",
-            padding: 16,
             flexDirection: "column",
-            background: "#fff",
+            background: "var(--background-softGrey)",
+            padding: 16,
+            borderRadius: 8,
             fontFamily: "inherit",
             boxSizing: "border-box"
           }
-        }, view === "chat" ? /* @__PURE__ */React__namespace.createElement(React__namespace.Fragment, null, this.renderContextHeader(), /* @__PURE__ */React__namespace.createElement(ChatList, {
-          items: messages,
-          onApply: onApply,
-          getEditorContent: getEditorContent
-        })) : /* @__PURE__ */React__namespace.createElement(EmptyState, {
-          sourceMail: sourceMail,
-          selectedMails: selectedMails,
-          onAddClick: this.handleAddClick,
-          onRemoveSelected: this.handleRemoveSelected
-        }), isLoadingSelected && /* @__PURE__ */React__namespace.createElement("div", {
+        }, /* @__PURE__ */React__namespace.createElement(TargetInfoBar, {
+          targetName: targetName,
+          targetEmail: targetEmail,
+          currentLangLabel: currentLangLabel,
+          onOpenLang: this.handleOpenLang
+        }), /* @__PURE__ */React__namespace.createElement(FilterTabs, {
+          mailtype: mailtype,
+          onChangeFilter: this.handleChangeFilter
+        }), /* @__PURE__ */React__namespace.createElement("div", {
           style: {
-            fontSize: 12,
+            display: "flex",
+            flexDirection: "column",
+            gap: 8,
+            minHeight: 120
+          }
+        }, isLoading && items.length === 0 && /* @__PURE__ */React__namespace.createElement(LoadingContainer, {
+          style: {
+            background: "#fff",
+            borderRadius: 8,
+            height: 160
+          },
+          size: "small"
+        }), !isLoading && items.length === 0 && /* @__PURE__ */React__namespace.createElement("div", {
+          style: {
+            background: "#fff",
+            borderRadius: 8,
+            padding: 24,
+            textAlign: "center",
             color: "var(--text-secondary)",
-            padding: 8,
-            textAlign: "center"
+            fontSize: 13
           }
-        }, "Loading context..."), /* @__PURE__ */React__namespace.createElement(ChatInput, {
-          message: message,
-          onMessageChange: this.handleMessageChange,
-          onSubmit: this.handleSubmit,
-          isSending: isSending,
-          lang: lang,
-          setLang: this.setLang,
-          tone: tone,
-          setTone: this.setTone,
-          length: length,
-          setLength: this.setLength,
-          parentRef: this.rootRef,
-          placeholder: "Type a message..."
+        }, "No data"), items.map(function (item, idx) {
+          return /* @__PURE__ */React__namespace.createElement(SummaryItem, {
+            key: idx,
+            item: item
+          });
+        })), filterCount > 0 && /* @__PURE__ */React__namespace.createElement(Pagination, {
+          total: filterCount,
+          page: page,
+          totalPages: totalPages,
+          onChangePage: this.handleChangePage
+        }), /* @__PURE__ */React__namespace.createElement(LanguagePopover, {
+          anchorEl: langAnchor,
+          langList: langList,
+          currentLang: lang,
+          onSelect: this.handleChangeLang,
+          onClose: this.handleCloseLang
         }));
       }
     }]);
   }(React__namespace.Component);
-  var ChatAIDraft = function ChatAIDraft(props) {
-    var _a2 = props,
-      _a2$type = _a2.type,
-      type = _a2$type === void 0 ? "new" : _a2$type,
-      sourceMid = _a2.sourceMid,
-      rest = __objRest(_a2, ["type", "sourceMid"]);
-    if ((type === "reply" || type === "forward") && sourceMid) {
-      return /* @__PURE__ */React__namespace.createElement(ReplyPanel, __spreadValues({
-        type: type,
-        sourceMid: sourceMid
-      }, rest));
-    }
-    return /* @__PURE__ */React__namespace.createElement(CreatePanel, __spreadValues({}, rest));
-  };
-  var LoadingCircular = function LoadingCircular(_ref33) {
-    var _ref33$size = _ref33.size,
-      size = _ref33$size === void 0 ? 40 : _ref33$size,
-      _ref33$color = _ref33.color,
-      color = _ref33$color === void 0 ? "var(--primary-main)" : _ref33$color,
-      _ref33$thickness = _ref33.thickness,
-      thickness = _ref33$thickness === void 0 ? 3.6 : _ref33$thickness;
-    var radius = 20;
-    var circumference = 2 * Math.PI * radius;
-    return /* @__PURE__ */React.createElement("div", {
-      className: "circular-container",
-      style: {
-        width: size,
-        height: size
-      },
-      role: "progressbar"
-    }, /* @__PURE__ */React.createElement("svg", {
-      className: "circular-svg",
-      viewBox: "22 22 44 44"
-    }, /* @__PURE__ */React.createElement("circle", {
-      className: "circular-circle",
-      cx: "44",
-      cy: "44",
-      r: radius,
-      fill: "none",
-      stroke: color,
-      strokeWidth: thickness,
-      strokeDasharray: circumference,
-      style: {
-        strokeDashoffset: circumference * 0.7
-        // Độ dài của thanh loading
-      }
-    })));
-  };
-  var circularSize = {
-    small: 28,
-    medium: 40
-  };
-  var LoadingContainer = function LoadingContainer(_ref34) {
-    var style = _ref34.style,
-      _ref34$fullHeight = _ref34.fullHeight,
-      fullHeight = _ref34$fullHeight === void 0 ? false : _ref34$fullHeight,
-      _ref34$size = _ref34.size,
-      size = _ref34$size === void 0 ? "medium" : _ref34$size,
-      label = _ref34.label;
-    return /* @__PURE__ */React.createElement("div", {
-      style: __spreadValues({
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: "100%",
-        height: fullHeight ? "100%" : 350
-      }, style)
-    }, /* @__PURE__ */React.createElement(LoadingCircular, {
-      size: circularSize[size]
-    }), label && /* @__PURE__ */React.createElement("p", {
-      color: "text.secondary",
-      style: {
-        marginTop: 16,
-        fontSize: size === "small" ? 12 : 13
-      }
-    }, label));
-  };
   exports2.AI_LANG_FLAGS = AI_LANG_FLAGS;
   exports2.ChatAIDraft = ChatAIDraft;
-  exports2.CountryFlag = CountryFlag;
   exports2.LoadingCircular = LoadingCircular;
   exports2.LoadingContainer = LoadingContainer;
-  exports2.Tooltip = Tooltip;
-  exports2.getBaseUrl = getBaseUrl;
-  exports2.getGroupwareUrl = getGroupwareUrl;
+  exports2.Pagination = Pagination;
+  exports2.SummaryAIEmails = SummaryAIEmails;
   exports2.initHanbiroReactSDK = initHanbiroReactSDK;
   Object.defineProperty(exports2, Symbol.toStringTag, {
     value: "Module"