@agentscope-ai/design 1.0.6 → 1.0.8

package/lib/components/commonComponents/Message/demo/demo1.d.ts

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

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

@@ -0,0 +1,10 @@
+import { message, Button } from "../../../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(Button, {
+    onClick: function onClick() {
+      message.success('task status');
+    },
+    children: "Success"
+  });
+});

package/lib/components/commonComponents/Message/demo/demo2.d.ts

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

package/lib/components/commonComponents/Message/demo/demo2.js

@@ -0,0 +1,41 @@
+import { message, Button } from "../../../..";
+import { Flex } from 'antd';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsxs(Flex, {
+    align: "center",
+    justify: "center",
+    gap: 16,
+    children: [/*#__PURE__*/_jsx(Button, {
+      onClick: function onClick() {
+        message.success('success');
+      },
+      children: "Success"
+    }), /*#__PURE__*/_jsx(Button, {
+      onClick: function onClick() {
+        message.info({
+          content: 'info'
+        });
+      },
+      children: "info"
+    }), /*#__PURE__*/_jsx(Button, {
+      onClick: function onClick() {
+        message.warning('warning');
+      },
+      children: "warning"
+    }), /*#__PURE__*/_jsx(Button, {
+      onClick: function onClick() {
+        message.error({
+          content: 'error'
+        });
+      },
+      children: "error"
+    }), /*#__PURE__*/_jsx(Button, {
+      onClick: function onClick() {
+        message.loading('loading');
+      },
+      children: "loading"
+    })]
+  });
+});

package/lib/components/commonComponents/Message/demo/demo3.d.ts

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

package/lib/components/commonComponents/Message/demo/demo3.js

@@ -0,0 +1,34 @@
+import { message, Button } from "../../../..";
+import { Flex } from 'antd';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default (function () {
+  return /*#__PURE__*/_jsx(Flex, {
+    align: "center",
+    justify: "center",
+    gap: 20,
+    children: /*#__PURE__*/_jsx(Button, {
+      onClick: function onClick() {
+        message.success({
+          content: /*#__PURE__*/_jsxs(Flex, {
+            gap: 8,
+            children: [/*#__PURE__*/_jsx("span", {
+              children: "task status"
+            }), /*#__PURE__*/_jsx("span", {
+              onClick: function onClick() {
+                return alert('click view');
+              },
+              style: {
+                fontWeight: 'bold',
+                cursor: 'pointer',
+                color: 'var(--sps-color-info)'
+              },
+              children: "view"
+            })]
+          })
+        });
+      },
+      children: "Click"
+    })
+  });
+});

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

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import { MessageArgsProps } from 'antd';
+import { ConfigOptions } from 'antd/es/message/interface';
+export interface SparkMessageArgsProps extends MessageArgsProps {
+    /**
+     * @description 显示的内容
+     * @descriptionEn content to be displayed
+     * @default ""
+     */
+    conent?: string;
+}
+export type JointContent = string | SparkMessageArgsProps;
+declare const _default: {
+    success: (props: JointContent) => void;
+    warning: (props: JointContent) => void;
+    error: (props: JointContent) => void;
+    info: (props: JointContent) => void;
+    loading: (props: JointContent) => void;
+    useMessage: (config?: ConfigOptions) => [{
+        success: (options: JointContent) => void;
+        warning: (options: JointContent) => void;
+        error: (options: JointContent) => void;
+        info: (options: JointContent) => void;
+        loading: (options: JointContent) => void;
+        open(args: MessageArgsProps): import("antd/es/message/interface").MessageType;
+        destroy(key?: import("react").Key): void;
+    }, import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>];
+    open: (config: MessageArgsProps) => import("antd/es/message/interface").MessageType;
+    destroy: (key?: import("react").Key) => void;
+    config: (config: ConfigOptions) => void;
+    _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd/es/message/PurePanel").PurePanelProps>;
+};
+export default _default;

package/lib/components/commonComponents/Modal/demo/basic.d.ts

@@ -0,0 +1 @@
+export default function (): import("react/jsx-runtime").JSX.Element;

package/lib/components/commonComponents/Modal/demo/basic.js

@@ -0,0 +1,49 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Button, Modal } from "../../../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function () {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onClick: function onClick() {
+        return setOpen(true);
+      },
+      children: "Open Modal"
+    }), /*#__PURE__*/_jsx(Modal, {
+      title: "Basic Title",
+      centered: true,
+      open: open,
+      onOk: function onOk() {
+        return setOpen(false);
+      },
+      onCancel: function onCancel() {
+        return setOpen(false);
+      },
+      children: /*#__PURE__*/_jsx("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          borderRadius: 6,
+          color: 'var(--sps-color-text-tertiary)',
+          border: '1px solid var(--sps-color-border-secondary)',
+          height: 312,
+          fontSize: 24,
+          background: "repeating-linear-gradient(\n              135deg,\n              var(--sps-color-border-secondary) 0,\n              var(--sps-color-border-secondary) 1px,\n              var(--sps-color-bg-base) 1px,\n              var(--sps-color-bg-base) 15px\n              )"
+        },
+        children: "Content"
+      })
+    })]
+  });
+}

