@titaui/pc 1.12.0-beta.1 → 1.12.1

package/lib/components/avatar/name-avatar/index.css

@@ -55,4 +55,5 @@
   font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
   color: #6F7886;
   line-height: 20px;
+  margin-left: 4px;
 }

package/lib/components/avatar/name-avatar/index.js

@@ -58,7 +58,10 @@ var NameAvatar = function NameAvatar(props) {
       onDelUser = props.onDelUser,
       _props$textWidth = props.textWidth,
       textWidth = _props$textWidth === void 0 ? 42 : _props$textWidth,
-      textClass = props.textClass;
+      textClass = props.textClass,
+      renderRightTopCmp = props.renderRightTopCmp,
+      _props$avatarTips = props.avatarTips,
+      avatarTips = _props$avatarTips === void 0 ? '' : _props$avatarTips;
   var hasAvatar = src && !src.match(/default\w*.jpg$/);
 
   var _useState = (0, _react.useState)(false),
@@ -103,7 +106,7 @@ var NameAvatar = function NameAvatar(props) {
       style: {
         width: size.width,
         height: size.width,
-        verticalAlign: "top"
+        verticalAlign: 'top'
       },
       src: src
     });
@@ -120,11 +123,11 @@ var NameAvatar = function NameAvatar(props) {
         }
       }, /*#__PURE__*/_react["default"].createElement("div", {
         style: {
-          display: "inline-block",
+          display: 'inline-block',
           width: "".concat(size.fontSize, "px"),
-          margin: "0 auto",
-          overflow: "hidden",
-          whiteSpace: "nowrap",
+          margin: '0 auto',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
           fontSize: "".concat(size.fontSize, "px"),
           lineHeight: "".concat(size.width, "px")
         }
@@ -134,7 +137,7 @@ var NameAvatar = function NameAvatar(props) {
       })));
     }
 
