@agentscope-ai/design 1.0.5 → 1.0.7

package/lib/components/commonComponents/Input/index.style.d.ts

@@ -0,0 +1,70 @@
+export declare function getIndexStyleData(params: any): {
+    [x: string]: {
+        borderColor: string;
+        backgroundColor?: undefined;
+        fontWeight?: undefined;
+        borderRadius?: undefined;
+        '&::placeholder'?: undefined;
+        fontSize?: undefined;
+        height?: undefined;
+    } | {
+        backgroundColor: string;
+        borderColor?: undefined;
+        fontWeight?: undefined;
+        borderRadius?: undefined;
+        '&::placeholder'?: undefined;
+        fontSize?: undefined;
+        height?: undefined;
+    } | {
+        [x: string]: string | number | {
+            color: string;
+        };
+        fontWeight: number;
+        borderRadius: string;
+        '&::placeholder': {
+            color: string;
+        };
+        borderColor?: undefined;
+        backgroundColor?: undefined;
+        fontSize?: undefined;
+        height?: undefined;
+    } | {
+        [x: string]: {
+            marginInlineEnd: string;
+            color: string;
+        };
+        borderColor?: undefined;
+        backgroundColor?: undefined;
+        fontWeight?: undefined;
+        borderRadius?: undefined;
+        '&::placeholder'?: undefined;
+        fontSize?: undefined;
+        height?: undefined;
+    } | {
+        fontSize: string;
+        borderColor?: undefined;
+        backgroundColor?: undefined;
+        fontWeight?: undefined;
+        borderRadius?: undefined;
+        '&::placeholder'?: undefined;
+        height?: undefined;
+    } | {
+        borderRadius: string;
+        borderColor?: undefined;
+        backgroundColor?: undefined;
+        fontWeight?: undefined;
+        '&::placeholder'?: undefined;
+        fontSize?: undefined;
+        height?: undefined;
+    } | {
+        height: string;
+        fontSize: string;
+        borderColor?: undefined;
+        backgroundColor?: undefined;
+        fontWeight?: undefined;
+        borderRadius?: undefined;
+        '&::placeholder'?: undefined;
+    };
+};
+declare const useIndexStyle: (props?: {}) => import("../../../config").CommonConfig;
+export default useIndexStyle;

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

@@ -0,0 +1,42 @@
+var _excluded = ["css"];
+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); }
+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; }
+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); }
+import createStyle from "../../../libs/createStyle";
+export function getIndexStyleData(params) {
+  var antPrefix = params.antPrefix;
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(antPrefix, "-input-outlined, .").concat(antPrefix, "-input-outlined.").concat(antPrefix, "-input-disabled, .").concat(antPrefix, "-input-outlined[disabled]"), {
+    borderColor: "var(--".concat(antPrefix, "-color-border-secondary)")
+  }), ".".concat(antPrefix, "-input-outlined"), {
+    backgroundColor: "var(--".concat(antPrefix, "-color-bg-base)")
+  }), ".".concat(antPrefix, "-input"), _defineProperty(_defineProperty({
+    fontWeight: 400,
+    borderRadius: '6px'
+  }, ".".concat(antPrefix, "-input-show-count-suffix, .").concat(antPrefix, "-input-data-count-suffix"), {
+    color: "var(--".concat(antPrefix, "-color-text-tertiary)")
+  }), '&::placeholder', {
+    color: "var(--".concat(antPrefix, "-color-text-tertiary)")
+  })), ".".concat(antPrefix, "-input-affix-wrapper"), _defineProperty({}, ".".concat(antPrefix, "-input-prefix"), {
+    marginInlineEnd: '8px',
+    color: "var(--".concat(antPrefix, "-color-text-tertiary)")
+  })), ".".concat(antPrefix, "-input-affix-wrapper .").concat(antPrefix, "-input-clear-icon"), {
+    fontSize: '15px'
+  }), ".".concat(antPrefix, "-input-round"), {
+    borderRadius: '999px'
+  }), ".".concat(antPrefix, "-text-area"), {
+    borderColor: "var(--".concat(antPrefix, "-color-border-secondary)")
+  }), ".".concat(antPrefix, "-input-sm"), {
+    height: '24px',
+    fontSize: '12px'
+  });
+}
+var useIndexStyle = createStyle(function (_ref2) {
+  var css = _ref2.css,
+    params = _objectWithoutProperties(_ref2, _excluded);
+  var result = css(getIndexStyleData(params));
+  return result;
+});
+export default useIndexStyle;

package/lib/components/commonComponents/InputNumber/demo/demo.js

@@ -0,0 +1,32 @@
+import { InputNumber } 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 onChange = function onChange(value) {
+  console.log('changed', value);
+};
+var onChange1 = function onChange1(value) {
+  console.log('changed', value);
+};
+var App = function App() {
+  return /*#__PURE__*/_jsxs(Flex, {
+    vertical: true,
+    gap: "middle",
+    align: "center",
+    justify: "center",
+    children: [/*#__PURE__*/_jsx(InputNumber, {
+      min: 1,
+      max: 10,
+      defaultValue: 6,
+      onChange: onChange
+    }), /*#__PURE__*/_jsx(InputNumber, {
+      min: 1,
+      max: 10,
+      defaultValue: 6,
+      onChange: onChange1,
+      disabled: true
+    })]
+  });
+};
+export default App;

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

@@ -0,0 +1,39 @@
+import { InputNumber } 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 onChange = function onChange(value) {
+  console.log('changed', value);
+};
+var onChange1 = function onChange1(value) {
+  console.log('changed', value);
+};
+var App = function App() {
+  return /*#__PURE__*/_jsxs(Flex, {
+    vertical: true,
+    gap: "middle",
+    align: "center",
+    justify: "center",
+    children: [/*#__PURE__*/_jsx(InputNumber, {
+      min: 1,
+      max: 10,
+      defaultValue: 6,
+      onChange: onChange,
+      size: "small"
+    }), /*#__PURE__*/_jsx(InputNumber, {
+      min: 1,
+      max: 10,
+      defaultValue: 6,
+      onChange: onChange,
+      size: "middle"
+    }), /*#__PURE__*/_jsx(InputNumber, {
+      min: 1,
+      max: 10,
+      defaultValue: 6,
+      onChange: onChange,
+      size: "large"
+    })]
+  });
+};
+export default App;

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

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

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

@@ -0,0 +1,13 @@
+import { Input } from "../../../..";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  var Search = Input.Search;
+  function handleSearch(value) {
+    console.log('value: ', value);
+  }
+  return /*#__PURE__*/_jsx(Search, {
+    placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9",
+    allowClear: true,
+    onSearch: handleSearch
+  });
+});

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

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

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

@@ -0,0 +1,28 @@
+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 { Input } from "../../../..";
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function () {
+  var Search = Input.Search;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    keywords = _useState2[0],
+    setKeywords = _useState2[1];
+  function handleSearch(value) {
+    console.log('value: ', value);
+  }
+  return /*#__PURE__*/_jsx(Search, {
+    placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9\u641C\u7D22",
+    allowClear: true,
+    value: keywords,
+    onChange: function onChange(e) {
+      return setKeywords(e.target.value);
+    },
+    onSearch: handleSearch
+  });
+});

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"]
+      })
+    })]
+  });
+}