@agentscope-ai/design 1.0.13 → 1.0.15-rc.0

package/lib/components/commonComponents/Modal/index.js

@@ -1,4 +1,72 @@
-import PCModal from "./pc";
-import MobileModal from "./mobile";
-var SparkModal = MOBILE ? MobileModal : PCModal;
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["showDivider", "closable"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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; }
+import { getCommonConfig } from "../../../config";
+import { CloseOutlined } from '@agentscope-ai/icons-override-antd';
+import { Modal } from 'antd';
+import classNames from 'classnames';
+import { useStyle } from "./index.style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var SparkModal = function SparkModal(props) {
+  var Style = useStyle();
+  var _getCommonConfig = getCommonConfig(),
+    sparkPrefix = _getCommonConfig.sparkPrefix;
+  var _props$showDivider = props.showDivider,
+    showDivider = _props$showDivider === void 0 ? true : _props$showDivider,
+    _props$closable = props.closable,
+    closable = _props$closable === void 0 ? true : _props$closable,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var renderFooter = function renderFooter(originNode) {
+    return props.info ? /*#__PURE__*/_jsxs("div", {
+      className: "".concat(sparkPrefix, "-modal-footer-wrapper"),
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "".concat(sparkPrefix, "-modal-footer-info"),
+        children: props.info
+      }), /*#__PURE__*/_jsx("div", {
+        className: "".concat(sparkPrefix, "-modal-footer-origin-node"),
+        children: originNode
+      })]
+    }) : originNode;
+  };
+  var mergedCloseIcon = closable ? props.closeIcon || /*#__PURE__*/_jsx(CloseOutlined, {
+    className: "".concat(sparkPrefix, "-modal-title-close"),
+    onClick: function onClick(e) {
+      var _props$onCancel;
+      (_props$onCancel = props.onCancel) === null || _props$onCancel === void 0 || _props$onCancel.call(props, e);
+    }
+  }) : null;
+  var mergedFooter = props.footer === undefined ? renderFooter : props.footer;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsx(Modal, _objectSpread(_objectSpread({}, restProps), {}, {
+      closeIcon: null,
+      title: /*#__PURE__*/_jsxs("div", {
+        className: "".concat(sparkPrefix, "-modal-title-wrapper"),
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "".concat(sparkPrefix, "-modal-title"),
+          children: props.title
+        }), mergedCloseIcon]
+      }),
+      wrapClassName: classNames("".concat(sparkPrefix, "-modal"), _defineProperty({}, "".concat(sparkPrefix, "-show-divider"), showDivider), props.wrapClassName, 'animate-in'),
+      footer: mergedFooter,
+      transitionName: ""
+    }))]
+  });
+};
+SparkModal.useModal = Modal.useModal;
+SparkModal.success = Modal.success;
+SparkModal.error = Modal.error;
+SparkModal.warning = Modal.warning;
+SparkModal.info = Modal.info;
+SparkModal.confirm = Modal.confirm;
+SparkModal.SMALL_WIDTH = 640;
+SparkModal.MEDIUM_WIDTH = 800;
+SparkModal.LARGE_WIDTH = 960;
 export default SparkModal;

package/lib/components/commonComponents/Modal/index.style.js

