@ebscn/ui 1.0.3-beta.2 → 1.0.3-beta.20

package/cjs/components/alphabet-keyboard/alphabet-keyboard.css

@@ -1,3 +1,39 @@
+:root {
+  --ebscn-color-keyboard-bg: #d3d5d8;
+  --ebscn-color-keyboard-key-bg: #fff;
+  --ebscn-color-keyboard-fckey-bg: #adb3bd;
+  --ebscn-color-keyboard-key-bg-active: #E5E5E5;
+}
+html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-keybord {
+  background: url(../../assets/images/keybord_keybord_dark.png) var(--ebscn-color-keyboard-fckey-bg) no-repeat center;
+  background-size: 25px 25px;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+}
+html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-keybord:active {
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
+}
+html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-delete {
+  background: url(../../assets/images/delete_dark.png) var(--ebscn-color-keyboard-fckey-bg) no-repeat center;
+  background-size: 25px 25px;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+}
+html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-delete:active {
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
+}
+html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-shift {
+  background: url(../../assets/images/keybord_shift_dark.png) var(--ebscn-color-keyboard-fckey-bg) no-repeat center;
+  background-size: 25px 25px;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+}
+html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-shift:active {
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
+}
+html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-shift-big {
+  background: url(../../assets/images/keybord_shift2_dark.png) no-repeat center;
+  background-color: #adb3bd;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  background-size: 25px 25px;
+}
 .ebscn-alphabet-keyboard {
   position: fixed;
   bottom: 0;
@@ -7,35 +43,40 @@
   width: 100%;
   transition: all 0.5s;
   align-content: flex-start;
-  background: #d2d5db;
-}
-.ebscn-alphabet-keyboard-darkkey {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 11.2%;
-  height: 42px;
-  border-radius: 5px;
-  box-shadow: 0px 0.5px 0px 0px #888888;
-  background: #adb3bd;
-  font-size: var(--ebscn-font-size-9);
-}
-.ebscn-alphabet-keyboard-darkkey:active {
-  background: #adb3bd;
+  background-color: #fff;
+  background-color: var(--ebscn-color-keyboard-bg);
 }
 .ebscn-alphabet-keyboard-shift {
   margin-right: 3.73%;
-  background: url(../../assets/images/keybord_shift.png) #adb3bd no-repeat center;
+  background: url(../../assets/images/keybord_shift.png) no-repeat center;
+  background-color: #adb3bd;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
   background-size: 17px 17px;
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
+}
+.ebscn-alphabet-keyboard-shift-big {
+  background: url(../../assets/images/keybord_shift2.png) no-repeat center;
+  background-color: #adb3bd;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  background-size: 25px 25px;
 }
 .ebscn-alphabet-keyboard-delete {
   margin-left: 2.26%;
-  background: url(../../assets/images/delete.png) #adb3bd no-repeat center;
-  background-size: 24px 24px;
+  background: url(../../assets/images/delete.png) no-repeat center;
+  background-color: #adb3bd;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  background-size: 25px 25px;
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
 }
 .ebscn-alphabet-keyboard-keybord {
-  background: url(../../assets/images/keybord_keybord.png) #adb3bd no-repeat center;
-  background-size: 24px 18px;
+  background: url(../../assets/images/keybord_keybord.png) no-repeat center;
+  background-color: #adb3bd;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  background-size: 25px 18px;
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
 }
 .ebscn-alphabet-keyboard-space {
   display: flex;
@@ -43,12 +84,16 @@
   justify-content: center;
   width: 48.4%;
   height: 42px;
-  background: var(--ebscn-color-white);
   border-radius: 5px;
-  box-shadow: 0px 0.5px 0px 0px #888888;
+  font-size: 16px;
+  background-color: #fff;
+  background: var(--ebscn-color-keyboard-key-bg);
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
 }
 .ebscn-alphabet-keyboard-space:active {
-  background: var(--ebscn-color-border);
+  background-color: #e5e5e5;
+  background-color: var(--ebscn-color-keyboard-key-bg-active);
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firstline,
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-secondline,
@@ -57,7 +102,7 @@
   display: flex;
   justify-content: space-between;
   width: 100%;
-  padding-top: 3.2%;
+  padding-top: calc(3% - 1px);
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firstline-key,
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-secondline-key,
@@ -66,39 +111,57 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  flex: 1;
   width: 8.4%;
-  height: 42px;
-  background: var(--ebscn-color-white);
+  height: 40px;
+  background-color: #fff;
+  background: var(--ebscn-color-keyboard-key-bg);
   border-radius: 5px;
-  box-shadow: 0px 0.5px 0px 0px #888888;
   font-size: 23px;
   font-weight: 400;
   text-align: center;
+  color: #333;
   color: var(--ebscn-color-text);
-  margin-right: 1.6%;
+  margin: 0 3px;
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firstline-key:active,
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-secondline-key:active,
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-thirdline-key:active,
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-key:active {
-  background: var(--ebscn-color-border);
+  background-color: #e5e5e5;
+  background-color: var(--ebscn-color-keyboard-key-bg-active);
+}
+.ebscn-alphabet-keyboard-darkkey {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 11.2%;
+  height: 42px;
+  border-radius: 5px;
+  background-color: #adb3bd;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  font-size: var(--ebscn-font-size-9);
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-fckey-border);
 }
