@fle-ui/next 2.0.0-alpha.9 → 3.0.0-alpha.1

package/es/notification/style/index.js

@@ -1,2 +1,192 @@
-import "../../style/default.less";
-import "./index.less";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { Keyframes } from '@ant-design/cssinjs';
+import { genComponentStyleHook, mergeToken } from "../../theme/internal";
+import genNotificationPlacementStyle from "./placement";
+import { resetComponent } from "../../style";
+
+var genNotificationStyle = function genNotificationStyle(token) {
+  var _extends2, _ref4, _noticeCls;
+
+  var iconCls = token.iconCls,
+      componentCls = token.componentCls,
+      boxShadowSecondary = token.boxShadowSecondary,
+      fontSizeLG = token.fontSizeLG,
+      notificationMarginBottom = token.notificationMarginBottom,
+      borderRadiusLG = token.borderRadiusLG,
+      colorSuccess = token.colorSuccess,
+      colorInfo = token.colorInfo,
+      colorWarning = token.colorWarning,
+      colorError = token.colorError,
+      colorTextHeading = token.colorTextHeading,
+      notificationBg = token.notificationBg,
+      notificationPadding = token.notificationPadding,
+      notificationMarginEdge = token.notificationMarginEdge,
+      motionDurationMid = token.motionDurationMid,
+      motionEaseInOut = token.motionEaseInOut,
+      fontSize = token.fontSize,
+      lineHeight = token.lineHeight,
+      width = token.width,
+      notificationIconSize = token.notificationIconSize;
+  var noticeCls = componentCls + "-notice";
+  var notificationFadeIn = new Keyframes('antNotificationFadeIn', {
+    '0%': {
+      left: {
+        _skip_check_: true,
+        value: width
+      },
+      opacity: 0
+    },
+    '100%': {
+      left: {
+        _skip_check_: true,
+        value: 0
+      },
+      opacity: 1
+    }
+  });
+  var notificationFadeOut = new Keyframes('antNotificationFadeOut', {
+    '0%': {
+      maxHeight: token.animationMaxHeight,
+      marginBottom: notificationMarginBottom,
+      opacity: 1
+    },
+    '100%': {
+      maxHeight: 0,
+      marginBottom: 0,
+      paddingTop: 0,
+      paddingBottom: 0,
+      opacity: 0
+    }
+  });
+  return [// ============================ Holder ============================
+  _defineProperty({}, componentCls, _extends(_extends(_extends(_extends({}, resetComponent(token)), (_extends2 = {
+    position: 'fixed',
+    zIndex: token.zIndexPopup,
+    marginInlineEnd: notificationMarginEdge
+  }, _defineProperty(_extends2, componentCls + "-hook-holder", {
+    position: 'relative'
+  }), _defineProperty(_extends2, "&" + componentCls + "-top, &" + componentCls + "-bottom", _defineProperty({}, componentCls + "-notice", {
+    marginInline: 'auto auto'
+  })), _defineProperty(_extends2, "&" + componentCls + "-topLeft, &" + componentCls + "-bottomLeft", _defineProperty({}, componentCls + "-notice", {
+    marginInlineEnd: 'auto',
+    marginInlineStart: 0
+  })), _defineProperty(_extends2, componentCls + "-fade-enter, " + componentCls + "-fade-appear", {
+    animationDuration: token.motionDurationMid,
+    animationTimingFunction: motionEaseInOut,
+    animationFillMode: 'both',
+    opacity: 0,
+    animationPlayState: 'paused'
+  }), _defineProperty(_extends2, componentCls + "-fade-leave", {
+    animationTimingFunction: motionEaseInOut,
+    animationFillMode: 'both',
+    animationDuration: motionDurationMid,
+    animationPlayState: 'paused'
+  }), _defineProperty(_extends2, componentCls + "-fade-enter" + componentCls + "-fade-enter-active, " + componentCls + "-fade-appear" + componentCls + "-fade-appear-active", {
+    animationName: notificationFadeIn,
+    animationPlayState: 'running'
+  }), _defineProperty(_extends2, componentCls + "-fade-leave" + componentCls + "-fade-leave-active", {
+    animationName: notificationFadeOut,
+    animationPlayState: 'running'
+  }), _extends2)), genNotificationPlacementStyle(token)), {
+    // RTL
+    '&-rtl': _defineProperty({
+      direction: 'rtl'
+    }, componentCls + "-notice-btn", {
+      "float": 'left'
+    })
+  })), // ============================ Notice ============================
+  _defineProperty({}, noticeCls, (_noticeCls = {
+    position: 'relative',
+    width: width,
+    maxWidth: "calc(100vw - " + notificationMarginEdge * 2 + "px)",
+    marginBottom: notificationMarginBottom,
+    marginInlineStart: 'auto',
+    padding: notificationPadding,
+    overflow: 'hidden',
+    lineHeight: lineHeight,
+    wordWrap: 'break-word',
+    background: notificationBg,
+    borderRadius: borderRadiusLG,
+    boxShadow: boxShadowSecondary
+  }, _defineProperty(_noticeCls, componentCls + "-close-icon", {
+    fontSize: fontSize,
+    cursor: 'pointer'
+  }), _defineProperty(_noticeCls, noticeCls + "-message", {
+    marginBottom: token.marginXS,
+    color: colorTextHeading,
+    fontSize: fontSizeLG,
+    lineHeight: token.lineHeightLG
+  }), _defineProperty(_noticeCls, noticeCls + "-description", {
+    fontSize: fontSize
+  }), _defineProperty(_noticeCls, "&" + noticeCls + "-closable " + noticeCls + "-message", {
+    paddingInlineEnd: token.paddingLG
+  }), _defineProperty(_noticeCls, noticeCls + "-with-icon " + noticeCls + "-message", {
+    marginBottom: token.marginXS,
+    marginInlineStart: token.marginSM + notificationIconSize,
+    fontSize: fontSizeLG
+  }), _defineProperty(_noticeCls, noticeCls + "-with-icon " + noticeCls + "-description", {
+    marginInlineStart: token.marginSM + notificationIconSize,
+    fontSize: fontSize
+  }), _defineProperty(_noticeCls, noticeCls + "-icon", (_ref4 = {
+    position: 'absolute',
+    fontSize: notificationIconSize,
+    lineHeight: 0
+  }, _defineProperty(_ref4, "&-success" + iconCls, {
+    color: colorSuccess
+  }), _defineProperty(_ref4, "&-info" + iconCls, {
+    color: colorInfo
+  }), _defineProperty(_ref4, "&-warning" + iconCls, {
+    color: colorWarning
+  }), _defineProperty(_ref4, "&-error" + iconCls, {
+    color: colorError
+  }), _ref4)), _defineProperty(_noticeCls, noticeCls + "-close", {
+    position: 'absolute',
+    top: token.notificationPaddingVertical,
+    insetInlineEnd: token.notificationPaddingHorizontal,
+    color: token.colorIcon,
+    outline: 'none',
+    width: token.notificationCloseButtonSize,
+    height: token.notificationCloseButtonSize,
+    borderRadius: token.borderRadiusSM,
+    transition: "background-color " + token.motionDurationMid + ", color " + token.motionDurationMid,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    '&:hover': {
+      color: token.colorIconHover,
+      backgroundColor: token.wireframe ? 'transparent' : token.colorFillContent
+    }
+  }), _defineProperty(_noticeCls, noticeCls + "-btn", {
+    "float": 'right',
+    marginTop: token.marginSM
+  }), _noticeCls)), // ============================= Pure =============================
+  _defineProperty({}, noticeCls + "-pure-panel", {
+    margin: 0
+  })];
+}; // ============================== Export ==============================
+
+
+export default genComponentStyleHook('Notification', function (token) {
+  var notificationPaddingVertical = token.paddingMD;
+  var notificationPaddingHorizontal = token.paddingLG;
+  var notificationToken = mergeToken(token, {
+    // default.less variables
+    notificationBg: token.colorBgElevated,
+    notificationPaddingVertical: notificationPaddingVertical,
+    notificationPaddingHorizontal: notificationPaddingHorizontal,
+    // index.less variables
+    notificationPadding: token.paddingMD + "px " + token.paddingContentHorizontalLG + "px",
+    notificationMarginBottom: token.margin,
+    notificationMarginEdge: token.marginLG,
+    animationMaxHeight: 150,
+    notificationIconSize: token.fontSizeLG * token.lineHeightLG,
+    notificationCloseButtonSize: token.controlHeightLG * 0.55
+  });
+  return [genNotificationStyle(notificationToken)];
+}, function (token) {
+  return {
+    zIndexPopup: token.zIndexPopupBase + 50,
+    width: 384
+  };
+});