@@ -1,67 +1,7 @@
-var _templateObject, _templateObject2;
+var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import createGlobalStyle from "../../../libs/createStyle";
-export var useStyle = MOBILE ? createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-modal {\n  .", "-modal {\n    min-width: 300px;\n    max-width: 80vw;\n    position: fixed;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    padding: 0 !important;\n  }\n  .", "-modal-title {\n    min-height: 24px;\n  }\n  \n  .", "-modal-content {\n    padding: 0;\n    border: 1px solid var(--", "-color-border-secondary);\n    \n    .", "-modal-header {\n      padding: 20px 20px 16px;\n      margin-bottom: 0;\n      \n      .", "-modal-title {\n        font-size: 18px;\n        font-weight: 500;\n        line-height: 32px;\n        color: var(--", "-color-text);\n        \n        .", "-modal-title-wrapper {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          gap: 16px;\n          \n          .", "-modal-title {\n            flex: 1;\n            display: flex;\n            justify-content: center;\n            text-align: center;\n          }\n\n          .", "-modal-title-padding {\n            padding-left: 32px;\n          }\n          \n          .", "-modal-title-close {\n            font-size: 20px;\n            cursor: pointer;\n          }\n        }\n      }\n    }\n    \n    .", "-modal-body {\n      max-height: 60vh;\n      padding: 0 20px;\n      font-size: 14px;\n      color: var(--", "-color-text);\n    }\n    \n    .", "-modal-footer {\n      padding: 16px 20px 20px;\n      margin-top: 0;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n\n      .", "-btn {\n        flex: 1;\n      }\n      \n      .", "-modal-footer-wrapper {\n        flex: 1;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        \n        .", "-modal-footer-info {\n          font-size: 14px;\n          font-weight: normal;\n          line-height: 24px;\n          color: var(--", "-color-text-tertiary);\n        }\n        \n        .", "-modal-footer-origin-node {\n          display: flex;\n          gap: 12px;\n        }\n      }\n    }\n    \n    .", "-modal-close {\n      width: 32px;\n      height: 32px;\n      top: 16px;\n      right: 16px;\n      \n      .", "-modal-close-icon {\n        color: var(--", "-color-text);\n      }\n      \n      &:hover {\n        background: none;\n      }\n    }\n  }\n}\n\n.", "-show-divider {\n  .", "-modal-content {\n    .", "-modal-header {\n      border-bottom: 1px solid var(--", "-color-border-secondary);\n    }\n    .", "-modal-body {\n      padding: 16px 20px;\n    }\n    .", "-modal-footer {\n      border-top: 1px solid var(--", "-color-border-secondary);\n    }\n  }\n}\n"])), function (p) {
-  return p.sparkPrefix;
-}, function (p) {
-  return p.antPrefix;
-}, function (p) {
-  return p.antPrefix;
-}, function (p) {
-  return p.antPrefix;
-}, function (p) {
-  return p.antPrefix;
-}, function (p) {
-  return p.antPrefix;
-}, function (p) {
-  return p.antPrefix;
-}, function (p) {
-  return p.antPrefix;
-}, function (p) {
-  return p.sparkPrefix;
-}, function (p) {
-  return p.sparkPrefix;
-}, function (p) {
-  return p.sparkPrefix;
-}, function (p) {
-  return p.sparkPrefix;
-}, function (p) {
-  return p.antPrefix;
-}, function (p) {
-  return p.antPrefix;
-}, function (p) {
-  return p.antPrefix;
-}, function (p) {
-  return p.antPrefix;
-}, function (p) {
-  return p.sparkPrefix;
-}, function (p) {
-  return p.sparkPrefix;
-}, function (p) {
-  return p.antPrefix;
-}, function (p) {
-  return p.sparkPrefix;
-}, function (p) {
-  return p.antPrefix;
-}, function (p) {
-  return p.antPrefix;
-}, function (p) {
-  return p.antPrefix;
-}, function (p) {
-  return p.sparkPrefix;
-}, function (p) {
-  return p.antPrefix;
-}, function (p) {
-  return p.antPrefix;
-}, function (p) {
-  return p.antPrefix;
-}, function (p) {
-  return p.antPrefix;
-}, function (p) {
-  return p.antPrefix;
-}, function (p) {
-  return p.antPrefix;
-}) : createGlobalStyle(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.", "-modal {\n  .", "-modal-title {\n    min-height: 24px;\n  }\n  \n  .", "-modal-content {\n    padding: 0;\n    border: 1px solid var(--", "-color-border-secondary);\n    \n    .", "-modal-header {\n      padding: 18px 20px;\n      margin-bottom: 0;\n      \n      .", "-modal-title {\n        line-height: 28px;\n        \n        .", "-modal-title-wrapper {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          gap: 12px;\n          \n          .", "-modal-title {\n            flex: 1;\n          }\n          \n          .", "-modal-title-close {\n            cursor: pointer;\n          }\n        }\n      }\n    }\n    \n    .", "-modal-body {\n      padding: 20px;\n      color: var(--", "-color-text-secondary);\n    }\n    \n    .", "-modal-footer {\n      padding: 16px 20px;\n      margin-top: 0;\n      \n      .", "-modal-footer-wrapper {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        \n        .", "-modal-footer-info {\n          font-size: 14px;\n          font-weight: normal;\n          line-height: 24px;\n          color: var(--", "-color-text-tertiary);\n        }\n        \n        .", "-modal-footer-origin-node {\n          display: flex;\n          gap: 12px;\n        }\n      }\n    }\n    \n    .", "-modal-close {\n      width: 32px;\n      height: 32px;\n      top: 16px;\n      right: 16px;\n      \n      .", "-modal-close-icon {\n        color: var(--", "-color-text);\n      }\n      \n      &:hover {\n        background: none;\n      }\n    }\n  }\n}\n\n.", "-show-divider {\n  .", "-modal-content {\n    .", "-modal-header {\n      border-bottom: 1px solid var(--", "-color-border-secondary);\n    }\n    \n    .", "-modal-footer {\n      border-top: 1px solid var(--", "-color-border-secondary);\n    }\n  }\n}\n"])), function (p) {
+export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-modal {\n  .", "-modal-title {\n    min-height: 24px;\n  }\n  \n  .", "-modal-content {\n    padding: 0;\n    border: 1px solid var(--", "-color-border-secondary);\n    \n    .", "-modal-header {\n      padding: 18px 20px;\n      margin-bottom: 0;\n      \n      .", "-modal-title {\n        line-height: 28px;\n        \n        .", "-modal-title-wrapper {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          gap: 12px;\n          \n          .", "-modal-title {\n            flex: 1;\n          }\n          \n          .", "-modal-title-close {\n            cursor: pointer;\n          }\n        }\n      }\n    }\n    \n    .", "-modal-body {\n      padding: 20px;\n      color: var(--", "-color-text-secondary);\n    }\n    \n    .", "-modal-footer {\n      padding: 16px 20px;\n      margin-top: 0;\n      \n      .", "-modal-footer-wrapper {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        \n        .", "-modal-footer-info {\n          font-size: 14px;\n          font-weight: normal;\n          line-height: 24px;\n          color: var(--", "-color-text-tertiary);\n        }\n        \n        .", "-modal-footer-origin-node {\n          display: flex;\n          gap: 12px;\n        }\n      }\n    }\n    \n    .", "-modal-close {\n      width: 32px;\n      height: 32px;\n      top: 16px;\n      right: 16px;\n      \n      .", "-modal-close-icon {\n        color: var(--", "-color-text);\n      }\n      \n      &:hover {\n        background: none;\n      }\n    }\n  }\n}\n\n.", "-show-divider {\n  .", "-modal-content {\n    .", "-modal-header {\n      border-bottom: 1px solid var(--", "-color-border-secondary);\n    }\n    \n    .", "-modal-footer {\n      border-top: 1px solid var(--", "-color-border-secondary);\n    }\n  }\n}\n"])), function (p) {
   return p.sparkPrefix;
 }, function (p) {
   return p.antPrefix;

package/lib/components/commonComponents/PromptsEditor/VarRender.d.ts

@@ -2,5 +2,5 @@ import { DecorationSet, ViewPlugin, ViewUpdate } from '@codemirror/view';
 declare const _default: ViewPlugin<{
     placeholders: DecorationSet;
     update(update: ViewUpdate): void;
-}>[];
+}, undefined>[];
 export default _default;