-.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firstline {
-  padding-left: 0.8%;
-  padding-right: 0.8%;
+.ebscn-alphabet-keyboard-darkkey:active {
+  background-color: #252525;
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-secondline {
   padding-left: 5.73%;
   padding-right: 5.73%;
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-thirdline {
-  padding-left: 0.8%;
-  padding-right: 0.8%;
+  padding-left: 3px;
+  padding-right: 3px;
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline {
-  padding-left: 0.8%;
-  padding-right: 0.8%;
-  padding-bottom: 1.06%;
+  padding-left: 3px;
+  padding-right: 3px;
+  padding-bottom: 6px;
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-confirm {
   display: flex;
@@ -106,24 +169,26 @@
   justify-content: center;
   width: 23.46%;
   height: 42px;
-  background: var(--ebscn-color-primary);
+  background-color: #e84225;
+  background-color: var(--ebscn-color-primary);
   border-radius: 5px;
-  box-shadow: 0px 0.5px 0px 0px #888888;
   font-size: 16px;
   font-weight: 400;
   text-align: center;
-  color: var(--ebscn-color-white);
+  color: #fff;
   line-height: 22.5px;
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-confirm:active {
-  background-color: #D03B21;
+  background-color: #d13c21;
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline img {
   height: 20%;
 }
 @supports (bottom: env(safe-area-inset-bottom)) or (constant(safe-area-inset-bottom)) {
   .ebscn-alphabet-keyboard {
-    height: calc(216px + env(safe-area-inset-bottom));
-    height: calc(216px + constant(safe-area-inset-bottom));
+    height: calc(223px + env(safe-area-inset-bottom));
+    height: calc(223px + constant(safe-area-inset-bottom));
   }
 }

package/cjs/components/alphabet-keyboard/alphabet-keyboard.js

@@ -114,12 +114,11 @@ function AlphabetKeyboard(p) {
   }, (isBig == false ? thirdKeys : thirdKeysBig).map(function (item, index) {
     return _react.default.createElement("div", {
       key: item || index,
-      className: item == '↑' ? "".concat(classPrefix, "-darkkey ").concat(classPrefix, "-shift") : item == '×' ? "".concat(classPrefix, "-darkkey ").concat(classPrefix, "-delete") : "".concat(classPrefix, "-thirdline-key"),
+      className: item == '↑' && isBig ? "".concat(classPrefix, "-darkkey ").concat(classPrefix, "-shift ").concat(classPrefix, "-shift-big") : item == '↑' ? "".concat(classPrefix, "-darkkey ").concat(classPrefix, "-shift") : item == '×' ? "".concat(classPrefix, "-darkkey ").concat(classPrefix, "-delete") : "".concat(classPrefix, "-thirdline-key"),
       onClick: function () {
         if (visible) {
           onKeyPress(item);
         }
-        ;
       }
     }, imgKeys.includes(item) ? '' : item);
   })), _react.default.createElement("div", {

package/cjs/components/button/selectorButton.css

@@ -3,9 +3,11 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  font-size: 14px;
 }
 .ebscn-selectorbutton-icon {
   margin-left: 4px;
+  font-size: 12px;
   display: flex;
   align-items: center;
   transition: transform 0.5s;

package/cjs/components/button/selectorButton.js

@@ -148,10 +148,6 @@ var SelectorButton = function (p) {
     onClick: handleClick
   }, props.children, _react.default.createElement("div", {
     className: (0, _classnames.default)("".concat(classPrefix, "-icon"), (_a = {}, _a["".concat(classPrefix, "-icon-active")] = props.active && props.autoRotate, _a))
-  }, props.icon ? props.icon : _react.default.createElement(_2.SelectorIcon, {
-    style: {
-      fontSize: '14px'
-    }
-  }))));
+  }, props.icon ? props.icon : _react.default.createElement(_2.SelectorIcon, null))));
 };
 exports.SelectorButton = SelectorButton;

package/cjs/components/card/card.css

@@ -3,7 +3,7 @@
 }
 .ebscn-card-module {
   border-radius: 16px;
-  padding: 16px;
+  padding: 16px 16px;
   margin: 0 0 12px 0;
 }
 .ebscn-card-block {

package/cjs/components/card/card.js

@@ -16,7 +16,7 @@ function Card(props) {
       return null;
     }
     return _react.default.createElement("div", {
-      className: (0, _classnames.default)("".concat(classPrefix, "-header"), "".concat(classPrefix, "-").concat(props.type, "-header"), props.headerClassName),
+      className: (0, _classnames.default)("".concat(classPrefix, "-header"), "".concat(typeClassName, "-header"), props.headerClassName),
       style: props.headerStyle,
       onClick: props.onHeaderClick
     }, _react.default.createElement("div", {
@@ -28,7 +28,7 @@ function Card(props) {
       return null;
     }
     return _react.default.createElement("div", {
-      className: (0, _classnames.default)("".concat(classPrefix, "-body"), "".concat(classPrefix, "-").concat(props.type, "-body"), props.bodyClassName),
+      className: (0, _classnames.default)("".concat(classPrefix, "-body"), "".concat(typeClassName, "-body"), props.bodyClassName),
       style: props.bodyStyle,
       onClick: props.onBodyClick
     }, props.children);

package/cjs/components/checkbox/checkbox.css

@@ -1,11 +1,14 @@
 .ebscn-checkbox {
-  --icon-size: 24px;
+  --icon-size: 20px;
+  --icon-wrap-size: 24px;
   --font-size: var(--ebscn-font-size-8);
   --gap: 12px;
   display: inline-flex;
   vertical-align: text-bottom;
   justify-content: flex-start;
   align-items: center;
+  min-width: var(--icon-wrap-size);
+  min-height: var(--icon-wrap-size);
   cursor: pointer;
 }
 .ebscn-checkbox input {
@@ -17,11 +20,14 @@
   --gap: 9px;
 }
 .ebscn-checkbox .ebscn-checkbox-icon {
+  margin: auto;
   flex: none;
   border-radius: var(--icon-size);
   border: 1px solid var(--ebscn-color-light);
   box-sizing: border-box;
-  width: var(--icon-size);
+  width: 20px;
+  width: var(---icon-size);
+  height: 20px;
   height: var(--icon-size);
   color: var(--ebscn-color-text-light-solid);
 }
@@ -81,7 +87,6 @@
 }
 .ebscn-checkbox .ebscn-checkbox-icon-right-input .ebscn-checkbox-icon.ebscn-checkbox-only-icon {
   margin-right: 16px;
-  height: 100%;
   border-color: transparent;
 }
 .ebscn-checkbox .ebscn-checkbox-icon-right-input .ebscn-checkbox-icon.ebscn-checkbox-only-icon svg {

package/cjs/components/date-range-picker/date-range-picker.css

@@ -3,8 +3,10 @@
   --title-font-size: var(--ebscn-font-size-7);
   --item-font-size: var(--ebscn-font-size-8);
   --item-height: 34px;
+  font-size: 14px;
+  font-size: var(--ebscn-font-size-6);
   width: 100%;
-  height: 350px;
+  height: 385px;
   overflow: hidden;
   position: relative;
   display: flex;
@@ -21,10 +23,10 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 4px 4px;
+  padding: 24px 16px 16px;
 }
 .ebscn-date-range-picker-header-button {
-  font-size: var(--header-button-font-size);
+  font-size: 16px;
   display: inline-block;
   padding: 8px 8px;
 }
@@ -35,30 +37,49 @@
 }
 .ebscn-date-range-picker-header-title {
   padding: 4px 4px;
+  font-size: 18px;
   font-size: var(--ebscn-font-size-10);
   color: #333;
+  color: var(--ebscn-color-text);
   text-align: center;
   flex: 1;
-  font-weight: Medium;
+  font-weight: 500;
 }
 .ebscn-date-range-picker-buttons-wrap {
   display: flex;
+  gap: 10px;
   justify-content: space-evenly;
   margin-top: 12px;
+  padding: 0 16px;
+}
+.ebscn-date-range-picker-buttons-wrap svg {
+  font-size: 18px;
 }
 .ebscn-date-range-picker-buttons-wrap .ebscn-date-range-picker-button {
-  width: 100px;
+  min-width: 75px;
+  max-width: 100px;
+  flex: 1;
   height: 28px;
   line-height: 28px;
   text-align: center;
   background-color: #f8f9fc;
+  background-color: var(--search-box-bg);
   color: #333;
-  border-radius: 10px;
+  color: var(--ebscn-color-text);
+  border-radius: 4px;
+  font-size: 14px;
   font-size: var(--ebscn-font-size-6);
 }
+.ebscn-date-range-picker-buttons-wrap .ebscn-date-range-picker-button-active {
+  color: #e84225;
+  color: var(--ebscn-color-primary);
+  background-color: rgba(232, 66, 37, 0.06);
+}
 .ebscn-date-range-picker-values-wrap {
   display: flex;
+  justify-content: space-between;
   justify-content: center;
+  align-items: center;
   gap: 20px;
   margin-top: 12px;
 }
@@ -70,14 +91,17 @@
   text-align: center;
 }
 .ebscn-date-range-picker-values-wrap .ebscn-date-range-picker-value-active {
-  border-bottom-color: var(--ebscn-color-primary);
+  color: var(--ebscn-color-blue);
+  border-bottom-color: var(--ebscn-color-blue);
 }
 .ebscn-date-range-picker-tip {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 12px;
+  color: #e84225;
   color: var(--ebscn-color-primary);
+  font-size: 14px;
   font-size: var(--ebscn-font-size-6);
 }
 .ebscn-date-range-picker-body {

package/cjs/components/date-range-picker/date-range-picker.d.ts

@@ -40,6 +40,7 @@ export type DateRangePickerProps = {
         value: [PickerDate, PickerDate];
     }>;
 } & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation' | 'forceRender' | 'destroyOnClose'> & NativeProps<'--header-button-font-size' | '--title-font-size' | '--item-font-size' | '--item-height'>;
+export declare function isSameDate(date1: Date, date2: Date): boolean;
 export declare const DateRangePicker: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
     value?: [] | [Date, Date] | undefined;
     defaultValue?: [] | [Date, Date] | undefined;

package/cjs/components/date-range-picker/date-range-picker.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DateRangePicker = void 0;
+exports.isSameDate = isSameDate;
 var _ahooks = require("ahooks");
-var _safeArea = _interopRequireDefault(require("../safe-area"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _react = _interopRequireWildcard(require("react"));
@@ -16,6 +16,7 @@ var _withDefaultProps = require("../../utils/with-default-props");
 var _datePickerView = _interopRequireDefault(require("../date-picker-view"));
 var _pickerUtils = require("../picker/picker-utils");
 var _popup = _interopRequireDefault(require("../popup"));
+var _safeArea = _interopRequireDefault(require("../safe-area"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -147,6 +148,11 @@ var defaultProps = {
   precision: 'day',
   quickButtons: []
 };
+function isSameDate(date1, date2) {
+  var str1 = "".concat(date1.getFullYear(), "-").concat(date1.getMonth(), "-").concat(date1.getDate());
+  var str2 = "".concat(date2.getFullYear(), "-").concat(date2.getMonth(), "-").concat(date2.getDate());
+  return str1 === str2;
+}
 var DateRangePicker = exports.DateRangePicker = (0, _react.memo)((0, _react.forwardRef)(function (p, ref) {
   var _a, _b;
   var _c;
@@ -211,8 +217,10 @@ var DateRangePicker = exports.DateRangePicker = (0, _react.memo)((0, _react.forw
     innerValue = _f[0],
     setInnerValue = _f[1];
   (0, _react.useEffect)(function () {
+    var _a;
     //todo
     setInnerValue(pickerValue);
+    (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, pickerValue);
   }, [visible, pickerValue]);
   var _g = (0, _react.useState)(0),
     activeIndex = _g[0],
@@ -225,7 +233,7 @@ var DateRangePicker = exports.DateRangePicker = (0, _react.memo)((0, _react.forw
     }
   });
   var onQuickClick = function (value) {
-    setInnerValue(value);
+    onChange(value);
   };
   var renderLabel = function (_, value) {
     return value;
@@ -246,32 +254,33 @@ var DateRangePicker = exports.DateRangePicker = (0, _react.memo)((0, _react.forw
     className: "".concat(classPrefix, "-header-title")
   }, props.title), _react.default.createElement("a", {
     role: "button",
-    className: (0, _classnames.default)("".concat(classPrefix, "-header-button"), props.loading && "".concat(classPrefix, "-header-button-disabled")),
+    className: (0, _classnames.default)("".concat(classPrefix, "-header-button"), (props.loading || props.tip) && "".concat(classPrefix, "-header-button-disabled")),
     onClick: function () {
-      if (props.loading) return;
+      if (props.loading || props.tip) return;
       setValue(innerValue, true);
       setVisible(false);
     },
     "aria-disabled": props.loading
-  }, props.confirmText)), props.quickButtons.length && _react.default.createElement("div", {
+  }, props.confirmText)), props.quickButtons.length ? _react.default.createElement("div", {
     className: "".concat(classPrefix, "-buttons-wrap")
-  }, props.quickButtons.map(function (_a) {
+  }, props.quickButtons.map(function (_a, index) {
     var label = _a.label,
       value = _a.value;
     return _react.default.createElement("div", {
+      key: index,
       onClick: function () {
         return onQuickClick(value);
       },
-      className: "".concat(classPrefix, "-button")
+      className: "".concat(classPrefix, "-button ").concat(isSameDate(value[0], innerValue[0]) && isSameDate(value[1], innerValue[1]) ? "".concat(classPrefix, "-button-active") : '')
     }, label);
-  })), _react.default.createElement("div", {
+  })) : null, _react.default.createElement("div", {
     className: "".concat(classPrefix, "-values-wrap")
   }, _react.default.createElement("div", {
     className: (0, _classnames.default)("".concat(classPrefix, "-value"), (_a = {}, _a["".concat(classPrefix, "-value-active")] = activeIndex === 0, _a)),
     onClick: function () {
       return setActiveIndex(0);
     }
-  }, (0, _dayjs.default)(innerValue[0]).format('YYYY-MM-DD')), _react.default.createElement("div", {
+  }, (0, _dayjs.default)(innerValue[0]).format('YYYY-MM-DD')), _react.default.createElement("span", null, "\u81F3"), _react.default.createElement("div", {
     className: (0, _classnames.default)("".concat(classPrefix, "-value"), (_b = {}, _b["".concat(classPrefix, "-value-active")] = activeIndex === 1, _b)),
     onClick: function () {
       return setActiveIndex(1);

package/cjs/components/divider/divider.css

@@ -3,9 +3,10 @@
   align-items: center;
   margin: 16px 0;
   border-width: 0;
-  border-color: var(--color);
+  border-color: var(--ebscn-color-split-line);
   border-style: solid;
-  color: var(--ebscn-color-weak);
+  color: #ebebeb;
+  color: var(--ebscn-color-split-line);
   font-size: 14px;
 }
 .ebscn-divider-left.ebscn-divider-horizontal::before {
@@ -35,5 +36,5 @@
   margin: 0 16px;
   vertical-align: middle;
   border-top: 0;
-  border-left: 1px solid var(--color);
+  border-left: 1px solid var(--ebscn-color-split-line);
 }

package/cjs/components/header/header.css

@@ -3,6 +3,7 @@
   --bgColor: #FFFFFF;
   --subTitleColor: #666666;
   --buttonColor: #666666;
+  --icon-size: 20px;
   display: flex;
   align-items: center;
   height: 44px;
@@ -15,7 +16,11 @@
 .ebscn-header-left,
 .ebscn-header-right {
   flex: 1;
-  font-size: 28px;
+  font-size: 20px;
+  font-size: var(--icon-size);
+}
+.ebscn-header-left-back {
+  padding: 4px;
 }
 .ebscn-header-title {
   flex: auto;
@@ -54,6 +59,7 @@
   display: flex;
   justify-content: flex-end;
   align-items: center;
+  margin-right: 4px;
 }
 .ebscn-header-text-button {
   font-size: 15px;

package/cjs/components/header/header.js

@@ -21,11 +21,13 @@ var Header = function (p) {
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: (0, _classnames.default)(classPrefix)
   }, _react.default.createElement("div", {
-    className: "".concat(classPrefix, "-left"),
+    className: "".concat(classPrefix, "-left")
+  }, props.showLeftIcon && _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-left-back"),
     onClick: function () {
       return props.onLeftClick();
     }
-  }, props.showLeftIcon && _react.default.createElement(_backIcon.default, null), props.left), _react.default.createElement("div", {
+  }, _react.default.createElement(_backIcon.default, null), " "), props.left), _react.default.createElement("div", {
     className: "".concat(classPrefix, "-title")
   }, props.title && _react.default.createElement("div", null, props.title), props.subTitle && _react.default.createElement("div", {
     className: "".concat(classPrefix, "-subtitle")

package/cjs/components/icons/back-icon.js

@@ -18,6 +18,7 @@ var BackIcon = (0, _react.memo)(function (props) {
     width: "1em",
     height: "1em"
   }, _react.default.createElement("path", {
+    fill: "currentColor",
     d: "M361.344 121.392a32 32 0 0 1 45.312 45.216l-334.4 335.136a15.6 15.6 0 0 0 0.032 22.064l334.32 333.536a32 32 0 1 1-45.216 45.312L27.088 569.104a79.6 79.6 0 0 1-0.128-112.56l334.4-335.152z",
     "p-id": "8061"
   })));

package/cjs/components/icons/clear-icon.js

@@ -18,6 +18,7 @@ var ClearIcon = (0, _react.memo)(function (props) {
     width: "1em",
     height: "1em"
   }, _react.default.createElement("path", {
+    fill: "currentColor",
     d: "M512 64c247.424 0 448 200.576 448 448S759.424 960 512 960 64 759.424 64 512 264.576 64 512 64zM342.624 297.376a32 32 0 0 0-45.248 0l-1.872 2.032a32 32 0 0 0 1.872 43.216L466.72 512 297.376 681.376a32 32 0 0 0 0 45.248l2.032 1.872a32 32 0 0 0 43.216-1.872L512 557.248l169.376 169.376a32 32 0 0 0 45.248 0l1.872-2.032a32 32 0 0 0-1.872-43.216L557.248 512l169.376-169.376a32 32 0 0 0 0-45.248l-2.032-1.872a32 32 0 0 0-43.216 1.872L512 466.72z",
     "p-id": "8691"
   })));

package/cjs/components/icons/close-icon.js

@@ -16,7 +16,8 @@ var CloseIcon = (0, _react.memo)(function (props) {
     xmlns: "http://www.w3.org/2000/svg",
     "p-id": "8217",
     width: "1em",
-    height: "1em"
+    height: "1em",
+    fill: "currentColor"
   }, _react.default.createElement("path", {
     d: "M137.376 137.376a32 32 0 0 1 45.248 0l712.768 712.768a32 32 0 1 1-45.248 45.248L137.376 182.624a32 32 0 0 1 0-45.248z",
     "p-id": "8218"