@agentscope-ai/design 1.0.7 → 1.0.9

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

@@ -1,42 +1,46 @@
-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;
+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/newCreateStyle";
+export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-input-outlined,\n.", "-input-outlined.", "-input-disabled,\n.", "-input-outlined[disabled] {\n  border-color: var(--", "-color-border-secondary);\n}\n\n.", "-input-outlined {\n  background-color: var(--", "-color-bg-base);\n}\n\n.", "-input {\n  font-weight: 400;\n  border-radius: 6px;\n  \n  .", "-input-show-count-suffix,\n  .", "-input-data-count-suffix {\n    color: var(--", "-color-text-tertiary);\n  }\n  \n  &::placeholder {\n    color: var(--", "-color-text-tertiary);\n  }\n}\n\n/* prefix\u95F4\u8DDD */\n.", "-input-affix-wrapper {\n  .", "-input-prefix {\n    margin-inline-end: 8px;\n    color: var(--", "-color-text-tertiary);\n  }\n}\n\n.", "-input-affix-wrapper .", "-input-clear-icon {\n  font-size: 15px;\n}\n\n.", "-input-round {\n  border-radius: 999px;\n}\n\n.", "-text-area {\n  border-color: var(--", "-color-border-secondary);\n}\n\n.", "-input-sm {\n  height: 24px;\n  font-size: 12px;\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;
+}, 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;
+}, 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/commonComponents/Modal/index.js

@@ -11,11 +11,12 @@ 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 { 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) {
-  useIndexStyle();
+  var Style = useStyle();
   var _getCommonConfig = getCommonConfig(),
     sparkPrefix = _getCommonConfig.sparkPrefix;
   var _props$showDivider = props.showDivider,
@@ -43,20 +44,22 @@ var SparkModal = function SparkModal(props) {
     }
   }) : 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: ""
-  }));
+  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'),
+      wrapStyle: _objectSpread({}, props.wrapStyle),
+      footer: mergedFooter,
+      transitionName: ""
+    }))]
+  });
 };
 SparkModal.useModal = Modal.useModal;
 SparkModal.success = Modal.success;

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

