@ebscn/ui 1.0.3-beta.3 → 1.0.3-beta.30

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

@@ -1,111 +1,170 @@
+html[data-prefers-color-scheme='dark'] .ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-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-stock-keyboard-bottom .ebscn-stock-keyboard-right-delete:active {
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
+}
 .ebscn-stock-keyboard {
   transform: translateY(101%);
-  display: flex;
   position: fixed;
   bottom: 0;
+  left: 0;
   flex-direction: row;
+  z-index: 999;
   width: 100%;
-  height: 216px;
+  height: 262px;
   transition: all 0.5s;
   align-content: flex-start;
+  background-color: #fff;
+  background-color: var(--ebscn-color-keyboard-bg);
+}
+.ebscn-stock-keyboard-top {
+  padding: 11px 19px 6px 11px;
+  background-color: #fff;
+  background-color: var(--ebscn-color-background);
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+  font-size: var(--ebscn-font-size-8);
+}
+.ebscn-stock-keyboard-top-item {
+  margin-right: 24px;
+  padding-bottom: 2px;
+  color: #666;
+  color: var(--ebscn-color-text-secondary);
+  line-height: 21px;
+  border-bottom: 2px solid transparent;
+}
+.ebscn-stock-keyboard-top-item-active {
+  color: #e84225;
+  color: var(--ebscn-color-primary);
+  position: relative;
+}
+.ebscn-stock-keyboard-top-item-active::after {
+  content: "";
+  position: absolute;
+  bottom: -2px;
+  left: 8px;
+  width: 14px;
+  /* 固定宽度 */
+  height: 2px;
+  background: var(--ebscn-color-primary);
+  border-radius: 1px;
 }
