@fle-ui/next 3.0.0-alpha.2 → 3.0.0-beta.1

package/es/date-picker/style/index.js

@@ -1,44 +1,45 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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(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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { unit } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
-import { genActiveStyle, genBasicInputStyle, genHoverStyle, initInputToken } from "../../input/style";
-import { initSlideMotion, initMoveMotion, slideDownIn, slideDownOut, slideUpIn, slideUpOut } from "../../style/motion";
-import { genComponentStyleHook, mergeToken } from "../../theme/internal";
-import { resetComponent, roundedArrow, textEllipsis } from "../../style";
+import { genActiveStyle, genBasicInputStyle, genHoverStyle, initComponentToken, initInputToken } from "../../input/style";
+import { resetComponent, textEllipsis } from "../../style";
 import { genCompactItemStyle } from "../../style/compact-item";
-
-var genPikerPadding = function genPikerPadding(token, inputHeight, fontSize, paddingHorizontal) {
-  var lineHeight = token.lineHeight;
-  var fontHeight = Math.floor(fontSize * lineHeight) + 2;
-  var paddingTop = Math.max((inputHeight - fontHeight) / 2, 0);
-  var paddingBottom = Math.max(inputHeight - fontHeight - paddingTop, 0);
+import { initMoveMotion, initSlideMotion, slideDownIn, slideDownOut, slideUpIn, slideUpOut } from "../../style/motion";
+import { genStyleHooks, mergeToken } from "../../theme/internal";
+import { genRoundedArrow, getArrowToken } from "../../style/roundedArrow";
+var genPikerPadding = function genPikerPadding(token, inputHeight, fontHeight, paddingHorizontal) {
+  var height = token.calc(fontHeight).add(2).equal();
+  var paddingTop = token.max(token.calc(inputHeight).sub(height).div(2).equal(), 0);
+  var paddingBottom = token.max(token.calc(inputHeight).sub(height).sub(paddingTop).equal(), 0);
   return {
-    padding: paddingTop + "px " + paddingHorizontal + "px " + paddingBottom + "px"
+    padding: "".concat(unit(paddingTop), " ").concat(unit(paddingHorizontal), " ").concat(unit(paddingBottom))
   };
 };
-
 var genPickerCellInnerStyle = function genPickerCellInnerStyle(token) {
   var _disabled, _ref;
-
   var componentCls = token.componentCls,
-      pickerCellInnerCls = token.pickerCellInnerCls,
-      pickerPanelCellHeight = token.pickerPanelCellHeight,
-      motionDurationSlow = token.motionDurationSlow,
-      borderRadiusSM = token.borderRadiusSM,
-      motionDurationMid = token.motionDurationMid,
-      controlItemBgHover = token.controlItemBgHover,
-      lineWidth = token.lineWidth,
-      lineType = token.lineType,
-      colorPrimary = token.colorPrimary,
-      controlItemBgActive = token.controlItemBgActive,
-      colorTextLightSolid = token.colorTextLightSolid,
-      controlHeightSM = token.controlHeightSM,
-      pickerDateHoverRangeBorderColor = token.pickerDateHoverRangeBorderColor,
-      pickerCellBorderGap = token.pickerCellBorderGap,
-      pickerBasicCellHoverWithRangeColor = token.pickerBasicCellHoverWithRangeColor,
-      pickerPanelCellWidth = token.pickerPanelCellWidth,
-      colorTextDisabled = token.colorTextDisabled,
-      colorBgContainerDisabled = token.colorBgContainerDisabled;
+    pickerCellCls = token.pickerCellCls,
+    pickerCellInnerCls = token.pickerCellInnerCls,
+    cellHeight = token.cellHeight,
+    motionDurationSlow = token.motionDurationSlow,
+    borderRadiusSM = token.borderRadiusSM,
+    motionDurationMid = token.motionDurationMid,
+    cellHoverBg = token.cellHoverBg,
+    lineWidth = token.lineWidth,
+    lineType = token.lineType,
+    colorPrimary = token.colorPrimary,
+    cellActiveWithRangeBg = token.cellActiveWithRangeBg,
+    colorTextLightSolid = token.colorTextLightSolid,
+    controlHeightSM = token.controlHeightSM,
+    cellRangeBorderColor = token.cellRangeBorderColor,
+    pickerCellBorderGap = token.pickerCellBorderGap,
+    cellHoverWithRangeBg = token.cellHoverWithRangeBg,
+    cellWidth = token.cellWidth,
+    colorTextDisabled = token.colorTextDisabled,
+    cellBgDisabled = token.cellBgDisabled;
   return _ref = {
     '&::before': {
       position: 'absolute',
@@ -46,23 +47,26 @@ var genPickerCellInnerStyle = function genPickerCellInnerStyle(token) {
       insetInlineStart: 0,
       insetInlineEnd: 0,
       zIndex: 1,
-      height: pickerPanelCellHeight,
+      height: cellHeight,
       transform: 'translateY(-50%)',
-      transition: "all " + motionDurationSlow,
+      transition: "all ".concat(motionDurationSlow),
       content: '""'
     }
   }, _defineProperty(_ref, pickerCellInnerCls, {
     position: 'relative',
     zIndex: 2,
     display: 'inline-block',
-    minWidth: pickerPanelCellHeight,
-    height: pickerPanelCellHeight,
-    lineHeight: pickerPanelCellHeight + "px",
+    minWidth: cellHeight,
+    height: cellHeight,
+    lineHeight: unit(cellHeight),
     borderRadius: borderRadiusSM,
-    transition: "background " + motionDurationMid + ", border " + motionDurationMid
-  }), _defineProperty(_ref, "&:hover:not(&-in-view),\n    &:hover:not(&-selected):not(&-range-start):not(&-range-end):not(&-range-hover-start):not(&-range-hover-end)", _defineProperty({}, pickerCellInnerCls, {
-    background: controlItemBgHover
-  })), _defineProperty(_ref, "&-in-view:is(&-today) " + pickerCellInnerCls, {
+    transition: "background ".concat(motionDurationMid, ", border ").concat(motionDurationMid)
+  }), _defineProperty(_ref, "&-range-hover-start, &-range-hover-end", _defineProperty({}, pickerCellInnerCls, {
+    borderStartEndRadius: 0,
+    borderEndEndRadius: 0
+  })), _defineProperty(_ref, "&:hover:not(".concat(pickerCellCls, "-in-view),\n    &:hover:not(").concat(pickerCellCls, "-selected):not(").concat(pickerCellCls, "-range-start):not(").concat(pickerCellCls, "-range-end):not(").concat(pickerCellCls, "-range-hover-start):not(").concat(pickerCellCls, "-range-hover-end)"), _defineProperty({}, pickerCellInnerCls, {
+    background: cellHoverBg
+  })), _defineProperty(_ref, "&-in-view".concat(pickerCellCls, "-today ").concat(pickerCellInnerCls), {
     '&::before': {
       position: 'absolute',
       top: 0,
@@ -70,132 +74,133 @@ var genPickerCellInnerStyle = function genPickerCellInnerStyle(token) {
       bottom: 0,
       insetInlineStart: 0,
       zIndex: 1,
-      border: lineWidth + "px " + lineType + " " + colorPrimary,
+      border: "".concat(unit(lineWidth), " ").concat(lineType, " ").concat(colorPrimary),
       borderRadius: borderRadiusSM,
       content: '""'
     }
-  }), _defineProperty(_ref, '&-in-view:is(&-in-range)', {
+  }), _defineProperty(_ref, "&-in-view".concat(pickerCellCls, "-in-range"), {
     position: 'relative',
     '&::before': {
-      background: controlItemBgActive
+      background: cellActiveWithRangeBg
     }
-  }), _defineProperty(_ref, "&-in-view:is(&-selected) " + pickerCellInnerCls + ",\n    &-in-view:is(&-range-start) " + pickerCellInnerCls + ",\n    &-in-view:is(&-range-end) " + pickerCellInnerCls, {
+  }), _defineProperty(_ref, "&-in-view".concat(pickerCellCls, "-selected ").concat(pickerCellInnerCls, ",\n      &-in-view").concat(pickerCellCls, "-range-start ").concat(pickerCellInnerCls, ",\n      &-in-view").concat(pickerCellCls, "-range-end ").concat(pickerCellInnerCls), {
     color: colorTextLightSolid,
     background: colorPrimary
-  }), _defineProperty(_ref, "&-in-view:is(&-range-start):not(&-range-start-single),\n      &-in-view:is(&-range-end):not(&-range-end-single)", {
+  }), _defineProperty(_ref, "&-in-view".concat(pickerCellCls, "-range-start:not(").concat(pickerCellCls, "-range-start-single),\n      &-in-view").concat(pickerCellCls, "-range-end:not(").concat(pickerCellCls, "-range-end-single)"), {
     '&::before': {
-      background: controlItemBgActive
+      background: cellActiveWithRangeBg
     }
-  }), _defineProperty(_ref, '&-in-view:is(&-range-start)::before', {
+  }), _defineProperty(_ref, "&-in-view".concat(pickerCellCls, "-range-start::before"), {
     insetInlineStart: '50%'
-  }), _defineProperty(_ref, '&-in-view:is(&-range-end)::before', {
+  }), _defineProperty(_ref, "&-in-view".concat(pickerCellCls, "-range-end::before"), {
     insetInlineEnd: '50%'
-  }), _defineProperty(_ref, "&-in-view:is(&-range-hover-start):not(&-in-range):not(&-range-start):not(&-range-end),\n      &-in-view:is(&-range-hover-end):not(&-in-range):not(&-range-start):not(&-range-end),\n      &-in-view:is(&-range-hover-start):is(&-range-start-single),\n      &-in-view:is(&-range-hover-start):is(&-range-start):is(&-range-end):is(&-range-end-near-hover),\n      &-in-view:is(&-range-hover-end):is(&-range-start):is(&-range-end):is(&-range-start-near-hover),\n      &-in-view:is(&-range-hover-end):is(&-range-end-single),\n      &-in-view:is(&-range-hover):not(&-in-range)", {
+  }), _defineProperty(_ref, "&-in-view".concat(pickerCellCls, "-range-hover-start:not(").concat(pickerCellCls, "-in-range):not(").concat(pickerCellCls, "-range-start):not(").concat(pickerCellCls, "-range-end),\n      &-in-view").concat(pickerCellCls, "-range-hover-end:not(").concat(pickerCellCls, "-in-range):not(").concat(pickerCellCls, "-range-start):not(").concat(pickerCellCls, "-range-end),\n      &-in-view").concat(pickerCellCls, "-range-hover-start").concat(pickerCellCls, "-range-start-single,\n      &-in-view").concat(pickerCellCls, "-range-hover-start").concat(pickerCellCls, "-range-start").concat(pickerCellCls, "-range-end").concat(pickerCellCls, "-range-end-near-hover,\n      &-in-view").concat(pickerCellCls, "-range-hover-end").concat(pickerCellCls, "-range-start").concat(pickerCellCls, "-range-end").concat(pickerCellCls, "-range-start-near-hover,\n      &-in-view").concat(pickerCellCls, "-range-hover-end").concat(pickerCellCls, "-range-end-single,\n      &-in-view").concat(pickerCellCls, "-range-hover:not(").concat(pickerCellCls, "-in-range)"), {
     '&::after': {
       position: 'absolute',
       top: '50%',
       zIndex: 0,
       height: controlHeightSM,
-      borderTop: lineWidth + "px dashed " + pickerDateHoverRangeBorderColor,
-      borderBottom: lineWidth + "px dashed " + pickerDateHoverRangeBorderColor,
+      borderTop: "".concat(unit(lineWidth), " dashed ").concat(cellRangeBorderColor),
+      borderBottom: "".concat(unit(lineWidth), " dashed ").concat(cellRangeBorderColor),
       transform: 'translateY(-50%)',
-      transition: "all " + motionDurationSlow,
+      transition: "all ".concat(motionDurationSlow),
       content: '""'
     }
   }), _defineProperty(_ref, "&-range-hover-start::after,\n      &-range-hover-end::after,\n      &-range-hover::after", {
     insetInlineEnd: 0,
     insetInlineStart: pickerCellBorderGap
-  }), _defineProperty(_ref, "&-in-view:is(&-in-range):is(&-range-hover)::before,\n      &-in-view:is(&-range-start):is(&-range-hover)::before,\n      &-in-view:is(&-range-end):is(&-range-hover)::before,\n      &-in-view:is(&-range-start):not(&-range-start-single):is(&-range-hover-start)::before,\n      &-in-view:is(&-range-end):not(&-range-end-single):is(&-range-hover-end)::before,\n      " + componentCls + "-panel\n      > :not(" + componentCls + "-date-panel)\n      &-in-view:is(&-in-range):is(&-range-hover-start)::before,\n      " + componentCls + "-panel\n      > :not(" + componentCls + "-date-panel)\n      &-in-view:is(&-in-range):is(&-range-hover-end)::before", {
-    background: pickerBasicCellHoverWithRangeColor
-  }), _defineProperty(_ref, "&-in-view:is(&-range-start):not(&-range-start-single):not(&-range-end) " + pickerCellInnerCls, {
+  }), _defineProperty(_ref, "&-in-view".concat(pickerCellCls, "-in-range").concat(pickerCellCls, "-range-hover::before,\n      &-in-view").concat(pickerCellCls, "-in-range").concat(pickerCellCls, "-range-hover-start::before,\n      &-in-view").concat(pickerCellCls, "-in-range").concat(pickerCellCls, "-range-hover-end::before,\n      &-in-view").concat(pickerCellCls, "-range-start").concat(pickerCellCls, "-range-hover::before,\n      &-in-view").concat(pickerCellCls, "-range-end").concat(pickerCellCls, "-range-hover::before,\n      &-in-view").concat(pickerCellCls, "-range-start:not(").concat(pickerCellCls, "-range-start-single)").concat(pickerCellCls, "-range-hover-start::before,\n      &-in-view").concat(pickerCellCls, "-range-end:not(").concat(pickerCellCls, "-range-end-single)").concat(pickerCellCls, "-range-hover-end::before,\n      ").concat(componentCls, "-panel\n      > :not(").concat(componentCls, "-date-panel)\n      &-in-view").concat(pickerCellCls, "-in-range").concat(pickerCellCls, "-range-hover-start::before,\n      ").concat(componentCls, "-panel\n      > :not(").concat(componentCls, "-date-panel)\n      &-in-view").concat(pickerCellCls, "-in-range").concat(pickerCellCls, "-range-hover-end::before"), {
+    background: cellHoverWithRangeBg
+  }), _defineProperty(_ref, "&-in-view".concat(pickerCellCls, "-range-start:not(").concat(pickerCellCls, "-range-start-single):not(").concat(pickerCellCls, "-range-end) ").concat(pickerCellInnerCls), {
     borderStartStartRadius: borderRadiusSM,
     borderEndStartRadius: borderRadiusSM,
     borderStartEndRadius: 0,
     borderEndEndRadius: 0
-  }), _defineProperty(_ref, "&-in-view:is(&-range-end):not(&-range-end-single):not(&-range-start) " + pickerCellInnerCls, {
+  }), _defineProperty(_ref, "&-in-view".concat(pickerCellCls, "-range-end:not(").concat(pickerCellCls, "-range-end-single):not(").concat(pickerCellCls, "-range-start) ").concat(pickerCellInnerCls), {
     borderStartStartRadius: 0,
     borderEndStartRadius: 0,
     borderStartEndRadius: borderRadiusSM,
     borderEndEndRadius: borderRadiusSM
-  }), _defineProperty(_ref, '&-range-hover:is(&-range-end)::after', {
+  }), _defineProperty(_ref, "&-range-hover".concat(pickerCellCls, "-range-end::after"), {
     insetInlineStart: '50%'
-  }), _defineProperty(_ref, "tr > &-in-view:is(&-range-hover):first-child::after,\n      tr > &-in-view:is(&-range-hover-end):first-child::after,\n      &-in-view:is(&-start):is(&-range-hover-edge-start):is(&-range-hover-edge-start-near-range)::after,\n      &-in-view:is(&-range-hover-edge-start):not(&-range-hover-edge-start-near-range)::after,\n      &-in-view:is(&-range-hover-start)::after", {
-    insetInlineStart: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
-    borderInlineStart: lineWidth + "px dashed " + pickerDateHoverRangeBorderColor,
-    borderStartStartRadius: lineWidth,
-    borderEndStartRadius: lineWidth
-  }), _defineProperty(_ref, "tr > &-in-view:is(&-range-hover):last-child::after,\n      tr > &-in-view:is(&-range-hover-start):last-child::after,\n      &-in-view:is(&-end):is(&-range-hover-edge-end):is(&-range-hover-edge-end-near-range)::after,\n      &-in-view:is(&-range-hover-edge-end):not(&-range-hover-edge-end-near-range)::after,\n      &-in-view:is(&-range-hover-end)::after", {
-    insetInlineEnd: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
-    borderInlineEnd: lineWidth + "px dashed " + pickerDateHoverRangeBorderColor,
-    borderStartEndRadius: lineWidth,
-    borderEndEndRadius: lineWidth
+  }), _defineProperty(_ref, "tr > &-in-view".concat(pickerCellCls, "-range-hover:first-child::after,\n      tr > &-in-view").concat(pickerCellCls, "-range-hover-end:first-child::after,\n      &-in-view").concat(pickerCellCls, "-start").concat(pickerCellCls, "-range-hover-edge-start").concat(pickerCellCls, "-range-hover-edge-start-near-range::after,\n      &-in-view").concat(pickerCellCls, "-range-hover-edge-start:not(").concat(pickerCellCls, "-range-hover-edge-start-near-range)::after,\n      &-in-view").concat(pickerCellCls, "-range-hover-start::after"), {
+    insetInlineStart: token.calc(cellWidth).sub(cellHeight).div(2).equal(),
+    borderInlineStart: "".concat(unit(lineWidth), " dashed ").concat(cellRangeBorderColor),
+    borderStartStartRadius: borderRadiusSM,
+    borderEndStartRadius: borderRadiusSM
+  }), _defineProperty(_ref, "tr > &-in-view".concat(pickerCellCls, "-range-hover:last-child::after,\n      tr > &-in-view").concat(pickerCellCls, "-range-hover-start:last-child::after,\n      &-in-view").concat(pickerCellCls, "-end").concat(pickerCellCls, "-range-hover-edge-end").concat(pickerCellCls, "-range-hover-edge-end-near-range::after,\n      &-in-view").concat(pickerCellCls, "-range-hover-edge-end:not(").concat(pickerCellCls, "-range-hover-edge-end-near-range)::after,\n      &-in-view").concat(pickerCellCls, "-range-hover-end::after"), {
+    insetInlineEnd: token.calc(cellWidth).sub(cellHeight).div(2).equal(),
+    borderInlineEnd: "".concat(unit(lineWidth), " dashed ").concat(cellRangeBorderColor),
+    borderStartEndRadius: borderRadiusSM,
+    borderEndEndRadius: borderRadiusSM
   }), _defineProperty(_ref, '&-disabled', (_disabled = {
     color: colorTextDisabled,
     pointerEvents: 'none'
   }, _defineProperty(_disabled, pickerCellInnerCls, {
     background: 'transparent'
   }), _defineProperty(_disabled, '&::before', {
-    background: colorBgContainerDisabled
-  }), _disabled)), _defineProperty(_ref, "&-disabled:is(&-today) " + pickerCellInnerCls + "::before", {
+    background: cellBgDisabled
+  }), _disabled)), _defineProperty(_ref, "&-disabled".concat(pickerCellCls, "-today ").concat(pickerCellInnerCls, "::before"), {
     borderColor: colorTextDisabled
   }), _ref;
 };
-
 export var genPanelStyle = function genPanelStyle(token) {
-  var _rtl, _decadePanel, _decadePanel2, _yearPanel, _selectedTd, _weekPanel, _datePanel, _datetimePanel, _ref5, _timePanel, _componentCls;
-
+  var _rtl, _decadePanel, _quarterPanel, _decadePanel2, _yearPanel, _yearPanel2, _$concat8, _row, _weekPanel, _datePanel, _datetimePanel, _$concat9, _timePanel, _componentCls;
   var componentCls = token.componentCls,
-      pickerCellInnerCls = token.pickerCellInnerCls,
-      pickerYearMonthCellWidth = token.pickerYearMonthCellWidth,
-      pickerControlIconSize = token.pickerControlIconSize,
-      pickerPanelCellWidth = token.pickerPanelCellWidth,
-      paddingSM = token.paddingSM,
-      paddingXS = token.paddingXS,
-      paddingXXS = token.paddingXXS,
-      colorBgContainer = token.colorBgContainer,
-      lineWidth = token.lineWidth,
-      lineType = token.lineType,
-      borderRadiusLG = token.borderRadiusLG,
-      colorPrimary = token.colorPrimary,
-      colorTextHeading = token.colorTextHeading,
-      colorSplit = token.colorSplit,
-      pickerControlIconBorderWidth = token.pickerControlIconBorderWidth,
-      colorIcon = token.colorIcon,
-      pickerTextHeight = token.pickerTextHeight,
-      motionDurationMid = token.motionDurationMid,
-      colorIconHover = token.colorIconHover,
-      fontWeightStrong = token.fontWeightStrong,
-      pickerPanelCellHeight = token.pickerPanelCellHeight,
-      pickerCellPaddingVertical = token.pickerCellPaddingVertical,
-      colorTextDisabled = token.colorTextDisabled,
-      colorText = token.colorText,
-      fontSize = token.fontSize,
-      pickerBasicCellHoverWithRangeColor = token.pickerBasicCellHoverWithRangeColor,
-      motionDurationSlow = token.motionDurationSlow,
-      pickerPanelWithoutTimeCellHeight = token.pickerPanelWithoutTimeCellHeight,
-      pickerQuarterPanelContentHeight = token.pickerQuarterPanelContentHeight,
-      colorLink = token.colorLink,
-      colorLinkActive = token.colorLinkActive,
-      colorLinkHover = token.colorLinkHover,
-      pickerDateHoverRangeBorderColor = token.pickerDateHoverRangeBorderColor,
-      borderRadiusSM = token.borderRadiusSM,
-      colorTextLightSolid = token.colorTextLightSolid,
-      borderRadius = token.borderRadius,
-      controlItemBgHover = token.controlItemBgHover,
-      pickerTimePanelColumnHeight = token.pickerTimePanelColumnHeight,
-      pickerTimePanelColumnWidth = token.pickerTimePanelColumnWidth,
-      pickerTimePanelCellHeight = token.pickerTimePanelCellHeight,
-      controlItemBgActive = token.controlItemBgActive,
-      marginXXS = token.marginXXS;
-  var pickerPanelWidth = pickerPanelCellWidth * 7 + paddingSM * 2 + 4;
-  var hoverCellFixedDistance = (pickerPanelWidth - paddingXS * 2) / 3 - pickerYearMonthCellWidth / 2;
+    pickerCellCls = token.pickerCellCls,
+    pickerCellInnerCls = token.pickerCellInnerCls,
+    pickerYearMonthCellWidth = token.pickerYearMonthCellWidth,
+    pickerControlIconSize = token.pickerControlIconSize,
+    cellWidth = token.cellWidth,
+    paddingSM = token.paddingSM,
+    paddingXS = token.paddingXS,
+    paddingXXS = token.paddingXXS,
+    colorBgContainer = token.colorBgContainer,
+    lineWidth = token.lineWidth,
+    lineType = token.lineType,
+    borderRadiusLG = token.borderRadiusLG,
+    colorPrimary = token.colorPrimary,
+    colorTextHeading = token.colorTextHeading,
+    colorSplit = token.colorSplit,
+    pickerControlIconBorderWidth = token.pickerControlIconBorderWidth,
+    colorIcon = token.colorIcon,
+    textHeight = token.textHeight,
+    motionDurationMid = token.motionDurationMid,
+    colorIconHover = token.colorIconHover,
+    fontWeightStrong = token.fontWeightStrong,
+    cellHeight = token.cellHeight,
+    pickerCellPaddingVertical = token.pickerCellPaddingVertical,
+    colorTextDisabled = token.colorTextDisabled,
+    colorText = token.colorText,
+    fontSize = token.fontSize,
+    cellHoverWithRangeBg = token.cellHoverWithRangeBg,
+    motionDurationSlow = token.motionDurationSlow,
+    withoutTimeCellHeight = token.withoutTimeCellHeight,
+    pickerQuarterPanelContentHeight = token.pickerQuarterPanelContentHeight,
+    colorLink = token.colorLink,
+    colorLinkActive = token.colorLinkActive,
+    colorLinkHover = token.colorLinkHover,
+    cellRangeBorderColor = token.cellRangeBorderColor,
+    borderRadiusSM = token.borderRadiusSM,
+    colorTextLightSolid = token.colorTextLightSolid,
+    cellHoverBg = token.cellHoverBg,
+    timeColumnHeight = token.timeColumnHeight,
+    timeColumnWidth = token.timeColumnWidth,
+    timeCellHeight = token.timeCellHeight,
+    controlItemBgActive = token.controlItemBgActive,
+    marginXXS = token.marginXXS,
+    pickerDatePanelPaddingHorizontal = token.pickerDatePanelPaddingHorizontal,
+    pickerControlIconMargin = token.pickerControlIconMargin;
+  var pickerPanelWidth = token.calc(cellWidth).mul(7).add(token.calc(pickerDatePanelPaddingHorizontal).mul(2)).equal();
+  var commonHoverCellFixedDistance = token.calc(pickerPanelWidth).sub(token.calc(paddingXS).mul(2)).div(3).sub(token.pickerYearMonthCellWidth).sub(paddingSM).equal();
+  var quarterHoverCellFixedDistance = token.calc(pickerPanelWidth).sub(token.calc(paddingXS).mul(2)).div(4).sub(token.pickerYearMonthCellWidth).equal();
   return _defineProperty({}, componentCls, (_componentCls = {
     '&-panel': {
       display: 'inline-flex',
       flexDirection: 'column',
       textAlign: 'center',
       background: colorBgContainer,
-      border: lineWidth + "px " + lineType + " " + colorSplit,
+      border: "".concat(unit(lineWidth), " ").concat(lineType, " ").concat(colorSplit),
       borderRadius: borderRadiusLG,
       outline: 'none',
       '&-focused': {
@@ -203,10 +208,10 @@ export var genPanelStyle = function genPanelStyle(token) {
       },
       '&-rtl': (_rtl = {
         direction: 'rtl'
-      }, _defineProperty(_rtl, componentCls + "-prev-icon,\n              " + componentCls + "-super-prev-icon", {
-        transform: 'rotate(135deg)'
-      }), _defineProperty(_rtl, componentCls + "-next-icon,\n              " + componentCls + "-super-next-icon", {
-        transform: 'rotate(-45deg)'
+      }, _defineProperty(_rtl, "".concat(componentCls, "-prev-icon,\n              ").concat(componentCls, "-super-prev-icon"), {
+        transform: 'rotate(45deg)'
+      }), _defineProperty(_rtl, "".concat(componentCls, "-next-icon,\n              ").concat(componentCls, "-super-next-icon"), {
+        transform: 'rotate(-135deg)'
       }), _rtl)
     }
   }, _defineProperty(_componentCls, "&-decade-panel,\n        &-year-panel,\n        &-quarter-panel,\n        &-month-panel,\n        &-week-panel,\n        &-date-panel,\n        &-time-panel", {
@@ -215,20 +220,21 @@ export var genPanelStyle = function genPanelStyle(token) {
     width: pickerPanelWidth
   }), _defineProperty(_componentCls, '&-header', {
     display: 'flex',
-    padding: "0 " + paddingXS + "px",
+    padding: "0 ".concat(unit(paddingXS)),
     color: colorTextHeading,
-    borderBottom: lineWidth + "px " + lineType + " " + colorSplit,
+    borderBottom: "".concat(unit(lineWidth), " ").concat(lineType, " ").concat(colorSplit),
     '> *': {
       flex: 'none'
     },
     button: {
       padding: 0,
       color: colorIcon,
-      lineHeight: pickerTextHeight + "px",
+      lineHeight: unit(textHeight),
       background: 'transparent',
       border: 0,
       cursor: 'pointer',
-      transition: "color " + motionDurationMid
+      transition: "color ".concat(motionDurationMid),
+      fontSize: 'inherit'
     },
     '> button': {
       minWidth: '1.6em',
@@ -240,7 +246,7 @@ export var genPanelStyle = function genPanelStyle(token) {
     '&-view': {
       flex: 'auto',
       fontWeight: fontWeightStrong,
-      lineHeight: pickerTextHeight + "px",
+      lineHeight: unit(textHeight),
       button: {
         color: 'inherit',
         fontWeight: 'inherit',
@@ -275,8 +281,8 @@ export var genPanelStyle = function genPanelStyle(token) {
   }), _defineProperty(_componentCls, "&-super-prev-icon,\n        &-super-next-icon", {
     '&::after': {
       position: 'absolute',
-      top: Math.ceil(pickerControlIconSize / 2),
-      insetInlineStart: Math.ceil(pickerControlIconSize / 2),
+      top: pickerControlIconMargin,
+      insetInlineStart: pickerControlIconMargin,
       display: 'inline-block',
       width: pickerControlIconSize,
       height: pickerControlIconSize,
@@ -297,152 +303,174 @@ export var genPanelStyle = function genPanelStyle(token) {
     borderCollapse: 'collapse',
     'th, td': {
       position: 'relative',
-      minWidth: pickerPanelCellHeight,
+      minWidth: cellHeight,
       fontWeight: 'normal'
     },
     th: {
-      height: pickerPanelCellHeight + pickerCellPaddingVertical * 2,
+      height: token.calc(cellHeight).add(token.calc(pickerCellPaddingVertical).mul(2)).equal(),
       color: colorText,
       verticalAlign: 'middle'
     }
-  }), _defineProperty(_componentCls, '&-cell', _extends({
-    padding: pickerCellPaddingVertical + "px 0",
+  }), _defineProperty(_componentCls, '&-cell', Object.assign({
+    padding: "".concat(unit(pickerCellPaddingVertical), " 0"),
     color: colorTextDisabled,
     cursor: 'pointer',
     // In view
     '&-in-view': {
       color: colorText
     }
-  }, genPickerCellInnerStyle(token))), _defineProperty(_componentCls, "&-date-panel " + componentCls + "-cell-in-view" + componentCls + "-cell-in-range" + componentCls + "-cell-range-hover-start " + pickerCellInnerCls + ",\n        &-date-panel " + componentCls + "-cell-in-view" + componentCls + "-cell-in-range" + componentCls + "-cell-range-hover-end " + pickerCellInnerCls, {
+  }, genPickerCellInnerStyle(token))), _defineProperty(_componentCls, "&-date-panel ".concat(componentCls, "-cell-in-view").concat(componentCls, "-cell-in-range").concat(componentCls, "-cell-range-hover-start ").concat(pickerCellInnerCls, ",\n        &-date-panel ").concat(componentCls, "-cell-in-view").concat(componentCls, "-cell-in-range").concat(componentCls, "-cell-range-hover-end ").concat(pickerCellInnerCls), {
     '&::after': {
       position: 'absolute',
       top: 0,
       bottom: 0,
       zIndex: -1,
-      background: pickerBasicCellHoverWithRangeColor,
-      transition: "all " + motionDurationSlow,
+      background: cellHoverWithRangeBg,
+      transition: "all ".concat(motionDurationSlow),
       content: '""'
     }
-  }), _defineProperty(_componentCls, "&-date-panel\n        " + componentCls + "-cell-in-view" + componentCls + "-cell-in-range" + componentCls + "-cell-range-hover-start\n        " + pickerCellInnerCls + "::after", {
-    insetInlineEnd: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
+  }), _defineProperty(_componentCls, "&-date-panel\n        ".concat(componentCls, "-cell-in-view").concat(componentCls, "-cell-in-range").concat(componentCls, "-cell-range-hover-start\n        ").concat(pickerCellInnerCls, "::after"), {
+    insetInlineEnd: token.calc(cellWidth).sub(cellHeight).mul(-1).div(2).equal(),
     insetInlineStart: 0
-  }), _defineProperty(_componentCls, "&-date-panel " + componentCls + "-cell-in-view" + componentCls + "-cell-in-range" + componentCls + "-cell-range-hover-end " + pickerCellInnerCls + "::after", {
+  }), _defineProperty(_componentCls, "&-date-panel ".concat(componentCls, "-cell-in-view").concat(componentCls, "-cell-in-range").concat(componentCls, "-cell-range-hover-end ").concat(pickerCellInnerCls, "::after"), {
     insetInlineEnd: 0,
-    insetInlineStart: (pickerPanelCellWidth - pickerPanelCellHeight) / 2
-  }), _defineProperty(_componentCls, '&-range-hover:is(&-range-start)::after', {
+    insetInlineStart: token.calc(cellWidth).sub(cellHeight).mul(-1).div(2).equal()
+  }), _defineProperty(_componentCls, "&-range-hover".concat(componentCls, "-range-start::after"), {
     insetInlineEnd: '50%'
-  }), _defineProperty(_componentCls, "&-decade-panel,\n        &-year-panel,\n        &-quarter-panel,\n        &-month-panel", (_decadePanel = {}, _defineProperty(_decadePanel, componentCls + "-content", {
-    height: pickerPanelWithoutTimeCellHeight * 4
+  }), _defineProperty(_componentCls, "&-decade-panel,\n        &-year-panel,\n        &-quarter-panel,\n        &-month-panel", (_decadePanel = {}, _defineProperty(_decadePanel, "".concat(componentCls, "-content"), {
+    height: token.calc(withoutTimeCellHeight).mul(4).equal()
   }), _defineProperty(_decadePanel, pickerCellInnerCls, {
-    padding: "0 " + paddingXS + "px"
-  }), _decadePanel)), _defineProperty(_componentCls, '&-quarter-panel', _defineProperty({}, componentCls + "-content", {
+    padding: "0 ".concat(unit(paddingXS))
+  }), _decadePanel)), _defineProperty(_componentCls, '&-quarter-panel', (_quarterPanel = {}, _defineProperty(_quarterPanel, "".concat(componentCls, "-content"), {
     height: pickerQuarterPanelContentHeight
-  })), _defineProperty(_componentCls, "&-panel " + componentCls + "-footer", {
-    borderTop: lineWidth + "px " + lineType + " " + colorSplit
+  }), _defineProperty(_quarterPanel, "".concat(componentCls, "-cell-range-hover-start::after"), _defineProperty({
+    insetInlineStart: quarterHoverCellFixedDistance,
+    borderInlineStart: "".concat(unit(lineWidth), " dashed ").concat(cellRangeBorderColor)
+  }, "".concat(componentCls, "-panel-rtl &"), {
+    insetInlineEnd: quarterHoverCellFixedDistance,
+    borderInlineEnd: "".concat(unit(lineWidth), " dashed ").concat(cellRangeBorderColor)
+  })), _defineProperty(_quarterPanel, "".concat(componentCls, "-cell-range-hover-end::after"), _defineProperty({
+    insetInlineEnd: quarterHoverCellFixedDistance,
+    borderInlineEnd: "".concat(unit(lineWidth), " dashed ").concat(cellRangeBorderColor)
+  }, "".concat(componentCls, "-panel-rtl &"), {
+    insetInlineStart: quarterHoverCellFixedDistance,
+    borderInlineStart: "".concat(unit(lineWidth), " dashed ").concat(cellRangeBorderColor)
+  })), _quarterPanel)), _defineProperty(_componentCls, "&-panel ".concat(componentCls, "-footer"), {
+    borderTop: "".concat(unit(lineWidth), " ").concat(lineType, " ").concat(colorSplit)
   }), _defineProperty(_componentCls, '&-footer', {
     width: 'min-content',
     minWidth: '100%',
-    lineHeight: pickerTextHeight - 2 * lineWidth + "px",
+    lineHeight: unit(token.calc(textHeight).sub(token.calc(lineWidth).mul(2)).equal()),
     textAlign: 'center',
     '&-extra': {
-      padding: "0 " + paddingSM,
-      lineHeight: pickerTextHeight - 2 * lineWidth + "px",
+      padding: "0 ".concat(unit(paddingSM)),
+      lineHeight: unit(token.calc(textHeight).sub(token.calc(lineWidth).mul(2)).equal()),
       textAlign: 'start',
       '&:not(:last-child)': {
-        borderBottom: lineWidth + "px " + lineType + " " + colorSplit
+        borderBottom: "".concat(unit(lineWidth), " ").concat(lineType, " ").concat(colorSplit)
       }
     }
   }), _defineProperty(_componentCls, '&-now', {
     textAlign: 'start'
-  }), _defineProperty(_componentCls, '&-today-btn', {
+  }), _defineProperty(_componentCls, '&-today-btn', _defineProperty({
     color: colorLink,
     '&:hover': {
       color: colorLinkHover
     },
     '&:active': {
       color: colorLinkActive
-    },
-    '&:is(&-disabled)': {
-      color: colorTextDisabled,
-      cursor: 'not-allowed'
     }
-  }), _defineProperty(_componentCls, '&-decade-panel', (_decadePanel2 = {}, _defineProperty(_decadePanel2, pickerCellInnerCls, {
-    padding: "0 " + paddingXS / 2 + "px"
-  }), _defineProperty(_decadePanel2, componentCls + "-cell::before", {
+  }, "&".concat(componentCls, "-today-btn-disabled"), {
+    color: colorTextDisabled,
+    cursor: 'not-allowed'
+  })), _defineProperty(_componentCls, '&-decade-panel', (_decadePanel2 = {}, _defineProperty(_decadePanel2, pickerCellInnerCls, {
+    padding: "0 ".concat(unit(token.calc(paddingXS).div(2).equal()))
+  }), _defineProperty(_decadePanel2, "".concat(componentCls, "-cell::before"), {
     display: 'none'
-  }), _decadePanel2)), _defineProperty(_componentCls, "&-year-panel,\n        &-quarter-panel,\n        &-month-panel", (_yearPanel = {}, _defineProperty(_yearPanel, componentCls + "-body", {
-    padding: "0 " + paddingXS + "px"
+  }), _decadePanel2)), _defineProperty(_componentCls, "&-year-panel,\n        &-quarter-panel,\n        &-month-panel", (_yearPanel = {}, _defineProperty(_yearPanel, "".concat(componentCls, "-body"), {
+    padding: "0 ".concat(unit(paddingXS))
   }), _defineProperty(_yearPanel, pickerCellInnerCls, {
     width: pickerYearMonthCellWidth
-  }), _defineProperty(_yearPanel, componentCls + "-cell-range-hover-start::after", _defineProperty({
-    insetInlineStart: hoverCellFixedDistance,
-    borderInlineStart: lineWidth + "px dashed " + pickerDateHoverRangeBorderColor,
+  }), _defineProperty(_yearPanel, "".concat(componentCls, "-cell-range-hover-start::after"), _defineProperty({
     borderStartStartRadius: borderRadiusSM,
-    borderBottomStartRadius: borderRadiusSM,
+    borderEndStartRadius: borderRadiusSM,
     borderStartEndRadius: 0,
-    borderBottomEndRadius: 0
-  }, componentCls + "-panel-rtl &", {
-    insetInlineEnd: hoverCellFixedDistance,
-    borderInlineEnd: lineWidth + "px dashed " + pickerDateHoverRangeBorderColor,
+    borderEndEndRadius: 0
+  }, "".concat(componentCls, "-panel-rtl &"), {
     borderStartStartRadius: 0,
-    borderBottomStartRadius: 0,
+    borderEndStartRadius: 0,
     borderStartEndRadius: borderRadiusSM,
-    borderBottomEndRadius: borderRadiusSM
-  })), _defineProperty(_yearPanel, componentCls + "-cell-range-hover-end::after", _defineProperty({
-    insetInlineEnd: hoverCellFixedDistance,
-    borderInlineEnd: lineWidth + "px dashed " + pickerDateHoverRangeBorderColor,
+    borderEndEndRadius: borderRadiusSM
+  })), _defineProperty(_yearPanel, "".concat(componentCls, "-cell-range-hover-end::after"), _defineProperty({
     borderStartStartRadius: 0,
-    borderBottomStartRadius: 0,
-    borderStartEndRadius: borderRadius,
-    borderBottomEndRadius: borderRadius
-  }, componentCls + "-panel-rtl &", {
-    insetInlineStart: hoverCellFixedDistance,
-    borderInlineStart: lineWidth + "px dashed " + pickerDateHoverRangeBorderColor,
-    borderStartStartRadius: borderRadius,
-    borderBottomStartRadius: borderRadius,
+    borderEndStartRadius: 0,
+    borderStartEndRadius: borderRadiusSM,
+    borderEndEndRadius: borderRadiusSM
+  }, "".concat(componentCls, "-panel-rtl &"), {
+    borderStartStartRadius: borderRadiusSM,
+    borderEndStartRadius: borderRadiusSM,
     borderStartEndRadius: 0,
-    borderBottomEndRadius: 0
-  })), _yearPanel)), _defineProperty(_componentCls, '&-week-panel', (_weekPanel = {}, _defineProperty(_weekPanel, componentCls + "-body", {
-    padding: paddingXS + "px " + paddingSM + "px"
-  }), _defineProperty(_weekPanel, componentCls + "-cell", _defineProperty({}, "&:hover " + pickerCellInnerCls + ",\n      &-selected " + pickerCellInnerCls + ",\n      " + pickerCellInnerCls, {
+    borderEndEndRadius: 0
+  })), _yearPanel)), _defineProperty(_componentCls, "&-year-panel,\n        &-month-panel", (_yearPanel2 = {}, _defineProperty(_yearPanel2, "".concat(componentCls, "-cell-range-hover-start::after"), _defineProperty({
+    insetInlineStart: commonHoverCellFixedDistance,
+    borderInlineStart: "".concat(unit(lineWidth), " dashed ").concat(cellRangeBorderColor)
+  }, "".concat(componentCls, "-panel-rtl &"), {
+    insetInlineEnd: commonHoverCellFixedDistance,
+    borderInlineEnd: "".concat(unit(lineWidth), " dashed ").concat(cellRangeBorderColor)
+  })), _defineProperty(_yearPanel2, "".concat(componentCls, "-cell-range-hover-end::after"), _defineProperty({
+    insetInlineEnd: commonHoverCellFixedDistance,
+    borderInlineEnd: "".concat(unit(lineWidth), " dashed ").concat(cellRangeBorderColor)
+  }, "".concat(componentCls, "-panel-rtl &"), {
+    insetInlineStart: commonHoverCellFixedDistance,
+    borderInlineStart: "".concat(unit(lineWidth), " dashed ").concat(cellRangeBorderColor)
+  })), _yearPanel2)), _defineProperty(_componentCls, '&-week-panel', (_weekPanel = {}, _defineProperty(_weekPanel, "".concat(componentCls, "-body"), {
+    padding: "".concat(unit(paddingXS), " ").concat(unit(paddingSM))
+  }), _defineProperty(_weekPanel, "".concat(componentCls, "-cell"), _defineProperty({}, "&:hover ".concat(pickerCellInnerCls, ",\n            &-selected ").concat(pickerCellInnerCls, ",\n            ").concat(pickerCellInnerCls), {
     background: 'transparent !important'
-  })), _defineProperty(_weekPanel, '&-row', _defineProperty({
+  })), _defineProperty(_weekPanel, '&-row', (_row = {
     td: {
-      transition: "background " + motionDurationMid,
-      '&:first-child': {
+      '&:before': {
+        transition: "background ".concat(motionDurationMid)
+      },
+      '&:first-child:before': {
         borderStartStartRadius: borderRadiusSM,
         borderEndStartRadius: borderRadiusSM
       },
-      '&:last-child': {
+      '&:last-child:before': {
         borderStartEndRadius: borderRadiusSM,
         borderEndEndRadius: borderRadiusSM
       }
-    },
-    '&:hover td': {
-      background: controlItemBgHover
     }
-  }, "&-selected td,\n            &-selected:hover td", (_selectedTd = {
-    background: colorPrimary
-  }, _defineProperty(_selectedTd, "&" + componentCls + "-cell-week", {
+  }, _defineProperty(_row, "&:hover td", {
+    '&:before': {
+      background: cellHoverBg
+    }
+  }), _defineProperty(_row, "&-range-start td,\n            &-range-end td,\n            &-selected td", _defineProperty({}, "&".concat(pickerCellCls), (_$concat8 = {
+    '&:before': {
+      background: colorPrimary
+    }
+  }, _defineProperty(_$concat8, "&".concat(componentCls, "-cell-week"), {
     color: new TinyColor(colorTextLightSolid).setAlpha(0.5).toHexString()
-  }), _defineProperty(_selectedTd, "&" + componentCls + "-cell-today " + pickerCellInnerCls + "::before", {
-    borderColor: colorTextLightSolid
-  }), _defineProperty(_selectedTd, pickerCellInnerCls, {
+  }), _defineProperty(_$concat8, pickerCellInnerCls, {
     color: colorTextLightSolid
-  }), _selectedTd))), _weekPanel)), _defineProperty(_componentCls, '&-date-panel', (_datePanel = {}, _defineProperty(_datePanel, componentCls + "-body", {
-    padding: paddingXS + "px " + paddingSM + "px"
-  }), _defineProperty(_datePanel, componentCls + "-content", {
-    width: pickerPanelCellWidth * 7,
+  }), _$concat8))), _defineProperty(_row, "&-range-hover td:before", {
+    background: controlItemBgActive
+  }), _row)), _weekPanel)), _defineProperty(_componentCls, '&-date-panel', (_datePanel = {}, _defineProperty(_datePanel, "".concat(componentCls, "-body"), {
+    padding: "".concat(unit(paddingXS), " ").concat(unit(pickerDatePanelPaddingHorizontal))
+  }), _defineProperty(_datePanel, "".concat(componentCls, "-content"), {
+    width: token.calc(cellWidth).mul(7).equal(),
     th: {
-      width: pickerPanelCellWidth
+      width: cellWidth,
+      boxSizing: 'border-box',
+      padding: 0
     }
   }), _datePanel)), _defineProperty(_componentCls, '&-datetime-panel', (_datetimePanel = {
     display: 'flex'
-  }, _defineProperty(_datetimePanel, componentCls + "-time-panel", {
-    borderInlineStart: lineWidth + "px " + lineType + " " + colorSplit
-  }), _defineProperty(_datetimePanel, componentCls + "-date-panel,\n          " + componentCls + "-time-panel", {
-    transition: "opacity " + motionDurationSlow
-  }), _defineProperty(_datetimePanel, '&-active', _defineProperty({}, componentCls + "-date-panel,\n            " + componentCls + "-time-panel", {
+  }, _defineProperty(_datetimePanel, "".concat(componentCls, "-time-panel"), {
+    borderInlineStart: "".concat(unit(lineWidth), " ").concat(lineType, " ").concat(colorSplit)
+  }), _defineProperty(_datetimePanel, "".concat(componentCls, "-date-panel,\n          ").concat(componentCls, "-time-panel"), {
+    transition: "opacity ".concat(motionDurationSlow)
+  }), _defineProperty(_datetimePanel, '&-active', _defineProperty({}, "".concat(componentCls, "-date-panel,\n            ").concat(componentCls, "-time-panel"), {
     opacity: 0.3,
     '&-active': {
       opacity: 1
@@ -451,27 +479,40 @@ export var genPanelStyle = function genPanelStyle(token) {
     width: 'auto',
     minWidth: 'auto',
     direction: 'ltr'
-  }, _defineProperty(_timePanel, componentCls + "-content", {
+  }, _defineProperty(_timePanel, "".concat(componentCls, "-content"), {
     display: 'flex',
     flex: 'auto',
-    height: pickerTimePanelColumnHeight
+    height: timeColumnHeight
   }), _defineProperty(_timePanel, '&-column', {
     flex: '1 0 auto',
-    width: pickerTimePanelColumnWidth,
-    margin: paddingXXS + "px 0",
+    width: timeColumnWidth,
+    margin: "".concat(unit(paddingXXS), " 0"),
     padding: 0,
     overflowY: 'hidden',
     textAlign: 'start',
     listStyle: 'none',
-    transition: "background " + motionDurationMid,
+    transition: "background ".concat(motionDurationMid),
     overflowX: 'hidden',
+    '&::-webkit-scrollbar': {
+      width: 8,
+      backgroundColor: 'transparent'
+    },
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: token.colorTextTertiary,
+      borderRadius: 4
+    },
+    // For Firefox
+    '&': {
+      scrollbarWidth: 'thin',
+      scrollbarColor: "".concat(token.colorTextTertiary, " transparent")
+    },
     '&::after': {
       display: 'block',
-      height: pickerTimePanelColumnHeight - pickerTimePanelCellHeight,
+      height: token.calc(timeColumnHeight).sub(timeCellHeight).equal(),
       content: '""'
     },
     '&:not(:first-child)': {
-      borderInlineStart: lineWidth + "px " + lineType + " " + colorSplit
+      borderInlineStart: "".concat(unit(lineWidth), " ").concat(lineType, " ").concat(colorSplit)
     },
     '&-active': {
       background: new TinyColor(controlItemBgActive).setAlpha(0.2).toHexString()
@@ -482,148 +523,140 @@ export var genPanelStyle = function genPanelStyle(token) {
     '> li': _defineProperty({
       margin: 0,
       padding: 0
-    }, "&" + componentCls + "-time-panel-cell", (_ref5 = {
+    }, "&".concat(componentCls, "-time-panel-cell"), (_$concat9 = {
       marginInline: marginXXS
-    }, _defineProperty(_ref5, componentCls + "-time-panel-cell-inner", {
+    }, _defineProperty(_$concat9, "".concat(componentCls, "-time-panel-cell-inner"), {
       display: 'block',
-      width: pickerTimePanelColumnWidth - 2 * marginXXS,
-      height: pickerTimePanelCellHeight,
+      width: token.calc(timeColumnWidth).sub(token.calc(marginXXS).mul(2)).equal(),
+      height: timeCellHeight,
       margin: 0,
       paddingBlock: 0,
       paddingInlineEnd: 0,
-      paddingInlineStart: (pickerTimePanelColumnWidth - pickerTimePanelCellHeight) / 2,
+      paddingInlineStart: token.calc(timeColumnWidth).sub(timeCellHeight).div(2).equal(),
       color: colorText,
-      lineHeight: pickerTimePanelCellHeight + "px",
+      lineHeight: unit(timeCellHeight),
       borderRadius: borderRadiusSM,
       cursor: 'pointer',
-      transition: "background " + motionDurationMid,
+      transition: "background ".concat(motionDurationMid),
       '&:hover': {
-        background: controlItemBgHover
+        background: cellHoverBg
       }
-    }), _defineProperty(_ref5, '&-selected', _defineProperty({}, componentCls + "-time-panel-cell-inner", {
+    }), _defineProperty(_$concat9, '&-selected', _defineProperty({}, "".concat(componentCls, "-time-panel-cell-inner"), {
       background: controlItemBgActive
-    })), _defineProperty(_ref5, '&-disabled', _defineProperty({}, componentCls + "-time-panel-cell-inner", {
+    })), _defineProperty(_$concat9, '&-disabled', _defineProperty({}, "".concat(componentCls, "-time-panel-cell-inner"), {
       color: colorTextDisabled,
       background: 'transparent',
       cursor: 'not-allowed'
-    })), _ref5))
-  }), _timePanel)), _defineProperty(_componentCls, "&-datetime-panel " + componentCls + "-time-panel-column:after", {
-    height: pickerTimePanelColumnHeight - pickerTimePanelCellHeight + paddingXXS * 2
+    })), _$concat9))
+  }), _timePanel)), _defineProperty(_componentCls, "&-datetime-panel ".concat(componentCls, "-time-panel-column:after"), {
+    height: token.calc(timeColumnHeight).sub(timeCellHeight).add(token.calc(paddingXXS).mul(2)).equal()
   }), _componentCls));
 };
-
 var genPickerStatusStyle = function genPickerStatusStyle(token) {
+  var _$concat10, _$concat11, _$concat$concat;
   var componentCls = token.componentCls,
-      colorBgContainer = token.colorBgContainer,
-      colorError = token.colorError,
-      colorErrorOutline = token.colorErrorOutline,
-      colorWarning = token.colorWarning,
-      colorWarningOutline = token.colorWarningOutline;
-  return _defineProperty({}, componentCls, {
-    '&-status-error&': _defineProperty({
-      '&, &:not([disabled]):hover': {
-        backgroundColor: colorBgContainer,
-        borderColor: colorError
-      },
-      '&-focused, &:focus': _extends({}, genActiveStyle(mergeToken(token, {
-        inputBorderActiveColor: colorError,
-        inputBorderHoverColor: colorError,
-        controlOutline: colorErrorOutline
-      })))
-    }, componentCls + "-active-bar", {
-      background: colorError
-    }),
-    '&-status-warning&': _defineProperty({
-      '&, &:not([disabled]):hover': {
-        backgroundColor: colorBgContainer,
-        borderColor: colorWarning
-      },
-      '&-focused, &:focus': _extends({}, genActiveStyle(mergeToken(token, {
-        inputBorderActiveColor: colorWarning,
-        inputBorderHoverColor: colorWarning,
-        controlOutline: colorWarningOutline
-      })))
-    }, componentCls + "-active-bar", {
-      background: colorWarning
-    })
-  });
+    colorBgContainer = token.colorBgContainer,
+    colorError = token.colorError,
+    errorActiveShadow = token.errorActiveShadow,
+    colorWarning = token.colorWarning,
+    warningActiveShadow = token.warningActiveShadow,
+    colorErrorHover = token.colorErrorHover,
+    colorWarningHover = token.colorWarningHover;
+  return _defineProperty({}, "".concat(componentCls, ":not(").concat(componentCls, "-disabled):not([disabled])"), (_$concat$concat = {}, _defineProperty(_$concat$concat, "&".concat(componentCls, "-status-error"), (_$concat10 = {
+    backgroundColor: colorBgContainer,
+    borderColor: colorError,
+    '&:hover': {
+      borderColor: colorErrorHover
+    }
+  }, _defineProperty(_$concat10, "&".concat(componentCls, "-focused, &:focus"), Object.assign({}, genActiveStyle(mergeToken(token, {
+    activeBorderColor: colorError,
+    activeShadow: errorActiveShadow
+  })))), _defineProperty(_$concat10, "".concat(componentCls, "-active-bar"), {
+    background: colorError
+  }), _$concat10)), _defineProperty(_$concat$concat, "&".concat(componentCls, "-status-warning"), (_$concat11 = {
+    backgroundColor: colorBgContainer,
+    borderColor: colorWarning,
+    '&:hover': {
+      borderColor: colorWarningHover
+    }
+  }, _defineProperty(_$concat11, "&".concat(componentCls, "-focused, &:focus"), Object.assign({}, genActiveStyle(mergeToken(token, {
+    activeBorderColor: colorWarning,
+    activeShadow: warningActiveShadow
+  })))), _defineProperty(_$concat11, "".concat(componentCls, "-active-bar"), {
+    background: colorWarning
+  }), _$concat11)), _$concat$concat));
 };
-
 var genPickerStyle = function genPickerStyle(token) {
-  var _ref9, _ref11, _range, _ref12, _ref13, _ref14, _ref15, _extends3, _rtl2, _extends4;
-
+  var _$concat14, _$concat16, _range, _$concat19, _$concat20, _$concat21, _$concat22, _Object$assign2, _rtl2, _Object$assign3;
   var componentCls = token.componentCls,
-      antCls = token.antCls,
-      boxShadowPopoverArrow = token.boxShadowPopoverArrow,
-      controlHeight = token.controlHeight,
-      fontSize = token.fontSize,
-      inputPaddingHorizontal = token.inputPaddingHorizontal,
-      colorBgContainer = token.colorBgContainer,
-      lineWidth = token.lineWidth,
-      lineType = token.lineType,
-      colorBorder = token.colorBorder,
-      borderRadius = token.borderRadius,
-      motionDurationMid = token.motionDurationMid,
-      colorBgContainerDisabled = token.colorBgContainerDisabled,
-      colorTextDisabled = token.colorTextDisabled,
-      colorTextPlaceholder = token.colorTextPlaceholder,
-      controlHeightLG = token.controlHeightLG,
-      fontSizeLG = token.fontSizeLG,
-      controlHeightSM = token.controlHeightSM,
-      inputPaddingHorizontalSM = token.inputPaddingHorizontalSM,
-      paddingXS = token.paddingXS,
-      marginXS = token.marginXS,
-      colorTextDescription = token.colorTextDescription,
-      lineWidthBold = token.lineWidthBold,
-      lineHeight = token.lineHeight,
-      colorPrimary = token.colorPrimary,
-      motionDurationSlow = token.motionDurationSlow,
-      zIndexPopup = token.zIndexPopup,
-      paddingXXS = token.paddingXXS,
-      paddingSM = token.paddingSM,
-      pickerTextHeight = token.pickerTextHeight,
-      controlItemBgActive = token.controlItemBgActive,
-      colorPrimaryBorder = token.colorPrimaryBorder,
-      sizePopupArrow = token.sizePopupArrow,
-      borderRadiusXS = token.borderRadiusXS,
-      borderRadiusOuter = token.borderRadiusOuter,
-      colorBgElevated = token.colorBgElevated,
-      borderRadiusLG = token.borderRadiusLG,
-      boxShadowSecondary = token.boxShadowSecondary,
-      borderRadiusSM = token.borderRadiusSM,
-      colorSplit = token.colorSplit,
-      controlItemBgHover = token.controlItemBgHover,
-      presetsWidth = token.presetsWidth,
-      presetsMaxWidth = token.presetsMaxWidth;
-  return [_defineProperty({}, componentCls, _extends(_extends(_extends(_extends(_extends({}, resetComponent(token)), genPikerPadding(token, controlHeight, fontSize, inputPaddingHorizontal)), {
+    antCls = token.antCls,
+    controlHeight = token.controlHeight,
+    paddingInline = token.paddingInline,
+    colorBgContainer = token.colorBgContainer,
+    lineWidth = token.lineWidth,
+    lineType = token.lineType,
+    colorBorder = token.colorBorder,
+    borderRadius = token.borderRadius,
+    motionDurationMid = token.motionDurationMid,
+    colorBgContainerDisabled = token.colorBgContainerDisabled,
+    colorTextDisabled = token.colorTextDisabled,
+    colorTextPlaceholder = token.colorTextPlaceholder,
+    controlHeightLG = token.controlHeightLG,
+    fontSizeLG = token.fontSizeLG,
+    controlHeightSM = token.controlHeightSM,
+    paddingInlineSM = token.paddingInlineSM,
+    paddingXS = token.paddingXS,
+    marginXS = token.marginXS,
+    colorTextDescription = token.colorTextDescription,
+    lineWidthBold = token.lineWidthBold,
+    colorPrimary = token.colorPrimary,
+    motionDurationSlow = token.motionDurationSlow,
+    zIndexPopup = token.zIndexPopup,
+    paddingXXS = token.paddingXXS,
+    paddingSM = token.paddingSM,
+    textHeight = token.textHeight,
+    cellActiveWithRangeBg = token.cellActiveWithRangeBg,
+    colorPrimaryBorder = token.colorPrimaryBorder,
+    sizePopupArrow = token.sizePopupArrow,
+    colorBgElevated = token.colorBgElevated,
+    borderRadiusLG = token.borderRadiusLG,
+    boxShadowSecondary = token.boxShadowSecondary,
+    borderRadiusSM = token.borderRadiusSM,
+    colorSplit = token.colorSplit,
+    cellHoverBg = token.cellHoverBg,
+    presetsWidth = token.presetsWidth,
+    presetsMaxWidth = token.presetsMaxWidth,
+    boxShadowPopoverArrow = token.boxShadowPopoverArrow,
+    colorTextQuaternary = token.colorTextQuaternary,
+    fontHeight = token.fontHeight,
+    fontHeightLG = token.fontHeightLG,
+    lineHeightLG = token.lineHeightLG;
+  return [_defineProperty({}, componentCls, Object.assign(Object.assign(Object.assign({}, resetComponent(token)), genPikerPadding(token, controlHeight, fontHeight, paddingInline)), (_Object$assign3 = {
     position: 'relative',
     display: 'inline-flex',
     alignItems: 'center',
     background: colorBgContainer,
-    border: lineWidth + "px " + lineType + " " + colorBorder,
+    lineHeight: 1,
+    border: "".concat(unit(lineWidth), " ").concat(lineType, " ").concat(colorBorder),
     borderRadius: borderRadius,
-    transition: "border " + motionDurationMid + ", box-shadow " + motionDurationMid
-  }), genCompactItemStyle(token, componentCls, '', componentCls + "-focused")), (_extends4 = {
-    '&:hover, &-focused': _extends({}, genHoverStyle(token)),
-    '&-focused': _extends({}, genActiveStyle(token)),
-    '&&-disabled': _defineProperty({
-      background: colorBgContainerDisabled,
-      borderColor: colorBorder,
-      cursor: 'not-allowed'
-    }, componentCls + "-suffix", {
-      color: colorTextDisabled
-    }),
-    '&&-borderless': {
-      backgroundColor: 'transparent !important',
-      borderColor: 'transparent !important',
-      boxShadow: 'none !important'
-    }
-  }, _defineProperty(_extends4, componentCls + "-input", {
+    transition: "border ".concat(motionDurationMid, ", box-shadow ").concat(motionDurationMid),
+    '&:hover': Object.assign({}, genHoverStyle(token))
+  }, _defineProperty(_Object$assign3, "&-focused".concat(componentCls), Object.assign({}, genActiveStyle(token))), _defineProperty(_Object$assign3, "&".concat(componentCls, "-disabled"), _defineProperty({
+    background: colorBgContainerDisabled,
+    borderColor: colorBorder,
+    cursor: 'not-allowed'
+  }, "".concat(componentCls, "-suffix"), {
+    color: colorTextQuaternary
+  })), _defineProperty(_Object$assign3, "&".concat(componentCls, "-borderless"), {
+    backgroundColor: 'transparent !important',
+    borderColor: 'transparent !important',
+    boxShadow: 'none !important'
+  }), _defineProperty(_Object$assign3, "".concat(componentCls, "-input"), {
     position: 'relative',
     display: 'inline-flex',
     alignItems: 'center',
     width: '100%',
-    '> input': _extends(_extends({}, genBasicInputStyle(token)), {
+    '> input': Object.assign(Object.assign({}, genBasicInputStyle(token)), {
       flex: 'auto',
       // Fix Firefox flex not correct:
       // https://github.com/ant-design/ant-design/pull/20023#issuecomment-564389553
@@ -632,6 +665,8 @@ var genPickerStyle = function genPickerStyle(token) {
       padding: 0,
       background: 'transparent',
       border: 0,
+      borderRadius: 0,
+      fontFamily: 'inherit',
       '&:focus': {
         boxShadow: 'none'
       },
@@ -639,7 +674,7 @@ var genPickerStyle = function genPickerStyle(token) {
         background: 'transparent'
       }
     }),
-    '&:hover': _defineProperty({}, componentCls + "-clear", {
+    '&:hover': _defineProperty({}, "".concat(componentCls, "-clear"), {
       opacity: 1
     }),
     '&-placeholder': {
@@ -647,13 +682,14 @@ var genPickerStyle = function genPickerStyle(token) {
         color: colorTextPlaceholder
       }
     }
-  }), _defineProperty(_extends4, '&-large', _extends(_extends({}, genPikerPadding(token, controlHeightLG, fontSizeLG, inputPaddingHorizontal)), _defineProperty({}, componentCls + "-input > input", {
-    fontSize: fontSizeLG
-  }))), _defineProperty(_extends4, '&-small', _extends({}, genPikerPadding(token, controlHeightSM, fontSize, inputPaddingHorizontalSM))), _defineProperty(_extends4, componentCls + "-suffix", {
+  }), _defineProperty(_Object$assign3, '&-large', Object.assign(Object.assign({}, genPikerPadding(token, controlHeightLG, fontHeightLG, paddingInline)), _defineProperty({}, "".concat(componentCls, "-input > input"), {
+    fontSize: fontSizeLG,
+    lineHeight: lineHeightLG
+  }))), _defineProperty(_Object$assign3, '&-small', Object.assign({}, genPikerPadding(token, controlHeightSM, fontHeight, paddingInlineSM))), _defineProperty(_Object$assign3, "".concat(componentCls, "-suffix"), {
     display: 'flex',
     flex: 'none',
     alignSelf: 'center',
-    marginInlineStart: paddingXS / 2,
+    marginInlineStart: token.calc(paddingXS).div(2).equal(),
     color: colorTextDisabled,
     lineHeight: 1,
     pointerEvents: 'none',
@@ -663,7 +699,7 @@ var genPickerStyle = function genPickerStyle(token) {
         marginInlineEnd: marginXS
       }
     }
-  }), _defineProperty(_extends4, componentCls + "-clear", {
+  }), _defineProperty(_Object$assign3, "".concat(componentCls, "-clear"), {
     position: 'absolute',
     top: '50%',
     insetInlineEnd: 0,
@@ -673,14 +709,14 @@ var genPickerStyle = function genPickerStyle(token) {
     transform: 'translateY(-50%)',
     cursor: 'pointer',
     opacity: 0,
-    transition: "opacity " + motionDurationMid + ", color " + motionDurationMid,
+    transition: "opacity ".concat(motionDurationMid, ", color ").concat(motionDurationMid),
     '> *': {
       verticalAlign: 'top'
     },
     '&:hover': {
       color: colorTextDescription
     }
-  }), _defineProperty(_extends4, componentCls + "-separator", (_ref9 = {
+  }), _defineProperty(_Object$assign3, "".concat(componentCls, "-separator"), (_$concat14 = {
     position: 'relative',
     display: 'inline-block',
     width: '1em',
@@ -689,36 +725,36 @@ var genPickerStyle = function genPickerStyle(token) {
     fontSize: fontSizeLG,
     verticalAlign: 'top',
     cursor: 'default'
-  }, _defineProperty(_ref9, componentCls + "-focused &", {
+  }, _defineProperty(_$concat14, "".concat(componentCls, "-focused &"), {
     color: colorTextDescription
-  }), _defineProperty(_ref9, componentCls + "-range-separator &", _defineProperty({}, componentCls + "-disabled &", {
+  }), _defineProperty(_$concat14, "".concat(componentCls, "-range-separator &"), _defineProperty({}, "".concat(componentCls, "-disabled &"), {
     cursor: 'not-allowed'
-  })), _ref9)), _defineProperty(_extends4, '&-range', (_range = {
+  })), _$concat14)), _defineProperty(_Object$assign3, '&-range', (_range = {
     position: 'relative',
     display: 'inline-flex'
-  }, _defineProperty(_range, componentCls + "-clear", {
-    insetInlineEnd: inputPaddingHorizontal
-  }), _defineProperty(_range, '&:hover', _defineProperty({}, componentCls + "-clear", {
+  }, _defineProperty(_range, "".concat(componentCls, "-clear"), {
+    insetInlineEnd: paddingInline
+  }), _defineProperty(_range, '&:hover', _defineProperty({}, "".concat(componentCls, "-clear"), {
     opacity: 1
-  })), _defineProperty(_range, componentCls + "-active-bar", {
-    bottom: -lineWidth,
+  })), _defineProperty(_range, "".concat(componentCls, "-active-bar"), {
+    bottom: token.calc(lineWidth).mul(-1).equal(),
     height: lineWidthBold,
-    marginInlineStart: inputPaddingHorizontal,
+    marginInlineStart: paddingInline,
     background: colorPrimary,
     opacity: 0,
-    transition: "all " + motionDurationSlow + " ease-out",
+    transition: "all ".concat(motionDurationSlow, " ease-out"),
     pointerEvents: 'none'
-  }), _defineProperty(_range, "&" + componentCls + "-focused", _defineProperty({}, componentCls + "-active-bar", {
+  }), _defineProperty(_range, "&".concat(componentCls, "-focused"), _defineProperty({}, "".concat(componentCls, "-active-bar"), {
     opacity: 1
-  })), _defineProperty(_range, componentCls + "-range-separator", {
+  })), _defineProperty(_range, "".concat(componentCls, "-range-separator"), {
     alignItems: 'center',
-    padding: "0 " + paddingXS + "px",
+    padding: "0 ".concat(unit(paddingXS)),
     lineHeight: 1
-  }), _defineProperty(_range, "&" + componentCls + "-small", (_ref11 = {}, _defineProperty(_ref11, componentCls + "-clear", {
-    insetInlineEnd: inputPaddingHorizontalSM
-  }), _defineProperty(_ref11, componentCls + "-active-bar", {
-    marginInlineStart: inputPaddingHorizontalSM
-  }), _ref11)), _range)), _defineProperty(_extends4, '&-dropdown', _extends(_extends(_extends({}, resetComponent(token)), genPanelStyle(token)), (_extends3 = {
+  }), _defineProperty(_range, "&".concat(componentCls, "-small"), (_$concat16 = {}, _defineProperty(_$concat16, "".concat(componentCls, "-clear"), {
+    insetInlineEnd: paddingInlineSM
+  }), _defineProperty(_$concat16, "".concat(componentCls, "-active-bar"), {
+    marginInlineStart: paddingInlineSM
+  }), _$concat16)), _range)), _defineProperty(_Object$assign3, '&-dropdown', Object.assign(Object.assign(Object.assign({}, resetComponent(token)), genPanelStyle(token)), (_Object$assign2 = {
     position: 'absolute',
     // Fix incorrect position of picker popup
     // https://github.com/ant-design/ant-design/issues/35590
@@ -727,35 +763,32 @@ var genPickerStyle = function genPickerStyle(token) {
       _skip_check_: true,
       value: -9999
     },
-    zIndex: zIndexPopup,
-    '&&-hidden': {
-      display: 'none'
-    },
-    '&&-placement-bottomLeft': _defineProperty({}, componentCls + "-range-arrow", {
-      top: 0,
-      display: 'block',
-      transform: 'translateY(-100%)'
-    }),
-    '&&-placement-topLeft': _defineProperty({}, componentCls + "-range-arrow", {
-      bottom: 0,
-      display: 'block',
-      transform: 'translateY(100%) rotate(180deg)'
-    })
-  }, _defineProperty(_extends3, "&" + antCls + "-slide-up-enter" + antCls + "-slide-up-enter-active&-placement-topLeft,\n          &" + antCls + "-slide-up-enter" + antCls + "-slide-up-enter-active&-placement-topRight,\n          &" + antCls + "-slide-up-appear" + antCls + "-slide-up-appear-active&-placement-topLeft,\n          &" + antCls + "-slide-up-appear" + antCls + "-slide-up-appear-active&-placement-topRight", {
+    zIndex: zIndexPopup
+  }, _defineProperty(_Object$assign2, "&".concat(componentCls, "-dropdown-hidden"), {
+    display: 'none'
+  }), _defineProperty(_Object$assign2, "&".concat(componentCls, "-dropdown-placement-bottomLeft"), _defineProperty({}, "".concat(componentCls, "-range-arrow"), {
+    top: 0,
+    display: 'block',
+    transform: 'translateY(-100%)'
+  })), _defineProperty(_Object$assign2, "&".concat(componentCls, "-dropdown-placement-topLeft"), _defineProperty({}, "".concat(componentCls, "-range-arrow"), {
+    bottom: 0,
+    display: 'block',
+    transform: 'translateY(100%) rotate(180deg)'
+  })), _defineProperty(_Object$assign2, "&".concat(antCls, "-slide-up-enter").concat(antCls, "-slide-up-enter-active").concat(componentCls, "-dropdown-placement-topLeft,\n          &").concat(antCls, "-slide-up-enter").concat(antCls, "-slide-up-enter-active").concat(componentCls, "-dropdown-placement-topRight,\n          &").concat(antCls, "-slide-up-appear").concat(antCls, "-slide-up-appear-active").concat(componentCls, "-dropdown-placement-topLeft,\n          &").concat(antCls, "-slide-up-appear").concat(antCls, "-slide-up-appear-active").concat(componentCls, "-dropdown-placement-topRight"), {
     animationName: slideDownIn
-  }), _defineProperty(_extends3, "&" + antCls + "-slide-up-enter" + antCls + "-slide-up-enter-active&-placement-bottomLeft,\n          &" + antCls + "-slide-up-enter" + antCls + "-slide-up-enter-active&-placement-bottomRight,\n          &" + antCls + "-slide-up-appear" + antCls + "-slide-up-appear-active&-placement-bottomLeft,\n          &" + antCls + "-slide-up-appear" + antCls + "-slide-up-appear-active&-placement-bottomRight", {
+  }), _defineProperty(_Object$assign2, "&".concat(antCls, "-slide-up-enter").concat(antCls, "-slide-up-enter-active").concat(componentCls, "-dropdown-placement-bottomLeft,\n          &").concat(antCls, "-slide-up-enter").concat(antCls, "-slide-up-enter-active").concat(componentCls, "-dropdown-placement-bottomRight,\n          &").concat(antCls, "-slide-up-appear").concat(antCls, "-slide-up-appear-active").concat(componentCls, "-dropdown-placement-bottomLeft,\n          &").concat(antCls, "-slide-up-appear").concat(antCls, "-slide-up-appear-active").concat(componentCls, "-dropdown-placement-bottomRight"), {
     animationName: slideUpIn
-  }), _defineProperty(_extends3, "&" + antCls + "-slide-up-leave" + antCls + "-slide-up-leave-active&-placement-topLeft,\n          &" + antCls + "-slide-up-leave" + antCls + "-slide-up-leave-active&-placement-topRight", {
+  }), _defineProperty(_Object$assign2, "&".concat(antCls, "-slide-up-leave").concat(antCls, "-slide-up-leave-active").concat(componentCls, "-dropdown-placement-topLeft,\n          &").concat(antCls, "-slide-up-leave").concat(antCls, "-slide-up-leave-active").concat(componentCls, "-dropdown-placement-topRight"), {
     animationName: slideDownOut
-  }), _defineProperty(_extends3, "&" + antCls + "-slide-up-leave" + antCls + "-slide-up-leave-active&-placement-bottomLeft,\n          &" + antCls + "-slide-up-leave" + antCls + "-slide-up-leave-active&-placement-bottomRight", {
+  }), _defineProperty(_Object$assign2, "&".concat(antCls, "-slide-up-leave").concat(antCls, "-slide-up-leave-active").concat(componentCls, "-dropdown-placement-bottomLeft,\n          &").concat(antCls, "-slide-up-leave").concat(antCls, "-slide-up-leave-active").concat(componentCls, "-dropdown-placement-bottomRight"), {
     animationName: slideUpOut
-  }), _defineProperty(_extends3, componentCls + "-panel > " + componentCls + "-time-panel", {
+  }), _defineProperty(_Object$assign2, "".concat(componentCls, "-panel > ").concat(componentCls, "-time-panel"), {
     paddingTop: paddingXXS
-  }), _defineProperty(_extends3, componentCls + "-ranges", (_ref12 = {
+  }), _defineProperty(_Object$assign2, "".concat(componentCls, "-ranges"), (_$concat19 = {
     marginBottom: 0,
-    padding: paddingXXS + "px " + paddingSM + "px",
+    padding: "".concat(unit(paddingXXS), " ").concat(unit(paddingSM)),
     overflow: 'hidden',
-    lineHeight: pickerTextHeight - 2 * lineWidth - paddingXS / 2 + "px",
+    lineHeight: unit(token.calc(textHeight).sub(token.calc(lineWidth).mul(2)).sub(token.calc(paddingXS).div(2)).equal()),
     textAlign: 'start',
     listStyle: 'none',
     display: 'flex',
@@ -763,34 +796,34 @@ var genPickerStyle = function genPickerStyle(token) {
     '> li': {
       display: 'inline-block'
     }
-  }, _defineProperty(_ref12, componentCls + "-preset > " + antCls + "-tag-blue", {
+  }, _defineProperty(_$concat19, "".concat(componentCls, "-preset > ").concat(antCls, "-tag-blue"), {
     color: colorPrimary,
-    background: controlItemBgActive,
+    background: cellActiveWithRangeBg,
     borderColor: colorPrimaryBorder,
     cursor: 'pointer'
-  }), _defineProperty(_ref12, componentCls + "-ok", {
+  }), _defineProperty(_$concat19, "".concat(componentCls, "-ok"), {
     marginInlineStart: 'auto'
-  }), _ref12)), _defineProperty(_extends3, componentCls + "-range-wrapper", {
+  }), _$concat19)), _defineProperty(_Object$assign2, "".concat(componentCls, "-range-wrapper"), {
     display: 'flex',
     position: 'relative'
-  }), _defineProperty(_extends3, componentCls + "-range-arrow", _extends({
+  }), _defineProperty(_Object$assign2, "".concat(componentCls, "-range-arrow"), Object.assign({
     position: 'absolute',
     zIndex: 1,
     display: 'none',
-    marginInlineStart: inputPaddingHorizontal * 1.5,
-    transition: "left " + motionDurationSlow + " ease-out"
-  }, roundedArrow(sizePopupArrow, borderRadiusXS, borderRadiusOuter, colorBgElevated, boxShadowPopoverArrow))), _defineProperty(_extends3, componentCls + "-panel-container", (_ref15 = {
+    marginInlineStart: token.calc(paddingInline).mul(1.5).equal(),
+    transition: "left ".concat(motionDurationSlow, " ease-out")
+  }, genRoundedArrow(token, colorBgElevated, boxShadowPopoverArrow))), _defineProperty(_Object$assign2, "".concat(componentCls, "-panel-container"), (_$concat22 = {
     overflow: 'hidden',
     verticalAlign: 'top',
     background: colorBgElevated,
     borderRadius: borderRadiusLG,
     boxShadow: boxShadowSecondary,
-    transition: "margin " + motionDurationSlow
-  }, _defineProperty(_ref15, componentCls + "-panel-layout", {
+    transition: "margin ".concat(motionDurationSlow)
+  }, _defineProperty(_$concat22, "".concat(componentCls, "-panel-layout"), {
     display: 'flex',
     flexWrap: 'nowrap',
     alignItems: 'stretch'
-  }), _defineProperty(_ref15, componentCls + "-presets", {
+  }), _defineProperty(_$concat22, "".concat(componentCls, "-presets"), {
     display: 'flex',
     flexDirection: 'column',
     minWidth: presetsWidth,
@@ -802,89 +835,106 @@ var genPickerStyle = function genPickerStyle(token) {
       overflow: 'auto',
       margin: 0,
       padding: paddingXS,
-      borderInlineEnd: lineWidth + "px " + lineType + " " + colorSplit,
-      li: _extends(_extends({}, textEllipsis), {
+      borderInlineEnd: "".concat(unit(lineWidth), " ").concat(lineType, " ").concat(colorSplit),
+      li: Object.assign(Object.assign({}, textEllipsis), {
         borderRadius: borderRadiusSM,
         paddingInline: paddingXS,
-        paddingBlock: (controlHeightSM - Math.round(fontSize * lineHeight)) / 2,
+        paddingBlock: token.calc(controlHeightSM).sub(fontHeight).div(2).equal(),
         cursor: 'pointer',
-        transition: "all " + motionDurationSlow,
+        transition: "all ".concat(motionDurationSlow),
         '+ li': {
           marginTop: marginXS
         },
         '&:hover': {
-          background: controlItemBgHover
+          background: cellHoverBg
         }
       })
     }
-  }), _defineProperty(_ref15, componentCls + "-panels", (_ref13 = {
+  }), _defineProperty(_$concat22, "".concat(componentCls, "-panels"), (_$concat20 = {
     display: 'inline-flex',
     flexWrap: 'nowrap',
     direction: 'ltr'
-  }, _defineProperty(_ref13, componentCls + "-panel", {
-    borderWidth: "0 0 " + lineWidth + "px"
-  }), _defineProperty(_ref13, '&:last-child', _defineProperty({}, componentCls + "-panel", {
+  }, _defineProperty(_$concat20, "".concat(componentCls, "-panel"), {
+    borderWidth: "0 0 ".concat(unit(lineWidth))
+  }), _defineProperty(_$concat20, '&:last-child', _defineProperty({}, "".concat(componentCls, "-panel"), {
     borderWidth: 0
-  })), _ref13)), _defineProperty(_ref15, componentCls + "-panel", (_ref14 = {
+  })), _$concat20)), _defineProperty(_$concat22, "".concat(componentCls, "-panel"), (_$concat21 = {
     verticalAlign: 'top',
     background: 'transparent',
     borderRadius: 0,
     borderWidth: 0
-  }, _defineProperty(_ref14, componentCls + "-content,\n            table", {
+  }, _defineProperty(_$concat21, "".concat(componentCls, "-content,\n            table"), {
     textAlign: 'center'
-  }), _defineProperty(_ref14, '&-focused', {
+  }), _defineProperty(_$concat21, '&-focused', {
     borderColor: colorBorder
-  }), _ref14)), _ref15)), _extends3))), _defineProperty(_extends4, '&-dropdown-range', {
-    padding: sizePopupArrow * 2 / 3 + "px 0",
+  }), _$concat21)), _$concat22)), _Object$assign2))), _defineProperty(_Object$assign3, '&-dropdown-range', {
+    padding: "".concat(unit(token.calc(sizePopupArrow).mul(2).div(3).equal()), " 0"),
     '&-hidden': {
       display: 'none'
     }
-  }), _defineProperty(_extends4, '&-rtl', (_rtl2 = {
+  }), _defineProperty(_Object$assign3, '&-rtl', (_rtl2 = {
     direction: 'rtl'
-  }, _defineProperty(_rtl2, componentCls + "-separator", {
+  }, _defineProperty(_rtl2, "".concat(componentCls, "-separator"), {
     transform: 'rotate(180deg)'
-  }), _defineProperty(_rtl2, componentCls + "-footer", {
+  }), _defineProperty(_rtl2, "".concat(componentCls, "-footer"), {
     '&-extra': {
       direction: 'rtl'
     }
-  }), _rtl2)), _extends4))), // Follow code may reuse in other components
+  }), _rtl2)), _Object$assign3))),
+  // Follow code may reuse in other components
   initSlideMotion(token, 'slide-up'), initSlideMotion(token, 'slide-down'), initMoveMotion(token, 'move-up'), initMoveMotion(token, 'move-down')];
 };
-
 export var initPickerPanelToken = function initPickerPanelToken(token) {
-  var pickerTimePanelCellHeight = 28;
   var componentCls = token.componentCls,
-      controlHeightLG = token.controlHeightLG,
-      controlHeightSM = token.controlHeightSM,
-      colorPrimary = token.colorPrimary,
-      paddingXXS = token.paddingXXS;
+    controlHeightLG = token.controlHeightLG,
+    paddingXXS = token.paddingXXS,
+    padding = token.padding;
   return {
-    pickerCellInnerCls: componentCls + "-cell-inner",
-    pickerTextHeight: controlHeightLG,
-    pickerPanelCellWidth: controlHeightSM * 1.5,
-    pickerPanelCellHeight: controlHeightSM,
-    pickerDateHoverRangeBorderColor: new TinyColor(colorPrimary).lighten(20).toHexString(),
-    pickerBasicCellHoverWithRangeColor: new TinyColor(colorPrimary).lighten(35).toHexString(),
-    pickerPanelWithoutTimeCellHeight: controlHeightLG * 1.65,
-    pickerYearMonthCellWidth: controlHeightLG * 1.5,
-    pickerTimePanelColumnHeight: pickerTimePanelCellHeight * 8,
-    pickerTimePanelColumnWidth: controlHeightLG * 1.4,
-    pickerTimePanelCellHeight: pickerTimePanelCellHeight,
-    pickerQuarterPanelContentHeight: controlHeightLG * 1.4,
-    pickerCellPaddingVertical: paddingXXS,
+    pickerCellCls: "".concat(componentCls, "-cell"),
+    pickerCellInnerCls: "".concat(componentCls, "-cell-inner"),
+    pickerYearMonthCellWidth: token.calc(controlHeightLG).mul(1.5).equal(),
+    pickerQuarterPanelContentHeight: token.calc(controlHeightLG).mul(1.4).equal(),
+    pickerCellPaddingVertical: token.calc(paddingXXS).add(token.calc(paddingXXS).div(2)).equal(),
     pickerCellBorderGap: 2,
+    // Magic for gap between cells
     pickerControlIconSize: 7,
-    pickerControlIconBorderWidth: 1.5
+    pickerControlIconMargin: 4,
+    pickerControlIconBorderWidth: 1.5,
+    pickerDatePanelPaddingHorizontal: token.calc(padding).add(token.calc(paddingXXS).div(2)).equal() // 18 in normal
   };
-}; // ============================== Export ==============================
+};
 
-export default genComponentStyleHook('DatePicker', function (token) {
-  var pickerToken = mergeToken(initInputToken(token), initPickerPanelToken(token));
-  return [genPickerStyle(pickerToken), genPickerStatusStyle(pickerToken)];
-}, function (token) {
+export var initPanelComponentToken = function initPanelComponentToken(token) {
   return {
+    cellHoverBg: token.controlItemBgHover,
+    cellActiveWithRangeBg: token.controlItemBgActive,
+    cellHoverWithRangeBg: new TinyColor(token.colorPrimary).lighten(35).toHexString(),
+    cellRangeBorderColor: new TinyColor(token.colorPrimary).lighten(20).toHexString(),
+    cellBgDisabled: token.colorBgContainerDisabled,
+    timeColumnWidth: token.controlHeightLG * 1.4,
+    timeColumnHeight: 28 * 8,
+    timeCellHeight: 28,
+    cellWidth: token.controlHeightSM * 1.5,
+    cellHeight: token.controlHeightSM,
+    textHeight: token.controlHeightLG,
+    withoutTimeCellHeight: token.controlHeightLG * 1.65
+  };
+};
+export var prepareComponentToken = function prepareComponentToken(token) {
+  return Object.assign(Object.assign(Object.assign(Object.assign({}, initComponentToken(token)), initPanelComponentToken(token)), getArrowToken(token)), {
     presetsWidth: 120,
     presetsMaxWidth: 200,
     zIndexPopup: token.zIndexPopupBase + 50
-  };
-});
+  });
+};
+// ============================== Export ==============================
+export default genStyleHooks('DatePicker', function (token) {
+  var pickerToken = mergeToken(initInputToken(token), initPickerPanelToken(token));
+  return [genPickerStyle(pickerToken), genPickerStatusStyle(pickerToken),
+  // =====================================================
+  // ==             Space Compact                       ==
+  // =====================================================
+  genCompactItemStyle(token, {
+    focusElCls: "".concat(token.componentCls, "-focused")
+  })];
+}, prepareComponentToken);