package/es/notification/style/placement.d.ts

@@ -0,0 +1,5 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { NotificationToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+declare const genNotificationPlacementStyle: GenerateStyle<NotificationToken, CSSObject>;
+export default genNotificationPlacementStyle;

package/es/notification/style/placement.js

@@ -0,0 +1,60 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { Keyframes } from '@ant-design/cssinjs';
+
+var genNotificationPlacementStyle = function genNotificationPlacementStyle(token) {
+  var _ref4;
+
+  var componentCls = token.componentCls,
+      width = token.width,
+      notificationMarginEdge = token.notificationMarginEdge;
+  var notificationTopFadeIn = new Keyframes('antNotificationTopFadeIn', {
+    '0%': {
+      marginTop: '-100%',
+      opacity: 0
+    },
+    '100%': {
+      marginTop: 0,
+      opacity: 1
+    }
+  });
+  var notificationBottomFadeIn = new Keyframes('antNotificationBottomFadeIn', {
+    '0%': {
+      marginBottom: '-100%',
+      opacity: 0
+    },
+    '100%': {
+      marginBottom: 0,
+      opacity: 1
+    }
+  });
+  var notificationLeftFadeIn = new Keyframes('antNotificationLeftFadeIn', {
+    '0%': {
+      right: {
+        _skip_check_: true,
+        value: width
+      },
+      opacity: 0
+    },
+    '100%': {
+      right: {
+        _skip_check_: true,
+        value: 0
+      },
+      opacity: 1
+    }
+  });
+  return _ref4 = {}, _defineProperty(_ref4, "&" + componentCls + "-top, &" + componentCls + "-bottom", {
+    marginInline: 0
+  }), _defineProperty(_ref4, "&" + componentCls + "-top", _defineProperty({}, componentCls + "-fade-enter" + componentCls + "-fade-enter-active, " + componentCls + "-fade-appear" + componentCls + "-fade-appear-active", {
+    animationName: notificationTopFadeIn
+  })), _defineProperty(_ref4, "&" + componentCls + "-bottom", _defineProperty({}, componentCls + "-fade-enter" + componentCls + "-fade-enter-active, " + componentCls + "-fade-appear" + componentCls + "-fade-appear-active", {
+    animationName: notificationBottomFadeIn
+  })), _defineProperty(_ref4, "&" + componentCls + "-topLeft, &" + componentCls + "-bottomLeft", _defineProperty({
+    marginInlineEnd: 0,
+    marginInlineStart: notificationMarginEdge
+  }, componentCls + "-fade-enter" + componentCls + "-fade-enter-active, " + componentCls + "-fade-appear" + componentCls + "-fade-appear-active", {
+    animationName: notificationLeftFadeIn
+  })), _ref4;
+};
+
+export default genNotificationPlacementStyle;

package/es/notification/useNotification.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { NotificationInstance, NotificationConfig } from './interface';
+type HolderProps = NotificationConfig & {
+    onAllRemoved?: VoidFunction;
+};
+export declare function useInternalNotification(notificationConfig?: HolderProps): [NotificationInstance, React.ReactElement];
+export default function useNotification(notificationConfig?: NotificationConfig): [NotificationInstance, React.ReactElement<any, string | React.JSXElementConstructor<any>>];
+export {};

package/es/notification/useNotification.js

@@ -0,0 +1,168 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+import * as React from 'react';
+import { useNotification as useRcNotification } from 'rc-notification';
+import classNames from 'classnames';
+import { ConfigContext } from "../config-provider";
+import { getPlacementStyle, getMotion } from "./util";
+import warning from "../_util/warning";
+import useStyle from "./style";
+import { getCloseIcon, PureContent } from "./PurePanel";
+var DEFAULT_OFFSET = 24;
+var DEFAULT_DURATION = 4.5;
+var Holder = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var top = props.top,
+      bottom = props.bottom,
+      staticPrefixCls = props.prefixCls,
+      staticGetContainer = props.getContainer,
+      maxCount = props.maxCount,
+      rtl = props.rtl,
+      onAllRemoved = props.onAllRemoved;
+
+  var _React$useContext = React.useContext(ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      getPopupContainer = _React$useContext.getPopupContainer;
+
+  var prefixCls = staticPrefixCls || getPrefixCls('notification'); // =============================== Style ===============================
+
+  var getStyle = function getStyle(placement) {
+    return getPlacementStyle(placement, top !== null && top !== void 0 ? top : DEFAULT_OFFSET, bottom !== null && bottom !== void 0 ? bottom : DEFAULT_OFFSET);
+  }; // Style
+
+
+  var _useStyle = useStyle(prefixCls),
+      _useStyle2 = _slicedToArray(_useStyle, 2),
+      hashId = _useStyle2[1];
+
+  var getClassName = function getClassName() {
+    return classNames(hashId, _defineProperty({}, prefixCls + "-rtl", rtl));
+  }; // ============================== Motion ===============================
+
+
+  var getNotificationMotion = function getNotificationMotion() {
+    return getMotion(prefixCls);
+  }; // ============================== Origin ===============================
+
+
+  var _useRcNotification = useRcNotification({
+    prefixCls: prefixCls,
+    style: getStyle,
+    className: getClassName,
+    motion: getNotificationMotion,
+    closable: true,
+    closeIcon: getCloseIcon(prefixCls),
+    duration: DEFAULT_DURATION,
+    getContainer: function getContainer() {
+      return (staticGetContainer === null || staticGetContainer === void 0 ? void 0 : staticGetContainer()) || (getPopupContainer === null || getPopupContainer === void 0 ? void 0 : getPopupContainer()) || document.body;
+    },
+    maxCount: maxCount,
+    onAllRemoved: onAllRemoved
+  }),
+      _useRcNotification2 = _slicedToArray(_useRcNotification, 2),
+      api = _useRcNotification2[0],
+      holder = _useRcNotification2[1]; // ================================ Ref ================================
+
+
+  React.useImperativeHandle(ref, function () {
+    return _extends(_extends({}, api), {
+      prefixCls: prefixCls,
+      hashId: hashId
+    });
+  });
+  return holder;
+}); // ==============================================================================
+// ==                                   Hook                                   ==
+// ==============================================================================
+
+export function useInternalNotification(notificationConfig) {
+  var holderRef = React.useRef(null); // ================================ API ================================
+
+  var wrapAPI = React.useMemo(function () {
+    // Wrap with notification content
+    // >>> Open
+    var open = function open(config) {
+      if (!holderRef.current) {
+        process.env.NODE_ENV !== "production" ? warning(false, 'Notification', 'You are calling notice in render which will break in React 18 concurrent mode. Please trigger in effect instead.') : void 0;
+        return;
+      }
+
+      var _holderRef$current = holderRef.current,
+          originOpen = _holderRef$current.open,
+          prefixCls = _holderRef$current.prefixCls,
+          hashId = _holderRef$current.hashId;
+      var noticePrefixCls = prefixCls + "-notice";
+
+      var message = config.message,
+          description = config.description,
+          icon = config.icon,
+          type = config.type,
+          _config$placement = config.placement,
+          placement = _config$placement === void 0 ? 'topRight' : _config$placement,
+          btn = config.btn,
+          className = config.className,
+          restConfig = __rest(config, ["message", "description", "icon", "type", "placement", "btn", "className"]);
+
+      return originOpen(_extends(_extends({}, restConfig), {
+        content: /*#__PURE__*/React.createElement(PureContent, {
+          prefixCls: noticePrefixCls,
+          icon: icon,
+          type: type,
+          message: message,
+          description: description,
+          btn: btn
+        }),
+        placement: placement,
+        className: classNames(type && noticePrefixCls + "-" + type, hashId, className)
+      }));
+    }; // >>> destroy
+
+
+    var destroy = function destroy(key) {
+      var _a, _b;
+
+      if (key !== undefined) {
+        (_a = holderRef.current) === null || _a === void 0 ? void 0 : _a.close(key);
+      } else {
+        (_b = holderRef.current) === null || _b === void 0 ? void 0 : _b.destroy();
+      }
+    };
+
+    var clone = {
+      open: open,
+      destroy: destroy
+    };
+    var keys = ['success', 'info', 'warning', 'error'];
+    keys.forEach(function (type) {
+      clone[type] = function (config) {
+        return open(_extends(_extends({}, config), {
+          type: type
+        }));
+      };
+    });
+    return clone;
+  }, []); // ============================== Return ===============================
+
+  return [wrapAPI, /*#__PURE__*/React.createElement(Holder, _extends({
+    key: "holder"
+  }, notificationConfig, {
+    ref: holderRef
+  }))];
+}
+export default function useNotification(notificationConfig) {
+  return useInternalNotification(notificationConfig);
+}