@@ -1,111 +1 @@
-export declare function getIndexStyleData(params: any): {
-    [x: string]: {
-        [x: string]: {
-            minHeight: string;
-            padding?: undefined;
-            border?: undefined;
-        } | {
-            [x: string]: string | number | {
-                [x: string]: string | number | {
-                    [x: string]: string | {
-                        [x: string]: string | {
-                            flex: number;
-                            cursor?: undefined;
-                        } | {
-                            cursor: string;
-                            flex?: undefined;
-                        };
-                        display: string;
-                        justifyContent: string;
-                        alignItems: string;
-                        gap: string;
-                    };
-                    lineHeight: string;
-                };
-                padding: string;
-                marginBottom: number;
-                color?: undefined;
-                marginTop?: undefined;
-                width?: undefined;
-                height?: undefined;
-                top?: undefined;
-                right?: undefined;
-                '&:hover'?: undefined;
-            } | {
-                padding: number;
-                color: string;
-                marginBottom?: undefined;
-                marginTop?: undefined;
-                width?: undefined;
-                height?: undefined;
-                top?: undefined;
-                right?: undefined;
-                '&:hover'?: undefined;
-            } | {
-                [x: string]: string | number | {
-                    [x: string]: string | {
-                        fontSize: string;
-                        fontWeight: string;
-                        lineHeight: string;
-                        color: string;
-                        display?: undefined;
-                        gap?: undefined;
-                    } | {
-                        display: string;
-                        gap: string;
-                        fontSize?: undefined;
-                        fontWeight?: undefined;
-                        lineHeight?: undefined;
-                        color?: undefined;
-                    };
-                    display: string;
-                    justifyContent: string;
-                    alignItems: string;
-                };
-                padding: string;
-                marginTop: number;
-                marginBottom?: undefined;
-                color?: undefined;
-                width?: undefined;
-                height?: undefined;
-                top?: undefined;
-                right?: undefined;
-                '&:hover'?: undefined;
-            } | {
-                [x: string]: number | {
-                    color: string;
-                    background?: undefined;
-                } | {
-                    background: string;
-                    color?: undefined;
-                };
-                width: number;
-                height: number;
-                top: number;
-                right: number;
-                "&:hover": {
-                    background: string;
-                };
-                padding?: undefined;
-                marginBottom?: undefined;
-                color?: undefined;
-                marginTop?: undefined;
-            };
-            padding: number;
-            border: string;
-            minHeight?: undefined;
-        };
-    } | {
-        [x: string]: {
-            [x: string]: {
-                borderBottom: string;
-                borderTop?: undefined;
-            } | {
-                borderTop: string;
-                borderBottom?: undefined;
-            };
-        };
-    };
-};
-declare const useIndexStyle: () => void;
-export default useIndexStyle;
+export declare const useStyle: () => () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,72 +1,54 @@
-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,
-    sparkPrefix = params.sparkPrefix;
-  return _defineProperty(_defineProperty({}, ".".concat(sparkPrefix, "-modal"), _defineProperty(_defineProperty({}, ".".concat(antPrefix, "-modal-title"), {
-    minHeight: '24px'
-  }), ".".concat(antPrefix, "-modal-content"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    padding: 0,
-    border: "1px solid var(--".concat(antPrefix, "-color-border-secondary)")
-  }, ".".concat(antPrefix, "-modal-header"), _defineProperty({
-    padding: '18px 20px',
-    marginBottom: 0
-  }, ".".concat(antPrefix, "-modal-title"), _defineProperty({
-    lineHeight: '28px'
-  }, ".".concat(sparkPrefix, "-modal-title-wrapper"), _defineProperty(_defineProperty({
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    gap: '12px'
-  }, ".".concat(sparkPrefix, "-modal-title"), {
-    flex: 1
-  }), ".".concat(sparkPrefix, "-modal-title-close"), {
-    cursor: 'pointer'
-  })))), ".".concat(antPrefix, "-modal-body"), {
-    padding: 20,
-    color: "var(--".concat(antPrefix, "-color-text-secondary)")
-  }), ".".concat(antPrefix, "-modal-footer"), _defineProperty({
-    padding: '16px 20px',
-    marginTop: 0
-  }, ".".concat(sparkPrefix, "-modal-footer-wrapper"), _defineProperty(_defineProperty({
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center'
-  }, ".".concat(sparkPrefix, "-modal-footer-info"), {
-    fontSize: '14px',
-    fontWeight: 'normal',
-    lineHeight: '24px',
-    color: "var(--".concat(antPrefix, "-color-text-tertiary)")
-  }), ".".concat(sparkPrefix, "-modal-footer-origin-node"), {
-    display: 'flex',
-    gap: '12px'
-  }))), ".".concat(antPrefix, "-modal-close"), _defineProperty(_defineProperty({
-    width: 32,
-    height: 32,
-    top: 16,
-    right: 16
-  }, ".".concat(antPrefix, "-modal-close-icon"), {
-    color: "var(--".concat(antPrefix, "-color-text)")
-  }), "&:hover", {
-    background: 'none'
-  })))), ".".concat(sparkPrefix, "-show-divider"), _defineProperty({}, ".".concat(antPrefix, "-modal-content"), _defineProperty(_defineProperty({}, ".".concat(antPrefix, "-modal-header"), {
-    borderBottom: "1px solid var(--".concat(antPrefix, "-color-border-secondary)")
-  }), ".".concat(antPrefix, "-modal-footer"), {
-    borderTop: "1px solid var(--".concat(antPrefix, "-color-border-secondary)")
-  })));
-}
-var useIndexStyle = function useIndexStyle() {
-  createStyle(function (_ref2) {
-    var css = _ref2.css,
-      params = _objectWithoutProperties(_ref2, _excluded);
-    var result = css(getIndexStyleData(params));
-    return result;
-  })();
-};
-export default useIndexStyle;
+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/newCreateStyle";
+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;
+}, 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.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;
+});

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

@@ -3,7 +3,7 @@ export interface SparkPaginationProps extends PaginationProps {
     /**
      * @description 是否展示上一页/下一页的切换按钮
      * @descriptionEn Whether to show previous/next page switch button
-     * @default 'false'
+     * @default false
      */
     hideSwitchButton?: boolean;
 }

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

@@ -12,21 +12,30 @@ import { getCommonConfig } from "../../../config";
 import { SparkMoreLine } from '@agentscope-ai/icons';
 import { LeftOutlined, RightOutlined } from "@agentscope-ai/icons-override-antd";
 import { Flex, Pagination } from 'antd';