package/lib/components/commonComponents/Modal/demo/styles.d.ts

@@ -0,0 +1 @@
+export default function (): import("react/jsx-runtime").JSX.Element;

package/lib/components/commonComponents/Modal/demo/styles.js

@@ -0,0 +1,158 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Button, Modal } from "../../../..";
+import { Flex } from 'antd';
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function Content(props) {
+  var _props$border = props.border,
+    border = _props$border === void 0 ? true : _props$border;
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 6,
+      color: 'var(--sps-color-text-tertiary)',
+      border: border ? '1px solid var(--sps-color-border-secondary)' : 'none',
+      height: 312,
+      fontSize: 24,
+      background: "repeating-linear-gradient(\n          135deg,\n          var(--sps-color-border-secondary) 0,\n          var(--sps-color-border-secondary) 1px,\n          var(--sps-color-bg-base) 1px,\n          var(--sps-color-bg-base) 15px\n          )"
+    },
+    children: "Content"
+  });
+}
+function NoDivider() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onClick: function onClick() {
+        return setOpen(true);
+      },
+      children: "No divider"
+    }), /*#__PURE__*/_jsx(Modal, {
+      centered: true,
+      showDivider: false,
+      title: "Basic Modal",
+      open: open,
+      onOk: function onOk() {
+        return setOpen(true);
+      },
+      onCancel: function onCancel() {
+        return setOpen(false);
+      },
+      styles: {
+        body: {
+          paddingTop: 0,
+          paddingBottom: 0
+        }
+      },
+      children: /*#__PURE__*/_jsx(Content, {})
+    })]
+  });
+}
+function NoPadding() {
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    open = _useState4[0],
+    setOpen = _useState4[1];
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onClick: function onClick() {
+        return setOpen(true);
+      },
+      children: "No Padding"
+    }), /*#__PURE__*/_jsx(Modal, {
+      centered: true,
+      styles: {
+        body: {
+          padding: 0
+        }
+      },
+      title: "Basic Modal",
+      open: open,
+      onOk: function onOk() {
+        return setOpen(true);
+      },
+      onCancel: function onCancel() {
+        return setOpen(false);
+      },
+      children: /*#__PURE__*/_jsx(Content, {
+        border: false
+      })
+    })]
+  });
+}
+function CustomFooter() {
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    open = _useState6[0],
+    setOpen = _useState6[1];
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onClick: function onClick() {
+        return setOpen(true);
+      },
+      children: "Custom footer"
+    }), /*#__PURE__*/_jsx(Modal, {
+      centered: true,
+      title: "Basic Modal",
+      open: open,
+      onOk: function onOk() {
+        return setOpen(true);
+      },
+      onCancel: function onCancel() {
+        return setOpen(false);
+      },
+      footer: /*#__PURE__*/_jsx(Button, {
+        children: "Custom footer"
+      }),
+      children: /*#__PURE__*/_jsx(Content, {})
+    })]
+  });
+}
+function FooterWithInfo() {
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    open = _useState8[0],
+    setOpen = _useState8[1];
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      onClick: function onClick() {
+        return setOpen(true);
+      },
+      children: "Footer With Info"
+    }), /*#__PURE__*/_jsx(Modal, {
+      centered: true,
+      title: "Basic Modal",
+      open: open,
+      onOk: function onOk() {
+        return setOpen(true);
+      },
+      onCancel: function onCancel() {
+        return setOpen(false);
+      },
+      info: /*#__PURE__*/_jsx("div", {
+        children: "info here"
+      }),
+      children: /*#__PURE__*/_jsx(Content, {})
+    })]
+  });
+}
+export default function () {
+  return /*#__PURE__*/_jsxs(Flex, {
+    vertical: true,
+    gap: 24,
+    align: "center",
+    children: [/*#__PURE__*/_jsx(NoDivider, {}), /*#__PURE__*/_jsx(NoPadding, {}), /*#__PURE__*/_jsx(CustomFooter, {}), /*#__PURE__*/_jsx(FooterWithInfo, {})]
+  });
+}

package/lib/components/commonComponents/Modal/demo/width.d.ts

@@ -0,0 +1 @@
+export default function (): import("react/jsx-runtime").JSX.Element;

package/lib/components/commonComponents/Modal/demo/width.js