package/es/notification/util.d.ts

@@ -0,0 +1,5 @@
+import type * as React from 'react';
+import type { CSSMotionProps } from 'rc-motion';
+import type { NotificationPlacement } from './interface';
+export declare function getPlacementStyle(placement: NotificationPlacement, top: number, bottom: number): React.CSSProperties;
+export declare function getMotion(prefixCls: string): CSSMotionProps;

package/es/notification/util.js

@@ -0,0 +1,64 @@
+export function getPlacementStyle(placement, top, bottom) {
+  var style;
+
+  switch (placement) {
+    case 'top':
+      style = {
+        left: '50%',
+        transform: 'translateX(-50%)',
+        right: 'auto',
+        top: top,
+        bottom: 'auto'
+      };
+      break;
+
+    case 'topLeft':
+      style = {
+        left: 0,
+        top: top,
+        bottom: 'auto'
+      };
+      break;
+
+    case 'topRight':
+      style = {
+        right: 0,
+        top: top,
+        bottom: 'auto'
+      };
+      break;
+
+    case 'bottom':
+      style = {
+        left: '50%',
+        transform: 'translateX(-50%)',
+        right: 'auto',
+        top: 'auto',
+        bottom: bottom
+      };
+      break;
+
+    case 'bottomLeft':
+      style = {
+        left: 0,
+        top: 'auto',
+        bottom: bottom
+      };
+      break;
+
+    default:
+      style = {
+        right: 0,
+        top: 'auto',
+        bottom: bottom
+      };
+      break;
+  }
+
+  return style;
+}
+export function getMotion(prefixCls) {
+  return {
+    motionName: prefixCls + "-fade"
+  };
+}