-import useIndexStyle from "./index.style";
+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";
 export default (function (props) {
   var _props$hideSwitchButt = props.hideSwitchButton,
     hideSwitchButton = _props$hideSwitchButt === void 0 ? false : _props$hideSwitchButt,
     restProps = _objectWithoutProperties(props, _excluded);
   var _getCommonConfig = getCommonConfig(),
     sparkPrefix = _getCommonConfig.sparkPrefix;
-  useIndexStyle();
+  var Style = useStyle();
   var mergedItemRender = function mergedItemRender() {
-    if (hideSwitchButton || props.itemRender) {
-      return props.itemRender;
-    }
     var sparkItemRender = function sparkItemRender(_, type, originalElement) {
+      // 优先处理省略号替换
+      if (type === 'jump-prev' || type === 'jump-next') {
+        // 替换省略号为自定义图标
+        return /*#__PURE__*/_jsx(SparkMoreLine, {
+          className: "".concat(sparkPrefix, "-jump-next-icon")
+        });
+      }
+      // 如果禁用了切换按钮或者有自定义的itemRender，则不处理上一页下一页按钮
+      if (hideSwitchButton || props.itemRender) {
+        return originalElement;
+      }
       if (type === 'prev') {
         return /*#__PURE__*/_jsx("a", {
           children: /*#__PURE__*/_jsxs(Flex, {
@@ -47,35 +56,31 @@ export default (function (props) {
           })
         });
       }
-      if (type === 'jump-prev' || type === 'jump-next') {
-        // 替换省略号为自定义图标
-        return /*#__PURE__*/_jsx(SparkMoreLine, {
-          className: "".concat(sparkPrefix, "-jump-next-icon")
-        });
-      }
       return originalElement;
     };
     return sparkItemRender;
   };
   var shouldShowSizeChanger = restProps.total && restProps.total > 50;
-  return /*#__PURE__*/_jsx(Pagination, _objectSpread(_objectSpread({
-    itemRender: mergedItemRender()
-  }, restProps), {}, {
-    showSizeChanger: shouldShowSizeChanger ? {
-      options: [{
-        label: '10 Items / Pages',
-        value: 10
-      }, {
-        label: '20 Items / Pages',
-        value: 20
-      }, {
-        label: '50 Items / Pages',
-        value: 50
-      }, {
-        label: '100 Items / Pages',
-        value: 100
-      }]
-    } : false,
-    className: "".concat(sparkPrefix, "-pagination")
-  }));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsx(Pagination, _objectSpread(_objectSpread({
+      itemRender: mergedItemRender()
+    }, restProps), {}, {
+      showSizeChanger: shouldShowSizeChanger ? {
+        options: [{
+          label: '10 Items / Pages',
+          value: 10
+        }, {
+          label: '20 Items / Pages',
+          value: 20
+        }, {
+          label: '50 Items / Pages',
+          value: 50
+        }, {
+          label: '100 Items / Pages',
+          value: 100
+        }]
+      } : false,
+      className: "".concat(sparkPrefix, "-pagination")
+    }))]
+  });
 });

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

@@ -1,49 +1 @@
-export declare function getIndexStyleData(params: any): {
-    [x: string]: {
-        [x: string]: string | {
-            fontWeight: number;
-            borderColor?: undefined;
-            borderRadius?: undefined;
-            a?: undefined;
-            color?: undefined;
-            display?: undefined;
-            alignItems?: undefined;
-            justifyContent?: undefined;
-        } | {
-            borderColor: string;
-            borderRadius: number;
-            a: {
-                color: string;
-            };
-            fontWeight?: undefined;
-            color?: undefined;
-            display?: undefined;
-            alignItems?: undefined;
-            justifyContent?: undefined;
-        } | {
-            color: string;
-            fontWeight?: undefined;
-            borderColor?: undefined;
-            borderRadius?: undefined;
-            a?: undefined;
-            display?: undefined;
-            alignItems?: undefined;
-            justifyContent?: undefined;
-        } | {
-            display: string;
-            alignItems: string;
-            justifyContent: string;
-            fontWeight?: undefined;
-            borderColor?: undefined;
-            borderRadius?: undefined;
-            a?: undefined;
-            color?: undefined;
-        };
-        color: string;
-        a: {
-            color: string;
-        };
-    };
-};
-declare const useIndexStyle: (props?: {}) => import("../../../config").CommonConfig;
-export default useIndexStyle;
+export declare const useStyle: () => () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,42 +1,26 @@
-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,
-    sparkPrefix = params.sparkPrefix;
-  return _defineProperty({}, ".".concat(sparkPrefix, "-pagination"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    color: "var(--".concat(sparkPrefix, "-color-text) !important")
-  }, ".".concat(antPrefix, "-pagination-total-text"), {
-    fontWeight: 500
-  }), ".".concat(antPrefix, "-select-selection-item"), {
-    fontWeight: 500
-  }), ".".concat(antPrefix, "-pagination-item-active.").concat(antPrefix, "-pagination-item"), {
-    borderColor: "var(--".concat(antPrefix, "-color-border-secondary)"),
-    borderRadius: 8,
-    a: {
-      color: "var(--".concat(antPrefix, "-color-text) !important")
-    }
-  }), "a", {
-    color: "var(--".concat(antPrefix, "-color-text) !important")
-  }), ".".concat(antPrefix, "-pagination-jump-next"), {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center'
-  }), ".".concat(antPrefix, "-pagination-jump-prev"), {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center'
-  }));
-}
-var useIndexStyle = createStyle(function (_ref2) {
-  var css = _ref2.css,
-    params = _objectWithoutProperties(_ref2, _excluded);
-  var result = css(getIndexStyleData(params));
-  return result;
-});
-export default useIndexStyle;
+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/newCreateStyle";
+export var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-pagination {\n  color: var(--", "-color-text) !important;\n  \n  .", "-pagination-total-text {\n    font-weight: 500;\n  }\n  \n  .", "-select-selection-item {\n    font-weight: 500;\n  }\n  \n  .", "-pagination-item-active.", "-pagination-item {\n    border-color: var(--", "-color-border-secondary);\n    border-radius: 8px;\n    \n    a {\n      color: var(--", "-color-text) !important;\n    }\n  }\n  \n  a {\n    color: var(--", "-color-text) !important;\n  }\n  \n  .", "-pagination-jump-next {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  \n  .", "-pagination-jump-prev {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n}\n"])), 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.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+}, function (p) {
+  return p.antPrefix;
+});