-.ebscn-stock-keyboard .ebscn-stock-keyboard-right {
+.ebscn-stock-keyboard-bottom {
+  display: flex;
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right {
+  background-color: #d3d5d8;
+  background-color: var(--ebscn-color-keyboard-bg);
   display: flex;
   flex-wrap: wrap;
   width: 80%;
-  height: 216px;
+  height: 223px;
   transition: all 0.5s;
   align-content: flex-start;
 }
-.ebscn-stock-keyboard .ebscn-stock-keyboard-right :last-child {
-  background: var(--ebscn-color-primary);
-  color: var(--ebscn-color-white);
-}
-.ebscn-stock-keyboard .ebscn-stock-keyboard-right-key {
-  width: 25%;
-  height: 54px;
-  line-height: 54px;
-  text-align: center;
-  font-size: 24px;
-  color: #000000;
-  font-weight: 300;
-  box-shadow: 0 0 0 1px var(--ebscn-color-light);
-  background: var(--ebscn-color-white);
-}
-.ebscn-stock-keyboard .ebscn-stock-keyboard-right-key:active {
-  width: 25%;
-  height: 54px;
-  line-height: 54px;
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right :last-child {
+  background-color: #e84225;
+  background-color: var(--ebscn-color-primary);
+  color: #fff;
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-key {
+  width: calc(25% - 8.5px);
+  margin: 6px 3px 0 3px;
+  border-radius: 4px;
+  height: 46px;
+  line-height: 46px;
   text-align: center;
-  font-size: 24px;
-  color: #000000;
-  font-weight: 300;
-  box-shadow: 0 0 0 1px var(--ebscn-color-light);
-  background: var(--ebscn-color-border);
-}
-.ebscn-stock-keyboard .ebscn-stock-keyboard-right-option {
+  font-weight: 400;
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
+  color: #333;
+  color: var(--ebscn-color-text);
+  font-size: 23px;
+  background-color: #fff;
+  background-color: var(--ebscn-color-keyboard-key-bg);
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-key:active {
+  background-color: #e5e5e5;
+  background-color: var(--ebscn-color-keyboard-key-bg-active);
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-option {
+  font-size: 19px;
   font-size: var(--ebscn-font-size-11);
-  background: #e1e3e8;
-}
-.ebscn-stock-keyboard .ebscn-stock-keyboard-right-option:active {
+  color: #333;
+  color: var(--ebscn-color-text);
+  background-color: #adb3bd;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  border-color: var(--ebscn-color-keyboard-fckey-border);
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-option:active {
+  background-color: #252525;
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-delete {
+  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-color: var(--ebscn-color-keyboard-fckey-border);
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-delete:active {
+  background: url(../../assets/images/delete.png) no-repeat center;
+  background-color: #252525;
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
+  background-size: 25px 25px;
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-confirmKey {
+  font-size: 19px;
   font-size: var(--ebscn-font-size-11);
-  background: #CACBD0;
-}
-.ebscn-stock-keyboard .ebscn-stock-keyboard-right-delete {
-  background: url(../../assets/images/delete.png) #e1e3e8 no-repeat center;
-  background-size: 24px 24px;
-}
-.ebscn-stock-keyboard .ebscn-stock-keyboard-right-delete:active {
-  background: url(../../assets/images/delete.png) #CACBD0 no-repeat center;
-  background-size: 24px 24px;
-}
-.ebscn-stock-keyboard .ebscn-stock-keyboard-right-header {
-  padding-top: 24px;
-  padding-bottom: 16px;
-  font-size: var(--ebscn-font-size-10);
-  color: #333333;
-  text-align: center;
-  font-weight: 500;
-}
-.ebscn-stock-keyboard .ebscn-stock-keyboard-right-confirmKey {
+  width: calc(25% - 7.5px);
+  background-color: #e84225;
   background-color: var(--ebscn-color-primary);
-  width: 25%;
-  height: 54px;
-  line-height: 54px;
-  text-align: center;
-  font-size: var(--ebscn-font-size-11);
-  color: #000000;
-  font-weight: 300;
-  box-shadow: 0 0 0 1px var(--ebscn-color-light);
+  border-color: var(--ebscn-color-keyboard-fckey-border);
 }
-.ebscn-stock-keyboard .ebscn-stock-keyboard-right-confirmKey:active {
-  background-color: #D03B21;
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-confirmKey:active {
+  background-color: #d13c21;
+  color: #fff;
   color: var(--ebscn-color-white);
 }
-.ebscn-stock-keyboard .ebscn-stock-keyboard-left {
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-right-bottom-option {
+  font-size: 19px;
+  font-size: var(--ebscn-font-size-11);
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-left {
   width: 20%;
-  height: 216px;
+  background-color: #d3d5d8;
+  background-color: var(--ebscn-color-keyboard-bg);
 }
-.ebscn-stock-keyboard .ebscn-stock-keyboard-left-key {
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-left-key {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 20%;
+  border-radius: 4.17px;
+  height: 46px;
+  margin: 6px 3px 6px 6px;
+  font-size: 18px;
   font-size: var(--ebscn-font-size-10);
   font-weight: 400;
   text-align: center;
-  color: #333333;
-  line-height: 25px;
-  box-shadow: 0 0 0 1px var(--ebscn-color-light);
-  background: #e1e3e8;
-}
-.ebscn-stock-keyboard .ebscn-stock-keyboard-left-key:active {
-  font-size: 18px;
-  background: #CACBD0;
+  color: #333;
+  color: var(--ebscn-color-text);
+  line-height: 46px;
+  background-color: #adb3bd;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-fckey-border);
+}
+.ebscn-stock-keyboard-bottom .ebscn-stock-keyboard-left-key:active {
+  background-color: #252525;
+  background: var(--ebscn-color-keyboard-fckey-bg-active);
 }
 @supports (bottom: env(safe-area-inset-bottom)) or (constant(safe-area-inset-bottom)) {
   .ebscn-stock-keyboard {
-    height: calc(216px + env(safe-area-inset-bottom));
-    height: calc(216px + constant(safe-area-inset-bottom));
+    height: calc(262px + env(safe-area-inset-bottom));
+    height: calc(262px + constant(safe-area-inset-bottom));
   }
 }

package/cjs/components/stock-keyboard/stock-keyboard.d.ts

@@ -3,10 +3,10 @@ import { NativeProps } from '../../utils/native-props';
 export type StockKeyboardProps = {
     visible?: boolean;
     onInput: Function;
-    onChangeKeyBoard: Function;
     onDelete: Function;
     onClose: Function;
     onClean: Function;
-    onConfirm?: Function;
+    onConfirm: Function;
+    onSelectCN: Function;
 } & NativeProps;
 export declare function StockKeyboard(p: StockKeyboardProps): JSX.Element;

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

@@ -8,6 +8,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _nativeProps = require("../../utils/native-props");
 var _withDefaultProps = require("../../utils/with-default-props");
+var _alphabetKeyboard = require("./alphabet-keyboard");
 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 }; }
@@ -24,13 +25,15 @@ function StockKeyboard(p) {
     onClose = props.onClose,
     onClean = props.onClean,
     onConfirm = props.onConfirm,
-    onChangeKeyBoard = props.onChangeKeyBoard;
-  var keys = [1, 2, 3, 'X', 4, 5, 6, '清除', 7, 8, 9, '隐藏', 'ABC', 0, '', '确定'];
-  var leftKeys = ['600', '601', '000', '002', '300'];
+    onSelectCN = props.onSelectCN;
+  var keys = [1, 2, 3, 'X', 4, 5, 6, '清除', 7, 8, 9, '隐藏', 'ABC', 0, '002', '确定'];
+  var leftKeys = ['600', '601', '000', '300'];
   var hideTimer = (0, _react.useRef)(null);
   var appearTimer = (0, _react.useRef)(null);
   var lastVisible = (0, _react.useRef)(null);
-  var keyFlag = (0, _react.useRef)(0);
+  var _a = (0, _react.useState)(1),
+    keyboardType = _a[0],
+    setKeyboardType = _a[1];
   (0, _react.useEffect)(function () {
     if (!visible) {
       if (lastVisible.current) {
@@ -70,7 +73,9 @@ function StockKeyboard(p) {
       case '确定':
         return onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
       case 'ABC':
-        return onChangeKeyBoard === null || onChangeKeyBoard === void 0 ? void 0 : onChangeKeyBoard();
+        setKeyboardType(2);
+        return;
+      //return onChangeKeyBoard?.()
       default:
         return onInput === null || onInput === void 0 ? void 0 : onInput(key);
     }
@@ -79,29 +84,56 @@ function StockKeyboard(p) {
     ref: keyboardRef,
     className: "".concat(classPrefix)
   }, _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-top")
+  }, _react.default.createElement("div", {
+    onClick: function () {
+      return setKeyboardType(1);
+    },
+    className: "".concat(classPrefix, "-top-item ").concat(keyboardType === 1 ? "".concat(classPrefix, "-top-item-active") : '')
+  }, "123"), _react.default.createElement("div", {
+    onClick: function () {
+      return setKeyboardType(2);
+    },
+    className: "".concat(classPrefix, "-top-item ").concat(keyboardType === 2 ? "".concat(classPrefix, "-top-item-active") : '')
+  }, "ABC"), _react.default.createElement("div", {
+    onClick: function () {
+      return onSelectCN();
+    },
+    className: "".concat(classPrefix, "-top-item")
+  }, "\u4E2D\u6587")), keyboardType === 1 ? _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-bottom")
+  }, ' ', _react.default.createElement("div", {
     className: "".concat(classPrefix, "-left")
   }, leftKeys.map(function (item, index) {
     return _react.default.createElement("div", {
       key: item || index,
       className: "".concat(classPrefix, "-left-key"),
-      onClick: function () {
+      onTouchStart: function () {
         if (visible) {
           onKeyPress(item);
         }
       }
     }, item !== 'X' ? item : '');
   })), _react.default.createElement("div", {
-    ref: keyboardRef,
     className: "".concat(classPrefix, "-right")
   }, keys.map(function (item, index) {
     return _react.default.createElement("div", {
       key: item || index,
-      className: (0, _classnames.default)(item !== '确定' ? "".concat(classPrefix, "-right-key") : "".concat(classPrefix, "-right-confirmKey"), typeof item !== 'number' && item.length && item !== '.' && item !== '确定' ? "".concat(classPrefix, "-right-option") : item == '确定' ? "".concat(classPrefix, "-right-confirmKey") : "".concat(classPrefix, "-right-number-key"), item === 'X' && "".concat(classPrefix, "-right-delete")),
-      onClick: function () {
+      className: (0, _classnames.default)("".concat(classPrefix, "-right-key"), item !== '确定' ? '' : "".concat(classPrefix, "-right-key ").concat(classPrefix, "-right-confirmKey"), item === 'ABC' || item === '002' ? "".concat(classPrefix, "-right-bottom-option") : '', typeof item !== 'number' && item !== 'ABC' && item !== '002' && item.length && item !== '.' && item !== '确定' ? "".concat(classPrefix, "-right-option") : item == '确定' ? "".concat(classPrefix, "-right-confirmKey") : "".concat(classPrefix, "-right-number-key"), item === 'X' && "".concat(classPrefix, "-right-delete")),
+      onTouchStart: function () {
         if (visible) {
           onKeyPress(item);
         }
       }
     }, item !== 'X' ? item : '');
-  }))));
+  }))) : _react.default.createElement(_alphabetKeyboard.AlphabetKeyboard, {
+    visible: true,
+    onConfirm: onConfirm,
+    onDelete: onDelete,
+    onClose: onClose,
+    onInput: onInput,
+    onChangeKeyBoard: function () {
+      return setKeyboardType(1);
+    }
+  })));
 }

package/cjs/components/switch/switch.css

@@ -44,7 +44,7 @@
   height: calc(var(--height) - 2 * var(--border-width));
   border-radius: calc(var(--height) - 2 * var(--border-width));
   box-sizing: border-box;
-  background: #E9E9EA;
+  background: #d8d8d8;
   z-index: 1;
   transition: all 200ms;
   transform: scale(1);
@@ -62,7 +62,6 @@
   top: var(--border-width);
   left: var(--border-width);
   transition: all 200ms;
-  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2), 0 2px 11.5px 0 rgba(0, 0, 0, 0.08), -1px 2px 2px 0 rgba(0, 0, 0, 0.1);
   color: var(--ebscn-color-primary);
 }
 .ebscn-switch-inner {
@@ -95,7 +94,7 @@
   opacity: 0.4;
 }
 .ebscn-switch.ebscn-switch-disabled:before {
-  background-color: #f4f4f4;
+  background-color: #e9e9ea;
 }
 .ebscn-switch-spin-icon {
   width: 14px;

package/cjs/components/tabs/tabs.css

@@ -10,9 +10,9 @@
 }
 .ebscn-tabs-header {
   position: relative;
-  border-bottom: solid 1px var(--ebscn-color-border);
 }
 .ebscn-tabs-tab-list {
+  padding: 0 6px;
   display: flex;
   flex-wrap: nowrap;
   justify-content: flex-start;
@@ -25,22 +25,24 @@
   display: none;
 }
 .ebscn-tabs-tab-wrapper {
-  padding: 0 12px;
+  padding: 0 10px;
 }
 .ebscn-tabs-tab-wrapper-stretch {
   flex: auto;
 }
 .ebscn-tabs-tab {
   white-space: nowrap;
-  padding: 8px 0 10px;
+  padding: 8px 0 5px;
   width: -webkit-min-content;
   width: min-content;
   margin: 0 auto;
-  font-size: var(--title-font-size);
+  font-size: 16px;
   position: relative;
   cursor: pointer;
+  color: var(--ebscn-color-text-secondary);
 }
 .ebscn-tabs-tab-active {
+  font-weight: 500;
   color: var(--active-title-color);
 }
 .ebscn-tabs-tab-disabled {

package/cjs/components/tabs/tabs.js

@@ -27,7 +27,7 @@ var Tab = function () {
 exports.Tab = Tab;
 var defaultProps = {
   activeMode: 'underline',
-  activeLineMode: 'auto',
+  activeLineMode: 'fixed',
   stretch: true,
   direction: 'ltr'
 };
@@ -132,13 +132,13 @@ var Tabs = function (p) {
     var x = 0;
     var width = 0;
     if (props.activeLineMode === 'auto') {
-      x = activeTabLeft;
+      x = activeTabLeft - 6;
       width = activeTabWidth;
     } else if (props.activeLineMode === 'full') {
-      x = activeTabWrapperLeft;
+      x = activeTabWrapperLeft - 6;
       width = activeTabWrapperWidth;
     } else {
-      x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
+      x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2 - 6;
     }
     if (isRTL) {
       /**
@@ -252,7 +252,7 @@ var Tabs = function (p) {
     ref: activeLineRef,
     className: "".concat(classPrefix, "-tab-line"),
     style: {
-      width: props.activeLineMode === 'fixed' ? 'var(--fixed-active-line-width, 30px)' : width,
+      width: props.activeLineMode === 'fixed' ? 'var(--fixed-active-line-width, 14px)' : width,
       x: x
     }
   }), panes.map(function (pane) {

package/cjs/components/tabs/tabs.patch.css

@@ -3,6 +3,7 @@
 }
 .ebscn-tabs-tab {
   font-size: 17px;
+  color: #666;
 }
 .ebscn-tabs-tab-active {
   color: #1677ff;

package/cjs/components/toast/index.d.ts

@@ -0,0 +1,9 @@
+import './toast.less';
+import { clear, show, config } from './methods';
+export type { ToastShowProps, ToastHandler } from './methods';
+declare const Toast: {
+    show: typeof show;
+    clear: typeof clear;
+    config: typeof config;
+};
+export default Toast;

package/cjs/components/toast/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./toast.css");
+var _methods = require("./methods");
+var Toast = {
+  show: _methods.show,
+  clear: _methods.clear,
+  config: _methods.config
+};
+var _default = exports.default = Toast;

package/cjs/components/toast/methods.d.ts

@@ -0,0 +1,8 @@
+import { ToastProps } from './toast';
+export type ToastShowProps = Omit<ToastProps, 'visible'>;
+export type ToastHandler = {
+    close: () => void;
+};
+export declare function show(p: ToastShowProps | string): ToastHandler;
+export declare function clear(): void;
+export declare function config(val: Pick<ToastProps, 'duration' | 'position' | 'maskClickable'>): void;

package/cjs/components/toast/methods.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.clear = clear;
+exports.config = config;
+exports.show = show;
+var _react = _interopRequireDefault(require("react"));
+var _toast = require("./toast");
+var _withDefaultProps = require("../../utils/with-default-props");
+var _renderImperatively = require("../../utils/render-imperatively");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var currentHandler = null;
+var currentTimeout = null;
+var defaultProps = {
+  duration: 2000,
+  position: 'center',
+  maskClickable: true
+};
+var ToastInner = function (props) {
+  return _react.default.createElement(_toast.InternalToast, __assign({}, props));
+};
+function show(p) {
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, typeof p === 'string' ? {
+    content: p
+  } : p);
+  var element = _react.default.createElement(ToastInner, __assign({}, props, {
+    onClose: function () {
+      currentHandler = null;
+    }
+  }));
+  if (currentHandler) {
+    currentHandler.replace(element);
+  } else {
+    currentHandler = (0, _renderImperatively.renderImperatively)(element);
+  }
+  if (currentTimeout) {
+    window.clearTimeout(currentTimeout);
+  }
+  if (props.duration !== 0) {
+    currentTimeout = window.setTimeout(function () {
+      clear();
+    }, props.duration);
+  }
+  return currentHandler;
+}
+function clear() {
+  currentHandler === null || currentHandler === void 0 ? void 0 : currentHandler.close();
+  currentHandler = null;
+}
+function config(val) {
+  if (val.duration !== undefined) {
+    defaultProps.duration = val.duration;
+  }
+  if (val.position !== undefined) {
+    defaultProps.position = val.position;
+  }
+  if (val.maskClickable !== undefined) {
+    defaultProps.maskClickable = val.maskClickable;
+  }
+}

package/cjs/components/toast/toast.css

@@ -0,0 +1,45 @@
+.ebscn-toast-mask .ebscn-toast-wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+.ebscn-toast-mask .ebscn-toast-main {
+  display: inline-block;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+  width: auto;
+  max-width: 204px;
+  max-height: 70%;
+  overflow: auto;
+  color: white;
+  word-break: break-all;
+  background-color: rgba(0, 0, 0, 0.7);
+  border-radius: 8px;
+  pointer-events: all;
+  font-size: var(--ebscn-font-size-7);
+  line-height: 1.5;
+  box-sizing: border-box;
+  text-align: initial;
+}
+.ebscn-toast-mask .ebscn-toast-main-text {
+  padding: 12px;
+  min-width: 0px;
+}
+.ebscn-toast-mask .ebscn-toast-main-icon {
+  padding: 35px 12px;
+  min-width: 150px;
+}
+.ebscn-toast-mask .ebscn-toast-main-icon .ebscn-toast-icon {
+  text-align: center;
+  margin-bottom: 8px;
+  font-size: 36px;
+  line-height: 1;
+}
+.ebscn-toast-loading {
+  --size: 48px;
+  margin: 0 auto 8px;
+}

package/cjs/components/toast/toast.d.ts

@@ -0,0 +1,18 @@
+import type { FC, ReactNode } from 'react';
+import type { MaskProps } from '../mask';
+import { PropagationEvent } from '../../utils/with-stop-propagation';
+import { GetContainer } from '../../utils/render-to-container';
+export interface ToastProps {
+    afterClose?: () => void;
+    maskStyle?: MaskProps['style'];
+    maskClassName?: string;
+    maskClickable?: boolean;
+    content?: ReactNode;
+    icon?: 'success' | 'fail' | ReactNode;
+    duration?: number;
+    position?: 'top' | 'bottom' | 'center';
+    visible?: boolean;
+    getContainer?: GetContainer;
+    stopPropagation?: PropagationEvent[];
+}
+export declare const InternalToast: FC<ToastProps>;