package/es/pagination/Pagination.d.ts

@@ -1,5 +1,5 @@
 import type { PaginationProps as RcPaginationProps } from 'rc-pagination';
-import { PaginationLocale } from 'rc-pagination';
+import { type PaginationLocale } from 'rc-pagination';
 import * as React from 'react';
 export interface PaginationProps extends RcPaginationProps {
     showQuickJumper?: boolean | {
@@ -14,6 +14,6 @@ export type PaginationPosition = 'top' | 'bottom' | 'both';
 export interface PaginationConfig extends PaginationProps {
     position?: PaginationPosition;
 }
-export { PaginationLocale };
+export type { PaginationLocale };
 declare const Pagination: React.FC<PaginationProps>;
 export default Pagination;

package/es/pagination/Pagination.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
@@ -26,6 +27,7 @@ import { ConfigContext } from "../config-provider";
 import useBreakpoint from "../grid/hooks/useBreakpoint";
 import LocaleReceiver from "../locale-provider/LocaleReceiver";
 import { MiddleSelect, MiniSelect } from "./Select";
+import useStyle from "./style";
 
 var Pagination = function Pagination(_a) {
   var customizePrefixCls = _a.prefixCls,
@@ -47,36 +49,42 @@ var Pagination = function Pagination(_a) {
       _React$useContext$pag = _React$useContext.pagination,
       pagination = _React$useContext$pag === void 0 ? {} : _React$useContext$pag;
 
-  var prefixCls = getPrefixCls('pagination', customizePrefixCls);
+  var prefixCls = getPrefixCls('pagination', customizePrefixCls); // Style
+
+  var _useStyle = useStyle(prefixCls),
+      _useStyle2 = _slicedToArray(_useStyle, 2),
+      wrapSSR = _useStyle2[0],
+      hashId = _useStyle2[1];
+
   var mergedShowSizeChanger = showSizeChanger !== null && showSizeChanger !== void 0 ? showSizeChanger : pagination.showSizeChanger;
 
   var getIconsProps = function getIconsProps() {
     var ellipsis = /*#__PURE__*/React.createElement("span", {
-      className: "".concat(prefixCls, "-item-ellipsis")
+      className: prefixCls + "-item-ellipsis"
     }, "\u2022\u2022\u2022");
     var prevIcon = /*#__PURE__*/React.createElement("button", {
-      className: "".concat(prefixCls, "-item-link"),
+      className: prefixCls + "-item-link",
       type: "button",
       tabIndex: -1
     }, /*#__PURE__*/React.createElement(LeftOutlined, null));
     var nextIcon = /*#__PURE__*/React.createElement("button", {
-      className: "".concat(prefixCls, "-item-link"),
+      className: prefixCls + "-item-link",
       type: "button",
       tabIndex: -1
     }, /*#__PURE__*/React.createElement(RightOutlined, null));
     var jumpPrevIcon = /*#__PURE__*/React.createElement("a", {
-      className: "".concat(prefixCls, "-item-link")
+      className: prefixCls + "-item-link"
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-item-container")
+      className: prefixCls + "-item-container"
     }, /*#__PURE__*/React.createElement(DoubleLeftOutlined, {
-      className: "".concat(prefixCls, "-item-link-icon")
+      className: prefixCls + "-item-link-icon"
     }), ellipsis));
     var jumpNextIcon = /*#__PURE__*/React.createElement("a", {
-      className: "".concat(prefixCls, "-item-link")
+      className: prefixCls + "-item-link"
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-item-container")
+      className: prefixCls + "-item-container"
     }, /*#__PURE__*/React.createElement(DoubleRightOutlined, {
-      className: "".concat(prefixCls, "-item-link-icon")
+      className: prefixCls + "-item-link-icon"
     }), ellipsis)); // change arrows direction in right-to-left direction
 
     if (direction === 'rtl') {
@@ -106,15 +114,15 @@ var Pagination = function Pagination(_a) {
 
     var isSmall = size === 'small' || !!(xs && !size && responsive);
     var selectPrefixCls = getPrefixCls('select', customizeSelectPrefixCls);
-    var extendedClassName = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-mini"), isSmall), _defineProperty(_classNames, "".concat(prefixCls, "-rtl"), direction === 'rtl'), _classNames), className);
-    return /*#__PURE__*/React.createElement(RcPagination, _extends({}, getIconsProps(), restProps, {
+    var extendedClassName = classNames((_classNames = {}, _defineProperty(_classNames, prefixCls + "-mini", isSmall), _defineProperty(_classNames, prefixCls + "-rtl", direction === 'rtl'), _classNames), className, hashId);
+    return wrapSSR( /*#__PURE__*/React.createElement(RcPagination, _extends({}, getIconsProps(), restProps, {
       prefixCls: prefixCls,
       selectPrefixCls: selectPrefixCls,
       className: extendedClassName,
       selectComponentClass: selectComponentClass || (isSmall ? MiniSelect : MiddleSelect),
       locale: locale,
       showSizeChanger: mergedShowSizeChanger
-    }));
+    })));
   });
 };
 

package/es/pagination/Select.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import type { SelectProps } from '../select';
 import Select from '../select';
-interface MiniOrMiddleSelectInterface extends React.FC<SelectProps> {
+type CompoundedComponent = React.FC<SelectProps> & {
     Option: typeof Select.Option;
-}
-declare const MiniSelect: MiniOrMiddleSelectInterface;
-declare const MiddleSelect: MiniOrMiddleSelectInterface;
+};
+declare const MiniSelect: CompoundedComponent;
+declare const MiddleSelect: CompoundedComponent;
 export { MiniSelect, MiddleSelect };

package/es/pagination/index.d.ts

@@ -1,3 +1,3 @@
 import Pagination from './Pagination';
-export { PaginationConfig, PaginationProps } from './Pagination';
+export type { PaginationConfig, PaginationProps } from './Pagination';
 export default Pagination;

package/es/pagination/style/index.d.ts

@@ -1,3 +1,2 @@
-import '../../style/default.less';
-import './index.less';
-import '../../select/style';
+declare const _default: (prefixCls: string) => import("../../theme/internal").UseComponentStyleResult;
+export default _default;