-    var cuttedName = "";
+    var cuttedName = '';
     var cuttedNameLen = 0;
 
     for (var i = 0, lent = name.length; i < lent; i++) {
@@ -167,11 +170,11 @@ var NameAvatar = function NameAvatar(props) {
     className: "titaui-pc-avator__name-avatar-container",
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+  }, renderRightTopCmp, /*#__PURE__*/_react["default"].createElement("div", {
     onClick: handleDelUser,
     onMouseLeave: handleCloseIconMouseLeave,
     onMouseEnter: handleCloseIconMouseEnter,
-    className: "titaui-pc-avator__delete-wrapper ".concat(canDelUser && mouseIsEnterUser ? "titaui-pc-avator--enter" : ""),
+    className: "titaui-pc-avator__delete-wrapper ".concat(canDelUser && mouseIsEnterUser ? 'titaui-pc-avator--enter' : ''),
     style: {
       left: "".concat(size.width - 14, "px")
     }
@@ -185,7 +188,10 @@ var NameAvatar = function NameAvatar(props) {
     onClick: onClick,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave
-  }, hasAvatar ? renderImgAvatar() : renderTextAvatar()), showNameTips && isNameOverflow ? /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+  }, avatarTips && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    overlay: avatarTips,
+    placement: "top"
+  }, hasAvatar ? renderImgAvatar() : renderTextAvatar()), !avatarTips && (hasAvatar ? renderImgAvatar() : renderTextAvatar())), showNameTips && isNameOverflow ? /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
     overlay: /*#__PURE__*/_react["default"].createElement(_openData.OpenUserName, {
       name: name,
       id: userId
@@ -194,14 +200,17 @@ var NameAvatar = function NameAvatar(props) {
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "titaui-pc-avator__name ".concat(textClass),
     style: {
-      width: textWidth
+      maxWidth: textWidth
     }
   }, /*#__PURE__*/_react["default"].createElement("span", {
     ref: textRef
-  }, name))) : /*#__PURE__*/_react["default"].createElement("span", {
+  }, /*#__PURE__*/_react["default"].createElement(_openData.OpenUserName, {
+    name: name,
+    id: userId
+  })))) : /*#__PURE__*/_react["default"].createElement("span", {
     className: "titaui-pc-avator__name ".concat(textClass),
     style: {
-      width: textWidth
+      maxWidth: textWidth
     }
   }, /*#__PURE__*/_react["default"].createElement("span", {
     ref: textRef

package/lib/components/avatar/text-avatar/index.css

@@ -37,6 +37,6 @@
 
 .titaui-text-avatar--editable:hover {
   cursor: pointer;
-  border-radius: 4px;
-  border-color: #e9ecf0;
+  border-radius: 8px;
+  border-color: #dfe3ea;
 }

package/lib/components/avatar/text-avatar/index.js

@@ -41,7 +41,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var preCls = "titaui-text-avatar";
+var preCls = 'titaui-text-avatar';
 
 function TextAvatar(props) {
   var name = props.name,
@@ -54,7 +54,7 @@ function TextAvatar(props) {
       _props$isGetRoot = props.isGetRoot,
       isGetRoot = _props$isGetRoot === void 0 ? false : _props$isGetRoot,
       _props$extraCls = props.extraCls,
-      extraCls = _props$extraCls === void 0 ? "" : _props$extraCls,
+      extraCls = _props$extraCls === void 0 ? '' : _props$extraCls,
       _props$nameTips = props.nameTips,
       nameTips = _props$nameTips === void 0 ? function (name) {
     return name;
@@ -83,7 +83,7 @@ function TextAvatar(props) {
   }; // 非编辑态，不可以弹出选人组件
 
 
-  var FieldPerson = editable ? _userSelector["default"] : "span";
+  var FieldPerson = editable ? _userSelector["default"] : 'span';
 
   var renderAvatar = function renderAvatar() {
     if (showAvatar) {
@@ -91,7 +91,7 @@ function TextAvatar(props) {
         className: "".concat(preCls, "__img")
       }, /*#__PURE__*/_react["default"].createElement(_default2["default"], {
         userId: id,
-        src: avatar !== null && avatar !== void 0 && avatar.HasAvatar || avatar !== null && avatar !== void 0 && avatar.hasAvatar ? avatar.medium : "",
+        src: avatar !== null && avatar !== void 0 && avatar.HasAvatar || avatar !== null && avatar !== void 0 && avatar.hasAvatar ? avatar.medium : '',
         color: avatar === null || avatar === void 0 ? void 0 : avatar.color,
         name: name,
         size: {
@@ -132,7 +132,7 @@ function TextAvatar(props) {
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: (0, _classnames["default"])(preCls, extraCls, _defineProperty({}, "".concat(preCls, "--editable"), editable)),
     style: {
-      maxWidth: width
+      width: width
     }
   }, renderAvatar(), /*#__PURE__*/_react["default"].createElement("span", {
     ref: text,
@@ -143,7 +143,7 @@ function TextAvatar(props) {
   })))), !showTooltip && /*#__PURE__*/_react["default"].createElement("span", {
     className: (0, _classnames["default"])(preCls, extraCls, _defineProperty({}, "".concat(preCls, "--editable"), editable)),
     style: {
-      maxWidth: width
+      width: width
     }
   }, renderAvatar(), /*#__PURE__*/_react["default"].createElement("span", {
     ref: text,

package/lib/components/button/images/blue.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>椭圆形</title>
+    <defs>
+        <pattern id="pattern-1" width="100%" height="100%" patternUnits="objectBoundingBox">
+            <use xlink:href="#image-2"></use>
+        </pattern>
+        <image id="image-2" width="14" height="14" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAADqADAAQAAAABAAAADgAAAAC98Dn6AAABo0lEQVQoFTWSwU7kMBBEq912WAYhJEba6+6BAwjxhfwcH8MVBJdhiGOb145IlHTHruqqbscense/WtW2oW3p2vq11vOn6uur1vs7nSWtY6jKtJoETJsNtVRX5VLkyyJvprSe5f0G2O81NMzUAkyBGdnaspsyZJVFsqThVd26XI+QzxoDkiAApq42YkW1Zb5yctnaZEuRTisKDcAHxCM5oADPB7tTNYhULwDdXD660uEKFL3+/+B7V8EPBOmbIlEAiSCaFpIed5fyoAg9y//OwVRsfgE+EaPAJJGPDGlR9IZ7euz4+kPPl9EzRd4BvwGMqTZUodA3i1MRgDEOg2UMKymrYPuJ/RdAt+wWbDokm3cQeTgIpSSlaXUHHfB9TKY3CCFxCDKTco7FibZbhYRq5OHgArUDsaBQAZ3I6QOBwdqu7JkKAXA2Mz1GfoHZwno46MSYKB3MK841XLbcIUKiQ82cxcyEM0CLYUHcz5FCoYzt+JNQ3AfkYRXgTmJA0QcF4g/gPcnx19gksxxgp4pHRD0sJaxxQBCNd9jlIY/jwEC0K/0AOvvST1WxS68AAAAASUVORK5CYII="></image>
+    </defs>
+    <g id="2、按钮" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="线性按钮Bottun" transform="translate(-881.000000, -339.000000)" fill="url(#pattern-1)" fill-rule="nonzero">
+            <g id="6" transform="translate(30.000000, 248.000000)">
+                <g id="编组-7" transform="translate(287.000000, 40.000000)">
+                    <g id="编组-8" transform="translate(548.000000, 40.000000)">
+                        <path d="M23,11 C26.8659932,11 30,14.1340068 30,18 C30,21.8659932 26.8659932,25 23,25 C19.1340068,25 16,21.8659932 16,18 C16,14.1340068 19.1340068,11 23,11 Z M23,12.2 C19.7967485,12.2 17.2,14.7967485 17.2,18 C17.2,21.2032515 19.7967485,23.8 23,23.8 C26.2032515,23.8 28.8,21.2032515 28.8,18 C28.8,14.7967485 26.2032515,12.2 23,12.2 Z" id="椭圆形"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/lib/components/button/images/red.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>椭圆形</title>
+    <defs>
+        <pattern id="pattern-1" width="100%" height="100%" patternUnits="objectBoundingBox">
+            <use xlink:href="#image-2"></use>
+        </pattern>
+        <image id="image-2" width="14" height="14" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAADqADAAQAAAABAAAADgAAAAC98Dn6AAABx0lEQVQoFT2SQW7bQAxFSQ4l2YabhbtJgQA5Qc/RE3ST03bXO2TVRXdpArSL2JrRDPsoFDUwHor8n5/8kl6fnh7fVftS6/bHfftkVn/W2r6L1C+Hwy1Ua4g043lEbKq6iUi3tXc/RRQ7HssHd/tN/HC76VeqECT4KcAE/z80sDZNvnJ029xac4P4S7XIy4uKKoK6E1DrqUaTlrcfUIzetZaiMy3fzcIvl03u71Wu1xRNQqNJg1QZoJPsxtATQ89b70tzX85jzE7ux/Nz2UkJ5jDzCqmSq7mv8zeH+6Aw+hiupRRfVznf3d1SBdIVAv5pklO98xyu7rP2HmmVlzLY5bCaHc/ns6wib4Bfc9R/BgXPkfM7wFxNMUXHGGDU+E3N7LNGfEP1Qn2KMQoxfLBJpDgLyCTkqAmieiL+SO6Veoqc9jxuD5FCTh3QTMVQc/j4ogvxifwEuEHK/QjxIiKb7mRc2QEFU7LJxOgLwIk9jIY5e76CkmRy+TE4dvdUmACUTKA0sWHezp06A3AnTmXL3Wgcw6x47oWbhYSzfJqVyqmmTCPsM8h3zoZBureDvJOo58tO1bKPiFHEcHDGbH/HfHs9HeTOgvwFtVIeevLXjdUAAAAASUVORK5CYII="></image>
+    </defs>
+    <g id="2、按钮" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="线性按钮Bottun" transform="translate(-881.000000, -547.000000)" fill="url(#pattern-1)" fill-rule="nonzero">
+            <g id="6" transform="translate(30.000000, 248.000000)">
+                <g id="编组-7" transform="translate(287.000000, 40.000000)">
+                    <g id="编组-8" transform="translate(548.000000, 248.000000)">
+                        <path d="M23,11 C26.8659932,11 30,14.1340068 30,18 C30,21.8659932 26.8659932,25 23,25 C19.1340068,25 16,21.8659932 16,18 C16,14.1340068 19.1340068,11 23,11 Z M23,12.2 C19.7967485,12.2 17.2,14.7967485 17.2,18 C17.2,21.2032515 19.7967485,23.8 23,23.8 C26.2032515,23.8 28.8,21.2032515 28.8,18 C28.8,14.7967485 26.2032515,12.2 23,12.2 Z" id="椭圆形"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/lib/components/button/images/white.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>椭圆形</title>
+    <defs>
+        <pattern id="pattern-1" width="100%" height="100%" patternUnits="objectBoundingBox">
+            <use xlink:href="#image-2"></use>
+        </pattern>
+        <image id="image-2" width="14" height="14" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAADqADAAQAAAABAAAADgAAAAC98Dn6AAAA+UlEQVQoFVXSSVLDQBBEUQkzL+EAnID7b7kQLBltRL4OpaOpiB+tkjNraGvdtu1pWZZTOO585/wJzs/9bF7N6TI/QGzhNxwCQcN7hWeOs5FwNq97/s+Qd7qfOxJBMOs4G4k77iik41UwHi6CYJQT2RVfYXTLOTpe58FuUIhBuBjCj/AemDv2RshoPMF8G+4kibfwGtqJbmhr7I5O4xr/ObyEh9B1qhuj6UiM7nyf58egm5DXbJW1HWuS30xCI9pPaHA2t4MqfWYkUMzOLqUXZj+6cautUqMT9mF0kzorJJgPFbVjcyJGUXM/Cu/G38E0w1Sj6ow1t9jyBy9lWT02rrfMAAAAAElFTkSuQmCC"></image>
+    </defs>
+    <g id="2、按钮" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="面性按钮Bottun" transform="translate(-909.000000, -339.000000)" fill="url(#pattern-1)" fill-rule="nonzero">
+            <g id="6" transform="translate(30.000000, 248.000000)">
+                <g id="编组-7" transform="translate(209.000000, 40.000000)">
+                    <path d="M677,51 C680.865993,51 684,54.1340068 684,58 C684,61.8659932 680.865993,65 677,65 C673.134007,65 670,61.8659932 670,58 C670,54.1340068 673.134007,51 677,51 Z M677,52.2 C673.796748,52.2 671.2,54.7967485 671.2,58 C671.2,61.2032515 673.796748,63.8 677,63.8 C680.203252,63.8 682.8,61.2032515 682.8,58 C682.8,54.7967485 680.203252,52.2 677,52.2 Z" id="椭圆形"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/lib/components/button/rect-btn/index.css

@@ -13,7 +13,7 @@
   align-items: center;
   justify-content: center;
   min-width: 64px;
-  font-size: 13px;
+  font-size: 14px;
   padding: 0 12px;
 }
 
@@ -60,21 +60,35 @@
   background: #5c8eff;
 }
 
+.titaui-rect-btn--secondary {
+  font-size: 14px;
+  font-weight: normal;
+  color: #2879ff;
+  line-height: 28px;
+  background: rgba(40, 121, 255, 0.2);
+  margin-right: 16px;
+}
+
+.titaui-rect-btn--secondary:hover {
+  color: #fff;
+  background-color: #2879ff;
+}
+
 .titaui-rect-btn--cancel {
-  color: #6F7886;
-  border: 1px solid #DFE3EA;
-  background: #FFFFFF;
+  color: #6f7886;
+  border: 1px solid #dfe3ea;
+  background: #ffffff;
 }
 
 .titaui-rect-btn--cancel:hover {
-  color: #2879FF;
-  border: 1px solid #2879FF;
+  color: #2879ff;
+  border: 1px solid #2879ff;
 }
 
 .titaui-rect-btn--delete {
-  background: #FFFFFF;
-  color: #F05E5E;
-  border: 1px solid #F05E5E;
+  background: #ffffff;
+  color: #f05e5e;
+  border: 1px solid #f05e5e;
 }
 
 .titaui-rect-btn--delete:hover {
@@ -92,11 +106,31 @@
   user-select: none;
 }
 
+.titaui-rect-btn--disabled:hover .titaui-rect-btn--default:hover {
+  background: #fff;
+}
+
+.titaui-rect-btn--disabled:hover .titaui-rect-btn--primary:hover {
+  background: #2879ff;
+}
+
+.titaui-rect-btn--disabled:hover .titaui-rect-btn--secondary:hover {
+  background: rgba(40, 121, 255, 0.2);
+}
+
+.titaui-rect-btn--disabled:hover .titaui-rect-btn--cancel:hover {
+  background: #ffffff;
+}
+
+.titaui-rect-btn--disabled:hover .titaui-rect-btn--delete:hover {
+  background: #ffffff;
+}
+
 .titaui-rect-btn--primary.titaui-rect-btn--disabled {
-  background: #93BCFF;
+  background: #93bcff;
   opacity: 1;
 }
 
 .titaui-rect-btn--primary.titaui-rect-btn--disabled:hover {
-  background: #93BCFF;
+  background: #93bcff;
 }

package/lib/components/button/rect-btn/index.js

@@ -34,7 +34,10 @@ function RectBtn(props) {
       className = _props$className === void 0 ? '' : _props$className,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
-      style = props.style;
+      _props$loading = props.loading,
+      loading = _props$loading === void 0 ? false : _props$loading,
+      style = props.style,
+      children = props.children;
 
   var renderIcon = function renderIcon() {
     if (typeof icon === 'string') {
@@ -50,16 +53,19 @@ function RectBtn(props) {
     }, icon);
   };
 
-  var onClickHandler = function onClickHandler() {
-    if (disabled) return;
-    onClick && onClick();
+  var onClickHandler = function onClickHandler(e) {
+    if (disabled || loading) return;
+
+    if (onClick) {
+      onClick(e);
+    }
   };
 
   return /*#__PURE__*/_react["default"].createElement("span", {
-    className: (0, _classnames["default"])(precls, "".concat(precls, "--").concat(type), "".concat(precls, "--").concat(size), _defineProperty({}, "".concat(precls, "--disabled"), disabled), className),
+    className: (0, _classnames["default"])(precls, "".concat(precls, "--").concat(type), "".concat(precls, "--").concat(size), _defineProperty({}, "".concat(precls, "--disabled"), disabled || loading), className),
     style: style,
     onClick: onClickHandler
-  }, icon && renderIcon(), props.children || text);
+  }, icon && renderIcon(), children || text);
 }
 
 var _default = RectBtn;

package/lib/components/change-okr-modal/index.js

@@ -504,7 +504,7 @@ var _initialiseProps = function _initialiseProps() {
 
   this.getListData = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(isLoading) {
-      var _this4$state2, keywords, type, users, departments, data, nextPage, toUserId, _this4$state3, status, cycle, year, okrPopType, url;
+      var _this4$state2, keywords, type, users, departments, data, nextPage, toUserId, _this4$state3, status, cycle, year, _this4$props2, okrPopType, _this4$props2$include, includeCreateFailApprovalOkr, url;
 
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -520,7 +520,7 @@ var _initialiseProps = function _initialiseProps() {
             case 2:
               _this4$state2 = _this4.state, keywords = _this4$state2.keywords, type = _this4$state2.type, users = _this4$state2.users, departments = _this4$state2.departments, data = _this4$state2.data, nextPage = _this4$state2.nextPage, toUserId = _this4$state2.toUserId;
               _this4$state3 = _this4.state, status = _this4$state3.status, cycle = _this4$state3.cycle, year = _this4$state3.year;
-              okrPopType = _this4.props.okrPopType;
+              _this4$props2 = _this4.props, okrPopType = _this4$props2.okrPopType, _this4$props2$include = _this4$props2.includeCreateFailApprovalOkr, includeCreateFailApprovalOkr = _this4$props2$include === void 0 ? false : _this4$props2$include;
               cycle = cycle || '-1';
               year = year || -1;
               status = status || 0;
@@ -564,7 +564,8 @@ var _initialiseProps = function _initialiseProps() {
                 }).join(','),
                 searchKr: okrPopType,
                 // 是否搜索KR：默认为0-不搜索，1-只有对齐目标弹层可以搜索KR
-                toUserId: toUserId
+                toUserId: toUserId,
+                includeCreateFailApprovalOkr: includeCreateFailApprovalOkr
               }).then(function (res) {
                 _this4.pending = false;
                 var resData = res && res.Data && res.Data.works || [];
@@ -629,9 +630,9 @@ var _initialiseProps = function _initialiseProps() {
     var _this4$state4 = _this4.state,
         selected = _this4$state4.selected,
         selectOkr = _this4$state4.selectOkr;
-    var _this4$props2 = _this4.props,
-        onConfirm = _this4$props2.onConfirm,
-        parentId = _this4$props2.parentId;
+    var _this4$props3 = _this4.props,
+        onConfirm = _this4$props3.onConfirm,
+        parentId = _this4$props3.parentId;
     var parentType = selected && selected.mileStoneId ? 2 : 1; // 临时注入
 
     var data = _objectSpread(_objectSpread({}, selected), {}, {

package/lib/components/checkbox/index.css

@@ -2,19 +2,23 @@
   display: inline-block;
   width: 16px;
   height: 16px;
-  background: #FFFFFF;
+  background: #ffffff;
   border-radius: 4px;
-  border: 1px solid #DFE3EA;
+  border: 1px solid #bfc7d5;
   cursor: pointer;
   box-sizing: border-box;
 }
 
+.titaui-checkbox:hover {
+  border: 1px solid #2879ff;
+}
+
 .titaui-checkbox--checked {
   background: url(./checked.svg) transparent no-repeat 50% 50%;
   border: none;
 }
 
 .titaui-checkbox--disabled {
-  background-color: #F0F2F5;
+  background-color: #f0f2f5;
   cursor: not-allowed;
 }

package/lib/components/contact-kefu/index.css

@@ -0,0 +1,95 @@
+.contact-kefu {
+  position: relative;
+  height: 100vh;
+  background: #f0f4fa;
+  overflow: hidden;
+}
+
+.contact-kefu__kefu {
+  position: absolute;
+  bottom: 74px;
+  right: 24px;
+  z-index: 2;
+}
+
+.contact-kefu__try-kefu {
+  position: absolute;
+  bottom: 134px;
+  right: 24px;
+  z-index: 2;
+}
+
+.contact-kefu__kefu {
+  width: 42px;
+  height: 42px;
+  background: url("./img/kefu.svg") no-repeat;
+  background-color: #fff;
+  background-size: 42px;
+  box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);
+  cursor: pointer;
+  border-radius: 50%;
+}
+
+.contact-kefu__hidden {
+  background-image: none;
+}
+
+.contact-kefu__cancel {
+  height: 100%;
+  background: url("./img/canceled.svg") 50% 50% no-repeat;
+  animation-duration: 0.3s;
+  animation-name: kefuActive;
+}
+
+.contact-kefu__popup {
+  width: 332px;
+  height: 376px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: #ffffff;
+  box-shadow: 0px 8px 24px 0px rgba(127, 145, 180, 0.16);
+  border-radius: 24px;
+}
+
+.contact-kefu__popup-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #141c28;
+  line-height: 30px;
+}
+
+.contact-kefu__popup-content {
+  margin-top: 4px;
+  font-size: 14px;
+  font-weight: normal;
+  color: #6f7886;
+  line-height: 22px;
+}
+
+.contact-kefu__popup-img {
+  width: 200px;
+  height: 200px;
+  margin-top: 24px;
+}
+
+@keyframes contentOpacity {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes kefuActive {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(-90deg);
+  }
+}