@@ -0,0 +1,68 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Button, Modal } from "../../../..";
+import { Flex } from 'antd';
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function Content(props) {
+  var _props$border = props.border,
+    border = _props$border === void 0 ? true : _props$border;
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 6,
+      color: 'var(--sps-color-text-tertiary)',
+      border: border ? '1px solid var(--sps-color-border-secondary)' : 'none',
+      height: 312,
+      fontSize: 24,
+      background: "repeating-linear-gradient(\n          135deg,\n          var(--sps-color-border-secondary) 0,\n          var(--sps-color-border-secondary) 1px,\n          var(--sps-color-bg-base) 1px,\n          var(--sps-color-bg-base) 15px\n          )"
+    },
+    children: props.children
+  });
+}
+export default function () {
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    width = _useState2[0],
+    setWidth = _useState2[1];
+  return /*#__PURE__*/_jsxs(Flex, {
+    gap: 16,
+    children: [/*#__PURE__*/_jsx(Button, {
+      onClick: function onClick() {
+        return setWidth(Modal.SMALL_WIDTH);
+      },
+      children: "Small (640px)"
+    }), /*#__PURE__*/_jsx(Button, {
+      onClick: function onClick() {
+        return setWidth(Modal.MEDIUM_WIDTH);
+      },
+      children: "Middle (800px)"
+    }), /*#__PURE__*/_jsx(Button, {
+      onClick: function onClick() {
+        return setWidth(Modal.LARGE_WIDTH);
+      },
+      children: "Large (960px)"
+    }), /*#__PURE__*/_jsx(Modal, {
+      centered: true,
+      title: "Basic Modal",
+      open: Boolean(width),
+      width: width,
+      onOk: function onOk() {
+        return setWidth(0);
+      },
+      onCancel: function onCancel() {
+        return setWidth(0);
+      },
+      children: /*#__PURE__*/_jsxs(Content, {
+        children: ["Content here for ", width, "px"]
+      })
+    })]
+  });
+}

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

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { ModalProps } from 'antd';
+export interface SparkModalProps extends ModalProps {
+    /**
+     * @description 底部额外内容
+     * @descriptionEn footer extra content
+     */
+    info?: string | React.ReactNode;
+    /**
+     * @description 是否显示分割线
+     * @descriptionEn whether to show divider
+     * @default true
+     */
+    showDivider?: boolean;
+}
+declare const SparkModal: {
+    (props: SparkModalProps): import("react/jsx-runtime").JSX.Element;
+    useModal: typeof import("antd/es/modal/useModal").default;
+    success: import("antd/es/modal/confirm").ModalFunc;
+    error: import("antd/es/modal/confirm").ModalFunc;
+    warning: import("antd/es/modal/confirm").ModalFunc;
+    info: import("antd/es/modal/confirm").ModalFunc;
+    confirm: import("antd/es/modal/confirm").ModalFunc;
+    SMALL_WIDTH: number;
+    MEDIUM_WIDTH: number;
+    LARGE_WIDTH: number;
+};
+export default SparkModal;

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

@@ -0,0 +1,70 @@
+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 useIndexStyle from "./index.style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var SparkModal = function SparkModal(props) {
+  useIndexStyle();
+  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__*/_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'),
+    wrapStyle: _objectSpread({}, props.wrapStyle),
+    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/Notification/demo/demo1.js

@@ -0,0 +1,15 @@
+import { Button, notification } from "../../../..";
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var App = function App() {
+  return /*#__PURE__*/_jsx(Button, {
+    onClick: function onClick() {
+      return notification.success({
+        message: 'title',
+        description: 'content'
+      });
+    },
+    children: "Open"
+  });
+};
+export default App;

package/lib/components/commonComponents/Notification/demo/demo2.js

@@ -0,0 +1,21 @@
+import { Button, notification } from "../../../..";
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var App = function App() {
+  return /*#__PURE__*/_jsx(Button, {
+    onClick: function onClick() {
+      return notification.success({
+        message: 'title',
+        description: 'content',
+        actions: /*#__PURE__*/_jsx(Button, {
+          onClick: function onClick() {
+            return alert('click next');
+          },
+          children: "Next"
+        })
+      });
+    },
+    children: "Open"
+  });
+};
+export default App;

package/lib/components/commonComponents/Notification/demo/demo3.js

@@ -0,0 +1,45 @@
+import { Button, notification } from "../../../..";
+import { Flex } from 'antd';
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var App = function App() {
+  return /*#__PURE__*/_jsxs(Flex, {
+    gap: 16,
+    children: [/*#__PURE__*/_jsx(Button, {
+      onClick: function onClick() {
+        return notification.success({
+          message: 'title',
+          description: 'content',
+          duration: 0
+        });
+      },
+      children: "Success"
+    }), /*#__PURE__*/_jsx(Button, {
+      onClick: function onClick() {
+        return notification.info({
+          message: 'title',
+          description: 'content'
+        });
+      },
+      children: "Info"
+    }), /*#__PURE__*/_jsx(Button, {
+      onClick: function onClick() {
+        return notification.warning({
+          message: 'title',
+          description: 'content'
+        });
+      },
+      children: "Warning"
+    }), /*#__PURE__*/_jsx(Button, {
+      onClick: function onClick() {
+        return notification.error({
+          message: 'title',
+          description: 'content'
+        });
+      },
+      children: "Error"
+    })]
+  });
+};
+export default App;