@chaoswise/ui 3.0.23 → 3.1.0

package/lib/Antd5/input-number/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "rootClassName", "size", "disabled", "prefixCls", "addonBefore", "addonAfter", "prefix", "bordered", "readOnly", "status", "controls", "variant"];
+var _excluded = ["className", "rootClassName", "size", "disabled", "prefixCls", "addonBefore", "addonAfter", "prefix", "suffix", "bordered", "readOnly", "status", "controls", "variant"];
 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(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -19,21 +19,22 @@ import DownOutlined from '@ant-design/icons/DownOutlined';
 import UpOutlined from '@ant-design/icons/UpOutlined';
 import classNames from 'classnames';
 import RcInputNumber from 'rc-input-number';
+import ContextIsolator from '../_util/ContextIsolator';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
 import { devUseWarning } from '../_util/warning';
 import ConfigProvider, { ConfigContext } from '../config-provider';
 import DisabledContext from '../config-provider/DisabledContext';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import useSize from '../config-provider/hooks/useSize';
-import { FormItemInputContext, NoFormStyle } from '../form/context';
+import { FormItemInputContext } from '../form/context';
 import useVariant from '../form/hooks/useVariants';
-import { NoCompactStyle, useCompactItemContext } from '../space/Compact';
+import { useCompactItemContext } from '../space/Compact';
 import useStyle from './style';
 var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
   if (process.env.NODE_ENV !== 'production') {
-    var _devUseWarning = devUseWarning('InputNumber'),
-      deprecated = _devUseWarning.deprecated;
-    deprecated(!('bordered' in props), 'bordered', 'variant');
+    var typeWarning = devUseWarning('InputNumber');
+    typeWarning.deprecated(!('bordered' in props), 'bordered', 'variant');
+    typeWarning(!(props.type === 'number' && props.changeOnWheel), 'usage', 'When `type=number` is used together with `changeOnWheel`, changeOnWheel may not work properly. Please delete `type=number` if it is not necessary.');
   }
   var _React$useContext = React.useContext(ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
@@ -50,6 +51,7 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
     addonBefore = props.addonBefore,
     addonAfter = props.addonAfter,
     prefix = props.prefix,
+    suffix = props.suffix,
     bordered = props.bordered,
     readOnly = props.readOnly,
     customStatus = props.status,
@@ -97,11 +99,10 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
   // ===================== Disabled =====================
   var disabled = React.useContext(DisabledContext);
   var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
-  var _useVariant = useVariant(customVariant, bordered),
+  var _useVariant = useVariant('inputNumber', customVariant, bordered),
     _useVariant2 = _slicedToArray(_useVariant, 2),
     variant = _useVariant2[0],
     enableVariantCls = _useVariant2[1];
-  // eslint-disable-next-line react/jsx-no-useless-fragment
   var suffixNode = hasFeedback && _jsx(_Fragment, {
     children: feedbackIcon
   });
@@ -117,25 +118,21 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
     readOnly: readOnly,
     controls: controlsTemp,
     prefix: prefix,
-    suffix: suffixNode,
-    addonAfter: addonAfter && _jsx(NoCompactStyle, {
-      children: _jsx(NoFormStyle, {
-        override: true,
-        status: true,
-        children: addonAfter
-      })
+    suffix: suffixNode || suffix,
+    addonBefore: addonBefore && _jsx(ContextIsolator, {
+      form: true,
+      space: true,
+      children: addonBefore
     }),
-    addonBefore: addonBefore && _jsx(NoCompactStyle, {
-      children: _jsx(NoFormStyle, {
-        override: true,
-        status: true,
-        children: addonBefore
-      })
+    addonAfter: addonAfter && _jsx(ContextIsolator, {
+      form: true,
+      space: true,
+      children: addonAfter
     }),
     classNames: {
       input: inputNumberClass,
       variant: classNames(_defineProperty({}, "".concat(prefixCls, "-").concat(variant), enableVariantCls), getStatusClassNames(prefixCls, mergedStatus, hasFeedback)),
-      affixWrapper: classNames(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-affix-wrapper-sm"), mergedSize === 'small'), "".concat(prefixCls, "-affix-wrapper-lg"), mergedSize === 'large'), "".concat(prefixCls, "-affix-wrapper-rtl"), direction === 'rtl'), hashId),
+      affixWrapper: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-affix-wrapper-sm"), mergedSize === 'small'), "".concat(prefixCls, "-affix-wrapper-lg"), mergedSize === 'large'), "".concat(prefixCls, "-affix-wrapper-rtl"), direction === 'rtl'), "".concat(prefixCls, "-affix-wrapper-without-controls"), controls === false), hashId),
       wrapper: classNames(_defineProperty({}, "".concat(wrapperClassName, "-rtl"), direction === 'rtl'), hashId),
       groupWrapper: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-group-wrapper-sm"), mergedSize === 'small'), "".concat(prefixCls, "-group-wrapper-lg"), mergedSize === 'large'), "".concat(prefixCls, "-group-wrapper-rtl"), direction === 'rtl'), "".concat(prefixCls, "-group-wrapper-").concat(variant), enableVariantCls), getStatusClassNames("".concat(prefixCls, "-group-wrapper"), mergedStatus, hasFeedback), hashId)
     }

package/lib/Antd5/input-number/style/index.js

@@ -30,7 +30,8 @@ var genInputNumberStyles = function genInputNumberStyles(token) {
     lineWidth = token.lineWidth,
     lineType = token.lineType,
     borderRadius = token.borderRadius,
-    fontSizeLG = token.fontSizeLG,
+    inputFontSizeSM = token.inputFontSizeSM,
+    inputFontSizeLG = token.inputFontSizeLG,
     controlHeightLG = token.controlHeightLG,
     controlHeightSM = token.controlHeightSM,
     colorError = token.colorError,
@@ -41,6 +42,7 @@ var genInputNumberStyles = function genInputNumberStyles(token) {
     colorTextDescription = token.colorTextDescription,
     motionDurationMid = token.motionDurationMid,
     handleHoverColor = token.handleHoverColor,
+    handleOpacity = token.handleOpacity,
     paddingInline = token.paddingInline,
     paddingBlock = token.paddingBlock,
     handleBg = token.handleBg,
@@ -49,7 +51,6 @@ var genInputNumberStyles = function genInputNumberStyles(token) {
     borderRadiusSM = token.borderRadiusSM,
     borderRadiusLG = token.borderRadiusLG,
     controlWidth = token.controlWidth,
-    handleOpacity = token.handleOpacity,
     handleBorderColor = token.handleBorderColor,
     filledHandleBg = token.filledHandleBg,
     lineHeightLG = token.lineHeightLG,
@@ -70,7 +71,7 @@ var genInputNumberStyles = function genInputNumberStyles(token) {
     borderBlockStart: "".concat(unit(lineWidth), " ").concat(lineType, " ").concat(handleBorderColor)
   })), '&:focus-within', _defineProperty({}, "".concat(componentCls, "-handler-wrap"), {
     background: handleBg
-  })))), genBorderlessStyle(token)), {}, _defineProperty(_defineProperty({
+  })))), genBorderlessStyle(token)), {}, _defineProperty(_defineProperty(_defineProperty({
     '&-rtl': _defineProperty({
       direction: 'rtl'
     }, "".concat(componentCls, "-input"), {
@@ -78,7 +79,7 @@ var genInputNumberStyles = function genInputNumberStyles(token) {
     }),
     '&-lg': _defineProperty({
       padding: 0,
-      fontSize: fontSizeLG,
+      fontSize: inputFontSizeLG,
       lineHeight: lineHeightLG,
       borderRadius: borderRadiusLG
     }, "input".concat(componentCls, "-input"), {
@@ -87,6 +88,7 @@ var genInputNumberStyles = function genInputNumberStyles(token) {
     }),
     '&-sm': _defineProperty({
       padding: 0,
+      fontSize: inputFontSizeSM,
       borderRadius: borderRadiusSM
     }, "input".concat(componentCls, "-input"), {
       height: calc(controlHeightSM).sub(calc(lineWidth).mul(2)).equal(),
@@ -138,29 +140,30 @@ var genInputNumberStyles = function genInputNumberStyles(token) {
     }, genPlaceholderStyle(token.colorTextPlaceholder)), {}, {
       '&[type="number"]::-webkit-inner-spin-button, &[type="number"]::-webkit-outer-spin-button': {
         margin: 0,
-        /* stylelint-disable-next-line property-no-vendor-prefix */
         webkitAppearance: 'none',
         appearance: 'none'
       }
     })
-  }))), // Handler
-  _defineProperty({}, componentCls, _objectSpread(_objectSpread(_objectSpread(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "&:hover ".concat(componentCls, "-handler-wrap, &-focused ").concat(componentCls, "-handler-wrap"), {
+  }), "&:hover ".concat(componentCls, "-handler-wrap, &-focused ").concat(componentCls, "-handler-wrap"), {
+    width: token.handleWidth,
     opacity: 1
-  }), "".concat(componentCls, "-handler-wrap"), _defineProperty({
+  }))), // Handler
+  _defineProperty({}, componentCls, _objectSpread(_objectSpread(_objectSpread(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls, "-handler-wrap"), _defineProperty({
     position: 'absolute',
     insetBlockStart: 0,
     insetInlineEnd: 0,
-    width: token.handleWidth,
+    width: 0,
+    opacity: handleOpacity,
     height: '100%',
     borderStartStartRadius: 0,
     borderStartEndRadius: borderRadius,
     borderEndEndRadius: borderRadius,
     borderEndStartRadius: 0,
-    opacity: handleOpacity,
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'stretch',
-    transition: "opacity ".concat(motionDurationMid, " linear ").concat(motionDurationMid)
+    transition: "all ".concat(motionDurationMid),
+    overflow: 'hidden'
   }, "".concat(componentCls, "-handler"), _defineProperty({
     display: 'flex',
     alignItems: 'center',
@@ -222,13 +225,15 @@ var genAffixWrapperStyles = function genAffixWrapperStyles(token) {
     paddingInlineLG = token.paddingInlineLG,
     paddingInlineSM = token.paddingInlineSM,
     paddingBlockLG = token.paddingBlockLG,
-    paddingBlockSM = token.paddingBlockSM;
+    paddingBlockSM = token.paddingBlockSM,
+    motionDurationMid = token.motionDurationMid;
   return _defineProperty({}, "".concat(componentCls, "-affix-wrapper"), _objectSpread(_objectSpread(_defineProperty({}, "input".concat(componentCls, "-input"), {
     padding: "".concat(unit(paddingBlock), " 0")
-  }), genBasicInputStyle(token)), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  }), genBasicInputStyle(token)), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     // or number handler will cover form status
     position: 'relative',
     display: 'inline-flex',
+    alignItems: 'center',
     width: controlWidth,
     padding: 0,
     paddingInlineStart: paddingInline,
@@ -264,6 +269,7 @@ var genAffixWrapperStyles = function genAffixWrapperStyles(token) {
   }), "".concat(componentCls, "-handler-wrap"), {
     zIndex: 2
   }), componentCls, {
+    position: 'static',
     color: 'inherit',
     '&-prefix, &-suffix': {
       display: 'flex',
@@ -275,14 +281,18 @@ var genAffixWrapperStyles = function genAffixWrapperStyles(token) {
       marginInlineEnd: inputAffixPadding
     },
     '&-suffix': {
-      position: 'absolute',
       insetBlockStart: 0,
       insetInlineEnd: 0,
-      zIndex: 1,
       height: '100%',
       marginInlineEnd: paddingInline,
-      marginInlineStart: inputAffixPadding
+      marginInlineStart: inputAffixPadding,
+      transition: "margin ".concat(motionDurationMid)
     }
+  }), "&:hover ".concat(componentCls, "-handler-wrap, &-focused ").concat(componentCls, "-handler-wrap"), {
+    width: token.handleWidth,
+    opacity: 1
+  }), "&:not(".concat(componentCls, "-affix-wrapper-without-controls):hover ").concat(componentCls, "-suffix"), {
+    marginInlineEnd: token.calc(token.handleWidth).add(paddingInline).equal()
   })));
 };
 export default genStyleHooks('InputNumber', function (token) {

package/lib/Antd5/layout/Sider.js

@@ -24,6 +24,7 @@ import omit from 'rc-util/lib/omit';
 import isNumeric from '../_util/isNumeric';
 import { ConfigContext } from '../config-provider';
 import { LayoutContext } from './context';
+import useStyle from './style/sider';
 var dimensionMaxMap = {
   xs: '479.98px',
   sm: '575.98px',
@@ -86,6 +87,15 @@ var Sider = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     onCollapse === null || onCollapse === void 0 || onCollapse(value, type);
   };
+  // =========================== Prefix ===========================
+  var _useContext2 = useContext(ConfigContext),
+    getPrefixCls = _useContext2.getPrefixCls;
+  var prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
+  var _useStyle = useStyle(prefixCls),
+    _useStyle2 = _slicedToArray(_useStyle, 3),
+    wrapCSSVar = _useStyle2[0],
+    hashId = _useStyle2[1],
+    cssVarCls = _useStyle2[2];
   // ========================= Responsive =========================
   var responsiveHandlerRef = useRef();
   responsiveHandlerRef.current = function (mql) {
@@ -107,7 +117,7 @@ var Sider = /*#__PURE__*/React.forwardRef(function (props, ref) {
         mql = matchMedia("screen and (max-width: ".concat(dimensionMaxMap[breakpoint], ")"));
         try {
           mql.addEventListener('change', responsiveHandler);
-        } catch (error) {
+        } catch (_unused) {
           mql.addListener(responsiveHandler);
         }
         responsiveHandler(mql);
@@ -117,7 +127,7 @@ var Sider = /*#__PURE__*/React.forwardRef(function (props, ref) {
       try {
         var _mql;
         (_mql = mql) === null || _mql === void 0 || _mql.removeEventListener('change', responsiveHandler);
-      } catch (error) {
+      } catch (_unused2) {
         var _mql2;
         (_mql2 = mql) === null || _mql2 === void 0 || _mql2.removeListener(responsiveHandler);
       }
@@ -133,10 +143,7 @@ var Sider = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var toggle = function toggle() {
     handleSetCollapsed(!collapsed, 'clickTrigger');
   };
-  var _useContext2 = useContext(ConfigContext),
-    getPrefixCls = _useContext2.getPrefixCls;
   var renderSider = function renderSider() {
-    var prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
     var divProps = omit(otherProps, ['collapsed']);
     var rawWidth = collapsed ? collapsedWidth : width;
     // use "px" as fallback unit for width
@@ -170,7 +177,7 @@ var Sider = /*#__PURE__*/React.forwardRef(function (props, ref) {
       // https://github.com/ant-design/ant-design/issues/6349
       width: siderWidth
     });
-    var siderCls = classNames(prefixCls, "".concat(prefixCls, "-").concat(theme), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-collapsed"), !!collapsed), "".concat(prefixCls, "-has-trigger"), collapsible && trigger !== null && !zeroWidthTrigger), "".concat(prefixCls, "-below"), !!below), "".concat(prefixCls, "-zero-width"), parseFloat(siderWidth) === 0), className);
+    var siderCls = classNames(prefixCls, "".concat(prefixCls, "-").concat(theme), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-collapsed"), !!collapsed), "".concat(prefixCls, "-has-trigger"), collapsible && trigger !== null && !zeroWidthTrigger), "".concat(prefixCls, "-below"), !!below), "".concat(prefixCls, "-zero-width"), parseFloat(siderWidth) === 0), className, hashId, cssVarCls);
     return _jsxs("aside", _objectSpread(_objectSpread({
       className: siderCls
     }, divProps), {}, {
@@ -187,10 +194,10 @@ var Sider = /*#__PURE__*/React.forwardRef(function (props, ref) {
       siderCollapsed: collapsed
     };
   }, [collapsed]);
-  return _jsx(SiderContext.Provider, {
+  return wrapCSSVar(_jsx(SiderContext.Provider, {
     value: contextValue,
     children: renderSider()
-  });
+  }));
 });
 if (process.env.NODE_ENV !== 'production') {
   Sider.displayName = 'Sider';

package/lib/Antd5/layout/style/index.js

@@ -1,34 +1,22 @@
 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 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(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : 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 { unit } from '@ant-design/cssinjs';
 import { genStyleHooks } from '../../theme/internal';
-import genLayoutLightStyle from './light';
 var genLayoutStyle = function genLayoutStyle(token) {
   var antCls = token.antCls,
     componentCls = token.componentCls,
     colorText = token.colorText,
-    triggerColor = token.triggerColor,
     footerBg = token.footerBg,
-    triggerBg = token.triggerBg,
     headerHeight = token.headerHeight,
     headerPadding = token.headerPadding,
     headerColor = token.headerColor,
     footerPadding = token.footerPadding,
-    triggerHeight = token.triggerHeight,
-    zeroTriggerHeight = token.zeroTriggerHeight,
-    zeroTriggerWidth = token.zeroTriggerWidth,
-    motionDurationMid = token.motionDurationMid,
-    motionDurationSlow = token.motionDurationSlow,
     fontSize = token.fontSize,
-    borderRadius = token.borderRadius,
     bodyBg = token.bodyBg,
-    headerBg = token.headerBg,
-    siderBg = token.siderBg;
-  return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, componentCls, _objectSpread(_objectSpread(_defineProperty(_defineProperty(_defineProperty({
+    headerBg = token.headerBg;
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, componentCls, _defineProperty(_defineProperty(_defineProperty({
     display: 'flex',
     flex: 'auto',
     flexDirection: 'column',
@@ -45,87 +33,8 @@ var genLayoutStyle = function genLayoutStyle(token) {
     width: 0
   })), "".concat(componentCls, "-header, &").concat(componentCls, "-footer"), {
     flex: '0 0 auto'
-  }), "".concat(componentCls, "-sider"), {
-    position: 'relative',
-    // fix firefox can't set width smaller than content on flex item
-    minWidth: 0,
-    background: siderBg,
-    transition: "all ".concat(motionDurationMid, ", background 0s"),
-    '&-children': _defineProperty({
-      height: '100%',
-      // Hack for fixing margin collapse bug
-      // https://github.com/ant-design/ant-design/issues/7967
-      // solution from https://stackoverflow.com/a/33132624/3040605
-      marginTop: -0.1,
-      paddingTop: 0.1
-    }, "".concat(antCls, "-menu").concat(antCls, "-menu-inline-collapsed"), {
-      width: 'auto'
-    }),
-    '&-has-trigger': {
-      paddingBottom: triggerHeight
-    },
-    '&-right': {
-      order: 1
-    },
-    '&-trigger': {
-      position: 'fixed',
-      bottom: 0,
-      zIndex: 1,
-      height: triggerHeight,
-      color: triggerColor,
-      lineHeight: unit(triggerHeight),
-      textAlign: 'center',
-      background: triggerBg,
-      cursor: 'pointer',
-      transition: "all ".concat(motionDurationMid)
-    },
-    '&-zero-width': {
-      '> *': {
-        overflow: 'hidden'
-      },
-      '&-trigger': {
-        position: 'absolute',
-        top: headerHeight,
-        insetInlineEnd: token.calc(zeroTriggerWidth).mul(-1).equal(),
-        zIndex: 1,
-        width: zeroTriggerWidth,
-        height: zeroTriggerHeight,
-        color: triggerColor,
-        fontSize: token.fontSizeXL,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        background: siderBg,
-        borderStartStartRadius: 0,
-        borderStartEndRadius: borderRadius,
-        borderEndEndRadius: borderRadius,
-        borderEndStartRadius: 0,
-        cursor: 'pointer',
-        transition: "background ".concat(motionDurationSlow, " ease"),
-        '&::after': {
-          position: 'absolute',
-          inset: 0,
-          background: 'transparent',
-          transition: "all ".concat(motionDurationSlow),
-          content: '""'
-        },
-        '&:hover::after': {
-          background: "rgba(255, 255, 255, 0.2)"
-        },
-        '&-right': {
-          insetInlineStart: token.calc(zeroTriggerWidth).mul(-1).equal(),
-          borderStartStartRadius: borderRadius,
-          borderStartEndRadius: 0,
-          borderEndEndRadius: 0,
-          borderEndStartRadius: borderRadius
-        }
-      }
-    }
-  }), genLayoutLightStyle(token)), {}, {
-    // RTL
-    '&-rtl': {
-      direction: 'rtl'
-    }
+  }), '&-rtl', {
+    direction: 'rtl'
   })), "".concat(componentCls, "-header"), _defineProperty({
     height: headerHeight,
     padding: headerPadding,
@@ -180,8 +89,9 @@ export var prepareComponentToken = function prepareComponentToken(token) {
   };
 };
 // ============================== Export ==============================
+export var DEPRECATED_TOKENS = [['colorBgBody', 'bodyBg'], ['colorBgHeader', 'headerBg'], ['colorBgTrigger', 'triggerBg']];
 export default genStyleHooks('Layout', function (token) {
   return [genLayoutStyle(token)];
 }, prepareComponentToken, {
-  deprecatedTokens: [['colorBgBody', 'bodyBg'], ['colorBgHeader', 'headerBg'], ['colorBgTrigger', 'triggerBg']]
+  deprecatedTokens: DEPRECATED_TOKENS
 });

package/lib/Antd5/layout/style/sider.js

@@ -0,0 +1,115 @@
+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 _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : 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 { unit } from '@ant-design/cssinjs';
+import { DEPRECATED_TOKENS, prepareComponentToken } from '.';
+import { genStyleHooks } from '../../theme/internal';
+var genSiderStyle = function genSiderStyle(token) {
+  var componentCls = token.componentCls,
+    siderBg = token.siderBg,
+    motionDurationMid = token.motionDurationMid,
+    motionDurationSlow = token.motionDurationSlow,
+    antCls = token.antCls,
+    triggerHeight = token.triggerHeight,
+    triggerColor = token.triggerColor,
+    triggerBg = token.triggerBg,
+    headerHeight = token.headerHeight,
+    zeroTriggerWidth = token.zeroTriggerWidth,
+    zeroTriggerHeight = token.zeroTriggerHeight,
+    borderRadius = token.borderRadius,
+    lightSiderBg = token.lightSiderBg,
+    lightTriggerColor = token.lightTriggerColor,
+    lightTriggerBg = token.lightTriggerBg,
+    bodyBg = token.bodyBg;
+  return _defineProperty({}, componentCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    position: 'relative',
+    // fix firefox can't set width smaller than content on flex item
+    minWidth: 0,
+    background: siderBg,
+    transition: "all ".concat(motionDurationMid, ", background 0s"),
+    '&-has-trigger': {
+      paddingBottom: triggerHeight
+    },
+    '&-right': {
+      order: 1
+    }
+  }, "".concat(componentCls, "-children"), _defineProperty({
+    height: '100%',
+    // Hack for fixing margin collapse bug
+    // https://github.com/ant-design/ant-design/issues/7967
+    // solution from https://stackoverflow.com/a/33132624/3040605
+    marginTop: -0.1,
+    paddingTop: 0.1
+  }, "".concat(antCls, "-menu").concat(antCls, "-menu-inline-collapsed"), {
+    width: 'auto'
+  })), "".concat(componentCls, "-trigger"), {
+    position: 'fixed',
+    bottom: 0,
+    zIndex: 1,
+    height: triggerHeight,
+    color: triggerColor,
+    lineHeight: unit(triggerHeight),
+    textAlign: 'center',
+    background: triggerBg,
+    cursor: 'pointer',
+    transition: "all ".concat(motionDurationMid)
+  }), '&-zero-width', {
+    '> *': {
+      overflow: 'hidden'
+    },
+    '&-trigger': {
+      position: 'absolute',
+      top: headerHeight,
+      insetInlineEnd: token.calc(zeroTriggerWidth).mul(-1).equal(),
+      zIndex: 1,
+      width: zeroTriggerWidth,
+      height: zeroTriggerHeight,
+      color: triggerColor,
+      fontSize: token.fontSizeXL,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      background: siderBg,
+      borderStartStartRadius: 0,
+      borderStartEndRadius: borderRadius,
+      borderEndEndRadius: borderRadius,
+      borderEndStartRadius: 0,
+      cursor: 'pointer',
+      transition: "background ".concat(motionDurationSlow, " ease"),
+      '&::after': {
+        position: 'absolute',
+        inset: 0,
+        background: 'transparent',
+        transition: "all ".concat(motionDurationSlow),
+        content: '""'
+      },
+      '&:hover::after': {
+        background: "rgba(255, 255, 255, 0.2)"
+      },
+      '&-right': {
+        insetInlineStart: token.calc(zeroTriggerWidth).mul(-1).equal(),
+        borderStartStartRadius: borderRadius,
+        borderStartEndRadius: 0,
+        borderEndEndRadius: 0,
+        borderEndStartRadius: borderRadius
+      }
+    }
+  }), '&-light', _defineProperty(_defineProperty({
+    background: lightSiderBg
+  }, "".concat(componentCls, "-trigger"), {
+    color: lightTriggerColor,
+    background: lightTriggerBg
+  }), "".concat(componentCls, "-zero-width-trigger"), {
+    color: lightTriggerColor,
+    background: lightTriggerBg,
+    border: "1px solid ".concat(bodyBg),
+    // Safe to modify to any other color
+    borderInlineStart: 0
+  })));
+};
+export default genStyleHooks(['Layout', 'Sider'], function (token) {
+  return [genSiderStyle(token)];
+}, prepareComponentToken, {
+  deprecatedTokens: DEPRECATED_TOKENS
+});

package/lib/Antd5/list/Item.js

@@ -1,6 +1,6 @@
 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 = ["prefixCls", "className", "avatar", "title", "description"],
-  _excluded2 = ["prefixCls", "children", "actions", "extra", "className", "colStyle"];
+  _excluded2 = ["prefixCls", "children", "actions", "extra", "styles", "className", "classNames", "colStyle"];
 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(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -49,16 +49,27 @@ var InternalItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     children = props.children,
     actions = props.actions,
     extra = props.extra,
+    styles = props.styles,
     className = props.className,
+    customizeClassNames = props.classNames,
     colStyle = props.colStyle,
     others = _objectWithoutProperties(props, _excluded2);
   var _useContext2 = useContext(ListContext),
     grid = _useContext2.grid,
     itemLayout = _useContext2.itemLayout;
   var _useContext3 = useContext(ConfigContext),
-    getPrefixCls = _useContext3.getPrefixCls;
+    getPrefixCls = _useContext3.getPrefixCls,
+    list = _useContext3.list;
+  var moduleClass = function moduleClass(moduleName) {
+    var _list$item;
+    return classNames(list === null || list === void 0 || (_list$item = list.item) === null || _list$item === void 0 || (_list$item = _list$item.classNames) === null || _list$item === void 0 ? void 0 : _list$item[moduleName], customizeClassNames === null || customizeClassNames === void 0 ? void 0 : customizeClassNames[moduleName]);
+  };
+  var moduleStyle = function moduleStyle(moduleName) {
+    var _list$item2;
+    return _objectSpread(_objectSpread({}, list === null || list === void 0 || (_list$item2 = list.item) === null || _list$item2 === void 0 || (_list$item2 = _list$item2.styles) === null || _list$item2 === void 0 ? void 0 : _list$item2[moduleName]), styles === null || styles === void 0 ? void 0 : styles[moduleName]);
+  };
   var isItemContainsTextNodeAndNotSingular = function isItemContainsTextNodeAndNotSingular() {
-    var result;
+    var result = false;
     Children.forEach(children, function (element) {
       if (typeof element === 'string') {
         result = true;
@@ -74,7 +85,8 @@ var InternalItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
   var prefixCls = getPrefixCls('list', customizePrefixCls);
   var actionsContent = actions && actions.length > 0 && _jsx("ul", {
-    className: "".concat(prefixCls, "-item-action"),
+    className: classNames("".concat(prefixCls, "-item-action"), moduleClass('actions')),
+    style: moduleStyle('actions'),
     children: actions.map(function (action, i) {
       return (
         // eslint-disable-next-line react/no-array-index-key
@@ -95,7 +107,8 @@ var InternalItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: "".concat(prefixCls, "-item-main"),
       children: [children, actionsContent]
     }, "content"), _jsx("div", {
-      className: "".concat(prefixCls, "-item-extra"),
+      className: classNames("".concat(prefixCls, "-item-extra"), moduleClass('extra')),
+      style: moduleStyle('extra'),
       children: extra
     }, "extra")] : [children, actionsContent, cloneElement(extra, {
       key: 'extra'