package/lib/components/commonComponents/Tabs/index.style.js

@@ -1,7 +1,13 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import createGlobalStyle from "../../../libs/createStyle";
-export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-tabs {\n  .", "-tabs-tab.", "-tabs-tab-active .", "-tabs-tab-btn {\n    color: var(--", "-color-text);\n    font-weight: 500;\n  }\n  \n  .", "-tabs-tab .", "-tabs-tab-btn {\n    color: var(--", "-color-text);\n    font-weight: 400;\n  }\n  \n  .", "-tabs-ink-bar {\n    background: var(--", "-color-primary);\n  }\n}\n\n.", "-tabs-nav::before {\n  display: none !important;\n}\n\n.", "-segmented-item {\n  &::after {\n    background: none !important;\n    opacity: 1 !important;\n  }\n  \n  .", "-segmented-item-label {\n    font-weight: 500;\n    color: var(--", "-color-text);\n  }\n}\n\n.", "-segmented-tab-bar {\n  margin-bottom: 16px;\n  background: var(--", "-color-fill-tertiary);\n  align-self: baseline;\n  \n  &.", "-segmented-tab-bar-centered {\n    align-self: center;\n  }\n}\n"])), function (p) {
+export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-tabs {\n  .", "-tabs-tab.", "-tabs-tab-active .", "-tabs-tab-btn {\n    color: var(--", "-color-text);\n    font-weight: 500;\n  }\n  \n  .", "-tabs-tab .", "-tabs-tab-btn {\n    color: var(--", "-color-text);\n    font-weight: 400;\n  }\n  \n  .", "-tabs-ink-bar {\n    background: var(--", "-color-primary);\n  }\n}\n\n.", "-tabs-nav::before {\n  display: none !important;\n}\n\n.", "-segmented-item {\n  &::after {\n    background: none !important;\n    opacity: 1 !important;\n  }\n  \n  .", "-segmented-item-label {\n    font-weight: 500;\n    color: var(--", "-color-text-secondary);\n  }\n}\n\n.", "-segmented-item-selected {  \n  .", "-segmented-item-label {\n    font-weight: 500;\n    color: var(--", "-color-text);\n  }\n}\n\n.", "-segmented-tab-bar {\n  margin-bottom: 16px;\n  background: var(--", "-color-fill-tertiary);\n  align-self: baseline;\n  \n  &.", "-segmented-tab-bar-centered {\n    align-self: center;\n  }\n}\n"])), function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
   return p.antPrefix;
 }, function (p) {
   return p.antPrefix;

package/lib/components/commonComponents/Tag/demo/demo1.js

@@ -2,7 +2,7 @@ import { Tag } from "../../../..";
 import { Flex } from 'antd';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var COLOR_LIST = ['purple', 'pink', 'yellow', 'teal', 'blue', 'mauve'];
+var COLOR_LIST = ['purple', 'pink', 'yellow', 'teal', 'blue', 'mauve', 'success', 'error', 'warning', 'info'];
 export default (function () {
   return /*#__PURE__*/_jsx(Flex, {
     align: "center",

package/lib/components/commonComponents/Tag/index.d.ts

@@ -7,7 +7,11 @@ declare enum SparkTagColors {
     Teal = "teal",
     Blue = "blue",
     Mauve = "mauve",
-    Transparent = "transparent"
+    Transparent = "transparent",
+    Success = "success",
+    Error = "error",
+    Warning = "warning",
+    Info = "info"
 }
 export interface SparkTagProps extends TagProps {
     /**

package/lib/components/commonComponents/Tag/index.js

@@ -23,6 +23,10 @@ var SparkTagColors = /*#__PURE__*/function (SparkTagColors) {
   SparkTagColors["Blue"] = "blue";
   SparkTagColors["Mauve"] = "mauve";
   SparkTagColors["Transparent"] = "transparent";
+  SparkTagColors["Success"] = "success";
+  SparkTagColors["Error"] = "error";
+  SparkTagColors["Warning"] = "warning";
+  SparkTagColors["Info"] = "info";
   return SparkTagColors;
 }(SparkTagColors || {});
 var SparkTag = /*#__PURE__*/forwardRef(function (props, ref) {

package/lib/components/commonComponents/Tag/index.style.js

@@ -1,7 +1,7 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import createGlobalStyle from "../../../libs/createStyle";
-export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-tag {\n  font-weight: 500;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  \n  .", "-tag-close-icon {\n    margin-left: 0;\n  }\n}\n\n.", "-tag-small {\n  height: 20px;\n  font-size: 12px;\n  padding: 0 4px;\n}\n\n.", "-tag-middle {\n  height: 24px;\n  font-size: 14px;\n  padding: 0 6px;\n}\n\n.", "-tag-purple {\n  color: var(--", "-color-purple);\n  background: var(--", "-color-purple-bg);\n}\n\n.", "-tag-pink {\n  color: var(--", "-color-pink);\n  background: var(--", "-color-pink-bg);\n}\n\n.", "-tag-yellow {\n  color: var(--", "-color-yellow);\n  background: var(--", "-color-yellow-bg);\n}\n\n.", "-tag-teal {\n  color: var(--", "-color-teal);\n  background: var(--", "-color-teal-bg);\n}\n\n.", "-tag-blue {\n  color: var(--", "-color-blue);\n  background: var(--", "-color-blue-bg);\n}\n\n.", "-tag-mauve {\n  color: var(--", "-color-mauve);\n  background: var(--", "-color-mauve-bg);\n}\n\n.", "-tag-transparent {\n  color: var(--", "-color-text-tertiary);\n  background: transparent;\n  border-color: var(--", "-color-border-secondary);\n}\n"])), function (p) {
+export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-tag {\n  font-weight: 500;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  \n  .", "-tag-close-icon {\n    margin-left: 0;\n  }\n}\n\n.", "-tag-small {\n  height: 20px;\n  font-size: 12px;\n  padding: 0 4px;\n}\n\n.", "-tag-middle {\n  height: 24px;\n  font-size: 14px;\n  padding: 0 6px;\n}\n\n.", "-tag-purple {\n  color: var(--", "-color-purple);\n  background: var(--", "-color-purple-bg);\n\n  .", "-tag-close-icon {\n    color: var(--", "-color-purple);\n  }\n}\n\n.", "-tag-pink {\n  color: var(--", "-color-pink);\n  background: var(--", "-color-pink-bg);\n  .", "-tag-close-icon {\n    color: var(--", "-color-pink);\n  }\n}\n\n.", "-tag-yellow {\n  color: var(--", "-color-yellow);\n  background: var(--", "-color-yellow-bg);\n  .", "-tag-close-icon {\n    color: var(--", "-color-yellow);\n  }\n}\n\n.", "-tag-teal {\n  color: var(--", "-color-teal);\n  background: var(--", "-color-teal-bg);\n  .", "-tag-close-icon {\n    color: var(--", "-color-teal);\n  }\n}\n\n.", "-tag-blue {\n  color: var(--", "-color-blue);\n  background: var(--", "-color-blue-bg);\n  .", "-tag-close-icon {\n    color: var(--", "-color-blue);\n}\n}\n\n.", "-tag-mauve {\n  color: var(--", "-color-mauve);\n  background: var(--", "-color-mauve-bg);\n  .", "-tag-close-icon {\n    color: var(--", "-color-mauve);\n  }\n}\n\n.", "-tag-success {\n  color: var(--", "-color-success);\n  background: var(--", "-color-success-bg);\n  .", "-tag-close-icon {\n    color: var(--", "-color-success);\n  }\n}\n\n.", "-tag-error {\n  color: var(--", "-color-error);\n  background: var(--", "-color-error-bg);\n  .", "-tag-close-icon {\n    color: var(--", "-color-error);\n  }\n}\n\n.", "-tag-warning {\n  color: var(--", "-color-warning);\n  background: var(--", "-color-warning-bg);\n  .", "-tag-close-icon {\n    color: var(--", "-color-warning);\n  }\n}\n\n.", "-tag-info {\n  color: var(--", "-color-info);\n  background: var(--", "-color-info-bg);\n  .", "-tag-close-icon {\n    color: var(--", "-color-info);\n  }\n}\n\n.", "-tag-transparent {\n  color: var(--", "-color-text-tertiary);\n  background: transparent;\n  border-color: var(--", "-color-border-secondary);\n}\n"])), function (p) {
   return p.sparkPrefix;
 }, function (p) {
   return p.antPrefix;
@@ -15,36 +15,100 @@ export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _t
   return p.antPrefix;
 }, function (p) {
   return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
 }, function (p) {
   return p.sparkPrefix;
 }, function (p) {
   return p.antPrefix;
 }, function (p) {
   return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
 }, function (p) {
   return p.sparkPrefix;
 }, function (p) {
   return p.antPrefix;
 }, function (p) {
   return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
 }, function (p) {
   return p.sparkPrefix;
 }, function (p) {
   return p.antPrefix;
 }, function (p) {
   return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
 }, function (p) {
   return p.sparkPrefix;
 }, function (p) {
   return p.antPrefix;
 }, function (p) {
   return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
 }, function (p) {
   return p.sparkPrefix;
 }, function (p) {
   return p.antPrefix;
 }, function (p) {
   return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
 }, function (p) {
   return p.sparkPrefix;
 }, function (p) {

package/lib/components/mobileComponents/MobileAlertDialog/demo/demo1.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/lib/components/mobileComponents/MobileAlertDialog/demo/demo1.js

@@ -0,0 +1,20 @@
+import { Button } from "../../../..";
+import React from 'react';
+import MobileAlertDialog from '..';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var App = function App() {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(Button, {
+      onClick: function onClick() {
+        return MobileAlertDialog.info({
+          title: 'Title here',
+          children: 'This information content passed into this AlertDialog.',
+          centered: true
+        });
+      },
+      children: "Open AlertDialog(Info)"
+    })
+  });
+};
+export default App;

package/lib/components/mobileComponents/MobileAlertDialog/demo/demo2.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const App: React.FC;
+export default App;

package/lib/components/mobileComponents/MobileAlertDialog/demo/demo2.js

@@ -0,0 +1,50 @@
+import { Button } from "../../../..";
+import { Flex } from 'antd';
+import React from 'react';
+import MobileAlertDialog from '..';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var App = function App() {
+  return /*#__PURE__*/_jsxs(Flex, {
+    vertical: true,
+    gap: 24,
+    children: [/*#__PURE__*/_jsx(Button, {
+      onClick: function onClick() {
+        return MobileAlertDialog.success({
+          title: 'Title here',
+          children: 'This information content passed into this AlertDialog.',
+          centered: true
+        });
+      },
+      children: "Success"
+    }), /*#__PURE__*/_jsx(Button, {
+      onClick: function onClick() {
+        return MobileAlertDialog.warning({
+          title: 'Title here',
+          children: 'This information content passed into this AlertDialog.',
+          centered: true
+        });
+      },
+      children: "Warning"
+    }), /*#__PURE__*/_jsx(Button, {
+      onClick: function onClick() {
+        return MobileAlertDialog.error({
+          title: 'Title here',
+          children: 'This information content passed into this AlertDialog.',
+          centered: true
+        });
+      },
+      children: "Error"
+    }), /*#__PURE__*/_jsx(Button, {
+      onClick: function onClick() {
+        return MobileAlertDialog.confirm({
+          title: 'Title here',
+          children: 'This information content passed into this AlertDialog.',
+          centered: true
+        });
+      },
+      children: "Confirm"
+    })]
+  });
+};
+export default App;

package/lib/components/{commonComponents/AlertDialog/mobile.d.ts → mobileComponents/MobileAlertDialog/index.d.ts}

@@ -1,6 +1,6 @@
 import { ModalProps } from "../../../index";
 import { SyntheticEvent } from 'react';
-export interface AlertDialogProps extends ModalProps {
+export interface MobileAlertDialogProps extends ModalProps {
     /**
      * @description 类型
      * @descriptionEn type
@@ -26,13 +26,13 @@ export interface AlertDialogProps extends ModalProps {
      */
     onClose?: (e: SyntheticEvent<Element, Event>) => any;
 }
-type AlertDialogStaticProps = Omit<AlertDialogProps, 'type' | 'open'>;
+type MobileAlertDialogStaticProps = Omit<MobileAlertDialogProps, 'type' | 'open'>;
 declare const _default: {
-    (props: AlertDialogProps): JSX.Element;
-    success: (props?: AlertDialogStaticProps) => void;
-    info: (props?: AlertDialogStaticProps) => void;
-    warning: (props?: AlertDialogStaticProps) => void;
-    error: (props?: AlertDialogStaticProps) => void;
-    confirm: (props?: AlertDialogStaticProps) => void;
+    (props: MobileAlertDialogProps): JSX.Element;
+    success: (props?: MobileAlertDialogStaticProps) => void;
+    info: (props?: MobileAlertDialogStaticProps) => void;
+    warning: (props?: MobileAlertDialogStaticProps) => void;
+    error: (props?: MobileAlertDialogStaticProps) => void;
+    confirm: (props?: MobileAlertDialogStaticProps) => void;
 };
 export default _default;

package/lib/components/{commonComponents/AlertDialog/mobile.js → mobileComponents/MobileAlertDialog/index.js}

@@ -131,7 +131,7 @@ var getCommonProps = function getCommonProps(props) {
     children: children
   };
 };
-var AlertDialog = function AlertDialog(props) {
+var MobileAlertDialog = function MobileAlertDialog(props) {
   var commonProps = getCommonProps(props);
   var Style = useStyle();
 
@@ -158,7 +158,7 @@ var AlertDialog = function AlertDialog(props) {
 };
 var staticFns = ['success', 'info', 'warning', 'error', 'confirm'];
 staticFns.forEach(function (type) {
-  AlertDialog[type] = function (props) {
+  MobileAlertDialog[type] = function (props) {
     var commonProps = getCommonProps(_objectSpread(_objectSpread({}, props), {}, {
       type: type
     }));
@@ -185,4 +185,4 @@ staticFns.forEach(function (type) {
     }));
   };
 });
-export default AlertDialog;
+export default MobileAlertDialog;

package/lib/components/mobileComponents/MobileAlertDialog/index.style.d.ts

@@ -0,0 +1 @@
+export declare const useStyle: () => () => import("react/jsx-runtime").JSX.Element;

package/lib/components/mobileComponents/MobileAlertDialog/index.style.js

@@ -0,0 +1,22 @@
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import createGlobalStyle from "../../../libs/createStyle";
+export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-alert-dialog {\n  min-width: 300px;\n  max-width: 80vw !important;\n\n  .", "-modal-body {\n    padding: 0 0 12px 32px;\n    font-size: 14px;\n    color: var(--", "-color-text-secondary);\n  }\n  \n  .", "-modal-content {\n    padding: 20px;\n  }\n\n  .", "-modal-confirm-content {\n    padding: 0 0 12px 32px;\n    font-size: 14px;\n    color: var(--", "-color-text-secondary);\n  }\n\n  .", "-modal-confirm-paragraph {\n    max-width: 100%;\n  }\n  .", "-modal-confirm-btns {\n    display: flex;\n    justify-content: space-between;\n    gap: 8px;\n    .", "-btn {\n      flex: 1;\n    }\n  }\n}\n"])), function (p) {
+  return p.sparkPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+});

package/lib/components/mobileComponents/MobileDrawer/Confirm.d.ts

@@ -0,0 +1,46 @@
+import { ButtonProps, DrawerProps } from "../../..";
+import React from 'react';
+export interface DrawerConfirmProps extends DrawerProps {
+    /**
+     * @description 自定义底部内容
+     * @descriptionEn custom footer content
+     */
+    footer?: React.ReactNode;
+    /**
+     * @description 点击确定回调
+     * @descriptionEn click ok button callback
+     */
+    onOk?: () => void;
+    /**
+     * @description 确认按钮文字
+     * @descriptionEn ok button text
+     */
+    okText?: string;
+    /**
+     * @description 确认按钮属性
+     * @descriptionEn ok button props
+     */
+    okButtonProps?: ButtonProps;
+    /**
+     * @description 点击取消回调
+     * @descriptionEn click cancel button callback
+     */
+    onCancel?: () => void;
+    /**
+     * @description 取消按钮文字
+     * @descriptionEn cancel button text
+     */
+    cancelText?: string;
+    /**
+     * @description 取消按钮属性
+     * @descriptionEn cancel button props
+     */
+    cancelButtonProps?: ButtonProps;
+    /**
+     * @description 底部额外内容
+     * @descriptionEn footer extra content
+     */
+    info?: React.ReactNode;
+}
+declare const DrawerConfirm: React.FC<DrawerConfirmProps>;
+export default DrawerConfirm;

package/lib/components/mobileComponents/MobileDrawer/Confirm.js

@@ -0,0 +1,63 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["onOk", "onCancel", "okText", "okButtonProps", "cancelText", "cancelButtonProps", "info", "footer"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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; }
+import { getCommonConfig } from "../../../config";
+import { Button, Drawer } from "../../..";
+import React from 'react';
+import { useStyle } from "./index.style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var DrawerConfirm = function DrawerConfirm(props) {
+  var onOk = props.onOk,
+    onCancel = props.onCancel,
+    _props$okText = props.okText,
+    okText = _props$okText === void 0 ? '确定' : _props$okText,
+    okButtonProps = props.okButtonProps,
+    _props$cancelText = props.cancelText,
+    cancelText = _props$cancelText === void 0 ? '取消' : _props$cancelText,
+    cancelButtonProps = props.cancelButtonProps,
+    info = props.info,
+    footer = props.footer,
+    rest = _objectWithoutProperties(props, _excluded);
+  var Style = useStyle();
+  var commonConfig = getCommonConfig();
+  var antPrefix = commonConfig.antPrefix;
+  var handleCancel = function handleCancel(e) {
+    if (onCancel) {
+      onCancel();
+    } else {
+      var _rest$onClose;
+      (_rest$onClose = rest.onClose) === null || _rest$onClose === void 0 || _rest$onClose.call(rest, e);
+    }
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsx(Drawer, _objectSpread(_objectSpread({}, rest), {}, {
+      footer: footer || /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "".concat(antPrefix, "-drawer-footer-info"),
+          children: info
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "".concat(antPrefix, "-drawer-footer-buttons"),
+          children: [/*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+            onClick: handleCancel
+          }, cancelButtonProps), {}, {
+            children: cancelText
+          })), /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+            type: "primary",
+            onClick: onOk
+          }, okButtonProps), {}, {
+            children: okText
+          }))]
+        })]
+      })
+    }))]
+  });
+};
+export default DrawerConfirm;

package/lib/components/mobileComponents/MobileDrawer/demo/demo1.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;