@nocobase/plugin-client 0.13.0-alpha.1 → 0.13.0-alpha.2

package/dist/locale/antd/date-picker/style/index.js

@@ -1,1222 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.initPickerPanelToken = exports.genPanelStyle = exports.default = void 0;
-var _tinycolor = require("@ctrl/tinycolor");
-var _style = require("../../input/style");
-var _style2 = require("../../style");
-var _compactItem = require("../../style/compact-item");
-var _motion = require("../../style/motion");
-var _internal = require("../../theme/internal");
-const genPikerPadding = (token, inputHeight, fontSize, paddingHorizontal) => {
-  const {
-    lineHeight
-  } = token;
-  const fontHeight = Math.floor(fontSize * lineHeight) + 2;
-  const paddingTop = Math.max((inputHeight - fontHeight) / 2, 0);
-  const paddingBottom = Math.max(inputHeight - fontHeight - paddingTop, 0);
-  return {
-    padding: `${paddingTop}px ${paddingHorizontal}px ${paddingBottom}px`
-  };
-};
-const genPickerCellInnerStyle = token => {
-  const {
-    componentCls,
-    pickerCellCls,
-    pickerCellInnerCls,
-    pickerPanelCellHeight,
-    motionDurationSlow,
-    borderRadiusSM,
-    motionDurationMid,
-    controlItemBgHover,
-    lineWidth,
-    lineType,
-    colorPrimary,
-    controlItemBgActive,
-    colorTextLightSolid,
-    controlHeightSM,
-    pickerDateHoverRangeBorderColor,
-    pickerCellBorderGap,
-    pickerBasicCellHoverWithRangeColor,
-    pickerPanelCellWidth,
-    colorTextDisabled,
-    colorBgContainerDisabled
-  } = token;
-  return {
-    '&::before': {
-      position: 'absolute',
-      top: '50%',
-      insetInlineStart: 0,
-      insetInlineEnd: 0,
-      zIndex: 1,
-      height: pickerPanelCellHeight,
-      transform: 'translateY(-50%)',
-      transition: `all ${motionDurationSlow}`,
-      content: '""'
-    },
-    // >>> Default
-    [pickerCellInnerCls]: {
-      position: 'relative',
-      zIndex: 2,
-      display: 'inline-block',
-      minWidth: pickerPanelCellHeight,
-      height: pickerPanelCellHeight,
-      lineHeight: `${pickerPanelCellHeight}px`,
-      borderRadius: borderRadiusSM,
-      transition: `background ${motionDurationMid}, border ${motionDurationMid}`
-    },
-    // >>> Hover
-    [`&:hover:not(${pickerCellCls}-in-view),
-    &:hover:not(${pickerCellCls}-selected):not(${pickerCellCls}-range-start):not(${pickerCellCls}-range-end):not(${pickerCellCls}-range-hover-start):not(${pickerCellCls}-range-hover-end)`]: {
-      [pickerCellInnerCls]: {
-        background: controlItemBgHover
-      }
-    },
-    // >>> Today
-    [`&-in-view${pickerCellCls}-today ${pickerCellInnerCls}`]: {
-      '&::before': {
-        position: 'absolute',
-        top: 0,
-        insetInlineEnd: 0,
-        bottom: 0,
-        insetInlineStart: 0,
-        zIndex: 1,
-        border: `${lineWidth}px ${lineType} ${colorPrimary}`,
-        borderRadius: borderRadiusSM,
-        content: '""'
-      }
-    },
-    // >>> In Range
-    [`&-in-view${pickerCellCls}-in-range`]: {
-      position: 'relative',
-      '&::before': {
-        background: controlItemBgActive
-      }
-    },
-    // >>> Selected
-    [`&-in-view${pickerCellCls}-selected ${pickerCellInnerCls},
-      &-in-view${pickerCellCls}-range-start ${pickerCellInnerCls},
-      &-in-view${pickerCellCls}-range-end ${pickerCellInnerCls}`]: {
-      color: colorTextLightSolid,
-      background: colorPrimary
-    },
-    [`&-in-view${pickerCellCls}-range-start:not(${pickerCellCls}-range-start-single),
-      &-in-view${pickerCellCls}-range-end:not(${pickerCellCls}-range-end-single)`]: {
-      '&::before': {
-        background: controlItemBgActive
-      }
-    },
-    [`&-in-view${pickerCellCls}-range-start::before`]: {
-      insetInlineStart: '50%'
-    },
-    [`&-in-view${pickerCellCls}-range-end::before`]: {
-      insetInlineEnd: '50%'
-    },
-    // >>> Range Hover
-    [`&-in-view${pickerCellCls}-range-hover-start:not(${pickerCellCls}-in-range):not(${pickerCellCls}-range-start):not(${pickerCellCls}-range-end),
-      &-in-view${pickerCellCls}-range-hover-end:not(${pickerCellCls}-in-range):not(${pickerCellCls}-range-start):not(${pickerCellCls}-range-end),
-      &-in-view${pickerCellCls}-range-hover-start${pickerCellCls}-range-start-single,
-      &-in-view${pickerCellCls}-range-hover-start${pickerCellCls}-range-start${pickerCellCls}-range-end${pickerCellCls}-range-end-near-hover,
-      &-in-view${pickerCellCls}-range-hover-end${pickerCellCls}-range-start${pickerCellCls}-range-end${pickerCellCls}-range-start-near-hover,
-      &-in-view${pickerCellCls}-range-hover-end${pickerCellCls}-range-end-single,
-      &-in-view${pickerCellCls}-range-hover:not(${pickerCellCls}-in-range)`]: {
-      '&::after': {
-        position: 'absolute',
-        top: '50%',
-        zIndex: 0,
-        height: controlHeightSM,
-        borderTop: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
-        borderBottom: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
-        transform: 'translateY(-50%)',
-        transition: `all ${motionDurationSlow}`,
-        content: '""'
-      }
-    },
-    // Add space for stash
-    [`&-range-hover-start::after,
-      &-range-hover-end::after,
-      &-range-hover::after`]: {
-      insetInlineEnd: 0,
-      insetInlineStart: pickerCellBorderGap
-    },
-    // Hover with in range
-    [`&-in-view${pickerCellCls}-in-range${pickerCellCls}-range-hover::before,
-      &-in-view${pickerCellCls}-in-range${pickerCellCls}-range-hover-start::before,
-      &-in-view${pickerCellCls}-in-range${pickerCellCls}-range-hover-end::before,
-      &-in-view${pickerCellCls}-range-start${pickerCellCls}-range-hover::before,
-      &-in-view${pickerCellCls}-range-end${pickerCellCls}-range-hover::before,
-      &-in-view${pickerCellCls}-range-start:not(${pickerCellCls}-range-start-single)${pickerCellCls}-range-hover-start::before,
-      &-in-view${pickerCellCls}-range-end:not(${pickerCellCls}-range-end-single)${pickerCellCls}-range-hover-end::before,
-      ${componentCls}-panel
-      > :not(${componentCls}-date-panel)
-      &-in-view${pickerCellCls}-in-range${pickerCellCls}-range-hover-start::before,
-      ${componentCls}-panel
-      > :not(${componentCls}-date-panel)
-      &-in-view${pickerCellCls}-in-range${pickerCellCls}-range-hover-end::before`]: {
-      background: pickerBasicCellHoverWithRangeColor
-    },
-    // range start border-radius
-    [`&-in-view${pickerCellCls}-range-start:not(${pickerCellCls}-range-start-single):not(${pickerCellCls}-range-end) ${pickerCellInnerCls}`]: {
-      borderStartStartRadius: borderRadiusSM,
-      borderEndStartRadius: borderRadiusSM,
-      borderStartEndRadius: 0,
-      borderEndEndRadius: 0
-    },
-    // range end border-radius
-    [`&-in-view${pickerCellCls}-range-end:not(${pickerCellCls}-range-end-single):not(${pickerCellCls}-range-start) ${pickerCellInnerCls}`]: {
-      borderStartStartRadius: 0,
-      borderEndStartRadius: 0,
-      borderStartEndRadius: borderRadiusSM,
-      borderEndEndRadius: borderRadiusSM
-    },
-    [`&-range-hover${pickerCellCls}-range-end::after`]: {
-      insetInlineStart: '50%'
-    },
-    // Edge start
-    [`tr > &-in-view${pickerCellCls}-range-hover:first-child::after,
-      tr > &-in-view${pickerCellCls}-range-hover-end:first-child::after,
-      &-in-view${pickerCellCls}-start${pickerCellCls}-range-hover-edge-start${pickerCellCls}-range-hover-edge-start-near-range::after,
-      &-in-view${pickerCellCls}-range-hover-edge-start:not(${pickerCellCls}-range-hover-edge-start-near-range)::after,
-      &-in-view${pickerCellCls}-range-hover-start::after`]: {
-      insetInlineStart: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
-      borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
-      borderStartStartRadius: lineWidth,
-      borderEndStartRadius: lineWidth
-    },
-    // Edge end
-    [`tr > &-in-view${pickerCellCls}-range-hover:last-child::after,
-      tr > &-in-view${pickerCellCls}-range-hover-start:last-child::after,
-      &-in-view${pickerCellCls}-end${pickerCellCls}-range-hover-edge-end${pickerCellCls}-range-hover-edge-end-near-range::after,
-      &-in-view${pickerCellCls}-range-hover-edge-end:not(${pickerCellCls}-range-hover-edge-end-near-range)::after,
-      &-in-view${pickerCellCls}-range-hover-end::after`]: {
-      insetInlineEnd: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
-      borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
-      borderStartEndRadius: lineWidth,
-      borderEndEndRadius: lineWidth
-    },
-    // >>> Disabled
-    '&-disabled': {
-      color: colorTextDisabled,
-      pointerEvents: 'none',
-      [pickerCellInnerCls]: {
-        background: 'transparent'
-      },
-      '&::before': {
-        background: colorBgContainerDisabled
-      }
-    },
-    [`&-disabled${pickerCellCls}-today ${pickerCellInnerCls}::before`]: {
-      borderColor: colorTextDisabled
-    }
-  };
-};
-const genPanelStyle = token => {
-  const {
-    componentCls,
-    pickerCellCls,
-    pickerCellInnerCls,
-    pickerYearMonthCellWidth,
-    pickerControlIconSize,
-    pickerPanelCellWidth,
-    paddingSM,
-    paddingXS,
-    paddingXXS,
-    colorBgContainer,
-    lineWidth,
-    lineType,
-    borderRadiusLG,
-    colorPrimary,
-    colorTextHeading,
-    colorSplit,
-    pickerControlIconBorderWidth,
-    colorIcon,
-    pickerTextHeight,
-    motionDurationMid,
-    colorIconHover,
-    fontWeightStrong,
-    pickerPanelCellHeight,
-    pickerCellPaddingVertical,
-    colorTextDisabled,
-    colorText,
-    fontSize,
-    pickerBasicCellHoverWithRangeColor,
-    motionDurationSlow,
-    pickerPanelWithoutTimeCellHeight,
-    pickerQuarterPanelContentHeight,
-    colorLink,
-    colorLinkActive,
-    colorLinkHover,
-    pickerDateHoverRangeBorderColor,
-    borderRadiusSM,
-    colorTextLightSolid,
-    controlItemBgHover,
-    pickerTimePanelColumnHeight,
-    pickerTimePanelColumnWidth,
-    pickerTimePanelCellHeight,
-    controlItemBgActive,
-    marginXXS,
-    pickerDatePanelPaddingHorizontal
-  } = token;
-  const pickerPanelWidth = pickerPanelCellWidth * 7 + pickerDatePanelPaddingHorizontal * 2;
-  const commonHoverCellFixedDistance = (pickerPanelWidth - paddingXS * 2) / 3 - pickerYearMonthCellWidth - paddingSM;
-  const quarterHoverCellFixedDistance = (pickerPanelWidth - paddingXS * 2) / 4 - pickerYearMonthCellWidth;
-  return {
-    [componentCls]: {
-      '&-panel': {
-        display: 'inline-flex',
-        flexDirection: 'column',
-        textAlign: 'center',
-        background: colorBgContainer,
-        border: `${lineWidth}px ${lineType} ${colorSplit}`,
-        borderRadius: borderRadiusLG,
-        outline: 'none',
-        '&-focused': {
-          borderColor: colorPrimary
-        },
-        '&-rtl': {
-          direction: 'rtl',
-          [`${componentCls}-prev-icon,
-              ${componentCls}-super-prev-icon`]: {
-            transform: 'rotate(45deg)'
-          },
-          [`${componentCls}-next-icon,
-              ${componentCls}-super-next-icon`]: {
-            transform: 'rotate(-135deg)'
-          }
-        }
-      },
-      // ========================================================
-      // =                     Shared Panel                     =
-      // ========================================================
-      [`&-decade-panel,
-        &-year-panel,
-        &-quarter-panel,
-        &-month-panel,
-        &-week-panel,
-        &-date-panel,
-        &-time-panel`]: {
-        display: 'flex',
-        flexDirection: 'column',
-        width: pickerPanelWidth
-      },
-      // ======================= Header =======================
-      '&-header': {
-        display: 'flex',
-        padding: `0 ${paddingXS}px`,
-        color: colorTextHeading,
-        borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
-        '> *': {
-          flex: 'none'
-        },
-        button: {
-          padding: 0,
-          color: colorIcon,
-          lineHeight: `${pickerTextHeight}px`,
-          background: 'transparent',
-          border: 0,
-          cursor: 'pointer',
-          transition: `color ${motionDurationMid}`,
-          fontSize: 'inherit'
-        },
-        '> button': {
-          minWidth: '1.6em',
-          fontSize,
-          '&:hover': {
-            color: colorIconHover
-          }
-        },
-        '&-view': {
-          flex: 'auto',
-          fontWeight: fontWeightStrong,
-          lineHeight: `${pickerTextHeight}px`,
-          button: {
-            color: 'inherit',
-            fontWeight: 'inherit',
-            verticalAlign: 'top',
-            '&:not(:first-child)': {
-              marginInlineStart: paddingXS
-            },
-            '&:hover': {
-              color: colorPrimary
-            }
-          }
-        }
-      },
-      // Arrow button
-      [`&-prev-icon,
-        &-next-icon,
-        &-super-prev-icon,
-        &-super-next-icon`]: {
-        position: 'relative',
-        display: 'inline-block',
-        width: pickerControlIconSize,
-        height: pickerControlIconSize,
-        '&::before': {
-          position: 'absolute',
-          top: 0,
-          insetInlineStart: 0,
-          display: 'inline-block',
-          width: pickerControlIconSize,
-          height: pickerControlIconSize,
-          border: `0 solid currentcolor`,
-          borderBlockStartWidth: pickerControlIconBorderWidth,
-          borderBlockEndWidth: 0,
-          borderInlineStartWidth: pickerControlIconBorderWidth,
-          borderInlineEndWidth: 0,
-          content: '""'
-        }
-      },
-      [`&-super-prev-icon,
-        &-super-next-icon`]: {
-        '&::after': {
-          position: 'absolute',
-          top: Math.ceil(pickerControlIconSize / 2),
-          insetInlineStart: Math.ceil(pickerControlIconSize / 2),
-          display: 'inline-block',
-          width: pickerControlIconSize,
-          height: pickerControlIconSize,
-          border: '0 solid currentcolor',
-          borderBlockStartWidth: pickerControlIconBorderWidth,
-          borderBlockEndWidth: 0,
-          borderInlineStartWidth: pickerControlIconBorderWidth,
-          borderInlineEndWidth: 0,
-          content: '""'
-        }
-      },
-      [`&-prev-icon,
-        &-super-prev-icon`]: {
-        transform: 'rotate(-45deg)'
-      },
-      [`&-next-icon,
-        &-super-next-icon`]: {
-        transform: 'rotate(135deg)'
-      },
-      // ======================== Body ========================
-      '&-content': {
-        width: '100%',
-        tableLayout: 'fixed',
-        borderCollapse: 'collapse',
-        'th, td': {
-          position: 'relative',
-          minWidth: pickerPanelCellHeight,
-          fontWeight: 'normal'
-        },
-        th: {
-          height: pickerPanelCellHeight + pickerCellPaddingVertical * 2,
-          color: colorText,
-          verticalAlign: 'middle'
-        }
-      },
-      '&-cell': Object.assign({
-        padding: `${pickerCellPaddingVertical}px 0`,
-        color: colorTextDisabled,
-        cursor: 'pointer',
-        // In view
-        '&-in-view': {
-          color: colorText
-        }
-      }, genPickerCellInnerStyle(token)),
-      // DatePanel only
-      [`&-date-panel ${componentCls}-cell-in-view${componentCls}-cell-in-range${componentCls}-cell-range-hover-start ${pickerCellInnerCls},
-        &-date-panel ${componentCls}-cell-in-view${componentCls}-cell-in-range${componentCls}-cell-range-hover-end ${pickerCellInnerCls}`]: {
-        '&::after': {
-          position: 'absolute',
-          top: 0,
-          bottom: 0,
-          zIndex: -1,
-          background: pickerBasicCellHoverWithRangeColor,
-          transition: `all ${motionDurationSlow}`,
-          content: '""'
-        }
-      },
-      [`&-date-panel
-        ${componentCls}-cell-in-view${componentCls}-cell-in-range${componentCls}-cell-range-hover-start
-        ${pickerCellInnerCls}::after`]: {
-        insetInlineEnd: -(pickerPanelCellWidth - pickerPanelCellHeight) / 2,
-        insetInlineStart: 0
-      },
-      [`&-date-panel ${componentCls}-cell-in-view${componentCls}-cell-in-range${componentCls}-cell-range-hover-end ${pickerCellInnerCls}::after`]: {
-        insetInlineEnd: 0,
-        insetInlineStart: -(pickerPanelCellWidth - pickerPanelCellHeight) / 2
-      },
-      // Hover with range start & end
-      [`&-range-hover${componentCls}-range-start::after`]: {
-        insetInlineEnd: '50%'
-      },
-      [`&-decade-panel,
-        &-year-panel,
-        &-quarter-panel,
-        &-month-panel`]: {
-        [`${componentCls}-content`]: {
-          height: pickerPanelWithoutTimeCellHeight * 4
-        },
-        [pickerCellInnerCls]: {
-          padding: `0 ${paddingXS}px`
-        }
-      },
-      '&-quarter-panel': {
-        [`${componentCls}-content`]: {
-          height: pickerQuarterPanelContentHeight
-        },
-        // Quarter Panel Special Style
-        [`${componentCls}-cell-range-hover-start::after`]: {
-          insetInlineStart: quarterHoverCellFixedDistance,
-          borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
-          [`${componentCls}-panel-rtl &`]: {
-            insetInlineEnd: quarterHoverCellFixedDistance,
-            borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`
-          }
-        },
-        [`${componentCls}-cell-range-hover-end::after`]: {
-          insetInlineEnd: quarterHoverCellFixedDistance,
-          borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
-          [`${componentCls}-panel-rtl &`]: {
-            insetInlineStart: quarterHoverCellFixedDistance,
-            borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`
-          }
-        }
-      },
-      // ======================== Footer ========================
-      [`&-panel ${componentCls}-footer`]: {
-        borderTop: `${lineWidth}px ${lineType} ${colorSplit}`
-      },
-      '&-footer': {
-        width: 'min-content',
-        minWidth: '100%',
-        lineHeight: `${pickerTextHeight - 2 * lineWidth}px`,
-        textAlign: 'center',
-        '&-extra': {
-          padding: `0 ${paddingSM}`,
-          lineHeight: `${pickerTextHeight - 2 * lineWidth}px`,
-          textAlign: 'start',
-          '&:not(:last-child)': {
-            borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`
-          }
-        }
-      },
-      '&-now': {
-        textAlign: 'start'
-      },
-      '&-today-btn': {
-        color: colorLink,
-        '&:hover': {
-          color: colorLinkHover
-        },
-        '&:active': {
-          color: colorLinkActive
-        },
-        [`&${componentCls}-today-btn-disabled`]: {
-          color: colorTextDisabled,
-          cursor: 'not-allowed'
-        }
-      },
-      // ========================================================
-      // =                       Special                        =
-      // ========================================================
-      // ===================== Decade Panel =====================
-      '&-decade-panel': {
-        [pickerCellInnerCls]: {
-          padding: `0 ${paddingXS / 2}px`
-        },
-        [`${componentCls}-cell::before`]: {
-          display: 'none'
-        }
-      },
-      // ============= Year & Quarter & Month Panel =============
-      [`&-year-panel,
-        &-quarter-panel,
-        &-month-panel`]: {
-        [`${componentCls}-body`]: {
-          padding: `0 ${paddingXS}px`
-        },
-        [pickerCellInnerCls]: {
-          width: pickerYearMonthCellWidth
-        },
-        [`${componentCls}-cell-range-hover-start::after`]: {
-          borderStartStartRadius: borderRadiusSM,
-          borderEndStartRadius: borderRadiusSM,
-          borderStartEndRadius: 0,
-          borderEndEndRadius: 0,
-          [`${componentCls}-panel-rtl &`]: {
-            borderStartStartRadius: 0,
-            borderEndStartRadius: 0,
-            borderStartEndRadius: borderRadiusSM,
-            borderEndEndRadius: borderRadiusSM
-          }
-        },
-        [`${componentCls}-cell-range-hover-end::after`]: {
-          borderStartStartRadius: 0,
-          borderEndStartRadius: 0,
-          borderStartEndRadius: borderRadiusSM,
-          borderEndEndRadius: borderRadiusSM,
-          [`${componentCls}-panel-rtl &`]: {
-            borderStartStartRadius: borderRadiusSM,
-            borderEndStartRadius: borderRadiusSM,
-            borderStartEndRadius: 0,
-            borderEndEndRadius: 0
-          }
-        }
-      },
-      [`&-year-panel,
-        &-month-panel`]: {
-        [`${componentCls}-cell-range-hover-start::after`]: {
-          insetInlineStart: commonHoverCellFixedDistance,
-          borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
-          [`${componentCls}-panel-rtl &`]: {
-            insetInlineEnd: commonHoverCellFixedDistance,
-            borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`
-          }
-        },
-        [`${componentCls}-cell-range-hover-end::after`]: {
-          insetInlineEnd: commonHoverCellFixedDistance,
-          borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
-          [`${componentCls}-panel-rtl &`]: {
-            insetInlineStart: commonHoverCellFixedDistance,
-            borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`
-          }
-        }
-      },
-      // ====================== Week Panel ======================
-      '&-week-panel': {
-        [`${componentCls}-body`]: {
-          padding: `${paddingXS}px ${paddingSM}px`
-        },
-        // Clear cell style
-        [`${componentCls}-cell`]: {
-          [`&:hover ${pickerCellInnerCls},
-            &-selected ${pickerCellInnerCls},
-            ${pickerCellInnerCls}`]: {
-            background: 'transparent !important'
-          }
-        },
-        '&-row': {
-          td: {
-            '&:before': {
-              transition: `background ${motionDurationMid}`
-            },
-            '&:first-child:before': {
-              borderStartStartRadius: borderRadiusSM,
-              borderEndStartRadius: borderRadiusSM
-            },
-            '&:last-child:before': {
-              borderStartEndRadius: borderRadiusSM,
-              borderEndEndRadius: borderRadiusSM
-            }
-          },
-          [`&:hover td`]: {
-            '&:before': {
-              background: controlItemBgHover
-            }
-          },
-          [`&-range-start td,
-            &-range-end td,
-            &-selected td`]: {
-            // Rise priority to override hover style
-            [`&${pickerCellCls}`]: {
-              '&:before': {
-                background: colorPrimary
-              },
-              [`&${componentCls}-cell-week`]: {
-                color: new _tinycolor.TinyColor(colorTextLightSolid).setAlpha(0.5).toHexString()
-              },
-              [pickerCellInnerCls]: {
-                color: colorTextLightSolid
-              }
-            }
-          },
-          [`&-range-hover td:before`]: {
-            background: controlItemBgActive
-          }
-        }
-      },
-      // ====================== Date Panel ======================
-      '&-date-panel': {
-        [`${componentCls}-body`]: {
-          padding: `${paddingXS}px ${pickerDatePanelPaddingHorizontal}px`
-        },
-        [`${componentCls}-content`]: {
-          width: pickerPanelCellWidth * 7,
-          th: {
-            width: pickerPanelCellWidth
-          }
-        }
-      },
-      // ==================== Datetime Panel ====================
-      '&-datetime-panel': {
-        display: 'flex',
-        [`${componentCls}-time-panel`]: {
-          borderInlineStart: `${lineWidth}px ${lineType} ${colorSplit}`
-        },
-        [`${componentCls}-date-panel,
-          ${componentCls}-time-panel`]: {
-          transition: `opacity ${motionDurationSlow}`
-        },
-        // Keyboard
-        '&-active': {
-          [`${componentCls}-date-panel,
-            ${componentCls}-time-panel`]: {
-            opacity: 0.3,
-            '&-active': {
-              opacity: 1
-            }
-          }
-        }
-      },
-      // ====================== Time Panel ======================
-      '&-time-panel': {
-        width: 'auto',
-        minWidth: 'auto',
-        direction: 'ltr',
-        [`${componentCls}-content`]: {
-          display: 'flex',
-          flex: 'auto',
-          height: pickerTimePanelColumnHeight
-        },
-        '&-column': {
-          flex: '1 0 auto',
-          width: pickerTimePanelColumnWidth,
-          margin: `${paddingXXS}px 0`,
-          padding: 0,
-          overflowY: 'hidden',
-          textAlign: 'start',
-          listStyle: 'none',
-          transition: `background ${motionDurationMid}`,
-          overflowX: 'hidden',
-          '&::after': {
-            display: 'block',
-            height: pickerTimePanelColumnHeight - pickerTimePanelCellHeight,
-            content: '""'
-          },
-          '&:not(:first-child)': {
-            borderInlineStart: `${lineWidth}px ${lineType} ${colorSplit}`
-          },
-          '&-active': {
-            background: new _tinycolor.TinyColor(controlItemBgActive).setAlpha(0.2).toHexString()
-          },
-          '&:hover': {
-            overflowY: 'auto'
-          },
-          '> li': {
-            margin: 0,
-            padding: 0,
-            [`&${componentCls}-time-panel-cell`]: {
-              marginInline: marginXXS,
-              [`${componentCls}-time-panel-cell-inner`]: {
-                display: 'block',
-                width: pickerTimePanelColumnWidth - 2 * marginXXS,
-                height: pickerTimePanelCellHeight,
-                margin: 0,
-                paddingBlock: 0,
-                paddingInlineEnd: 0,
-                paddingInlineStart: (pickerTimePanelColumnWidth - pickerTimePanelCellHeight) / 2,
-                color: colorText,
-                lineHeight: `${pickerTimePanelCellHeight}px`,
-                borderRadius: borderRadiusSM,
-                cursor: 'pointer',
-                transition: `background ${motionDurationMid}`,
-                '&:hover': {
-                  background: controlItemBgHover
-                }
-              },
-              '&-selected': {
-                [`${componentCls}-time-panel-cell-inner`]: {
-                  background: controlItemBgActive
-                }
-              },
-              '&-disabled': {
-                [`${componentCls}-time-panel-cell-inner`]: {
-                  color: colorTextDisabled,
-                  background: 'transparent',
-                  cursor: 'not-allowed'
-                }
-              }
-            }
-          }
-        }
-      },
-      // https://github.com/ant-design/ant-design/issues/39227
-      [`&-datetime-panel ${componentCls}-time-panel-column:after`]: {
-        height: pickerTimePanelColumnHeight - pickerTimePanelCellHeight + paddingXXS * 2
-      }
-    }
-  };
-};
-exports.genPanelStyle = genPanelStyle;
-const genPickerStatusStyle = token => {
-  const {
-    componentCls,
-    colorBgContainer,
-    colorError,
-    colorErrorOutline,
-    colorWarning,
-    colorWarningOutline
-  } = token;
-  return {
-    [`${componentCls}:not(${componentCls}-disabled)`]: {
-      [`&${componentCls}-status-error`]: {
-        '&, &:not([disabled]):hover': {
-          backgroundColor: colorBgContainer,
-          borderColor: colorError
-        },
-        [`&${componentCls}-focused, &:focus`]: Object.assign({}, (0, _style.genActiveStyle)((0, _internal.mergeToken)(token, {
-          inputBorderActiveColor: colorError,
-          inputBorderHoverColor: colorError,
-          controlOutline: colorErrorOutline
-        }))),
-        [`${componentCls}-active-bar`]: {
-          background: colorError
-        }
-      },
-      [`&${componentCls}-status-warning`]: {
-        '&, &:not([disabled]):hover': {
-          backgroundColor: colorBgContainer,
-          borderColor: colorWarning
-        },
-        [`&${componentCls}-focused, &:focus`]: Object.assign({}, (0, _style.genActiveStyle)((0, _internal.mergeToken)(token, {
-          inputBorderActiveColor: colorWarning,
-          inputBorderHoverColor: colorWarning,
-          controlOutline: colorWarningOutline
-        }))),
-        [`${componentCls}-active-bar`]: {
-          background: colorWarning
-        }
-      }
-    }
-  };
-};
-const genPickerStyle = token => {
-  const {
-    componentCls,
-    antCls,
-    controlHeight,
-    fontSize,
-    inputPaddingHorizontal,
-    colorBgContainer,
-    lineWidth,
-    lineType,
-    colorBorder,
-    borderRadius,
-    motionDurationMid,
-    colorBgContainerDisabled,
-    colorTextDisabled,
-    colorTextPlaceholder,
-    controlHeightLG,
-    fontSizeLG,
-    controlHeightSM,
-    inputPaddingHorizontalSM,
-    paddingXS,
-    marginXS,
-    colorTextDescription,
-    lineWidthBold,
-    lineHeight,
-    colorPrimary,
-    motionDurationSlow,
-    zIndexPopup,
-    paddingXXS,
-    paddingSM,
-    pickerTextHeight,
-    controlItemBgActive,
-    colorPrimaryBorder,
-    sizePopupArrow,
-    borderRadiusXS,
-    borderRadiusOuter,
-    colorBgElevated,
-    borderRadiusLG,
-    boxShadowSecondary,
-    borderRadiusSM,
-    colorSplit,
-    controlItemBgHover,
-    presetsWidth,
-    presetsMaxWidth,
-    boxShadowPopoverArrow,
-    colorTextQuaternary
-  } = token;
-  return [{
-    [componentCls]: Object.assign(Object.assign(Object.assign({}, (0, _style2.resetComponent)(token)), genPikerPadding(token, controlHeight, fontSize, inputPaddingHorizontal)), {
-      position: 'relative',
-      display: 'inline-flex',
-      alignItems: 'center',
-      background: colorBgContainer,
-      lineHeight: 1,
-      border: `${lineWidth}px ${lineType} ${colorBorder}`,
-      borderRadius,
-      transition: `border ${motionDurationMid}, box-shadow ${motionDurationMid}`,
-      '&:hover, &-focused': Object.assign({}, (0, _style.genHoverStyle)(token)),
-      '&-focused': Object.assign({}, (0, _style.genActiveStyle)(token)),
-      [`&${componentCls}-disabled`]: {
-        background: colorBgContainerDisabled,
-        borderColor: colorBorder,
-        cursor: 'not-allowed',
-        [`${componentCls}-suffix`]: {
-          color: colorTextQuaternary
-        }
-      },
-      [`&${componentCls}-borderless`]: {
-        backgroundColor: 'transparent !important',
-        borderColor: 'transparent !important',
-        boxShadow: 'none !important'
-      },
-      // ======================== Input =========================
-      [`${componentCls}-input`]: {
-        position: 'relative',
-        display: 'inline-flex',
-        alignItems: 'center',
-        width: '100%',
-        '> input': Object.assign(Object.assign({}, (0, _style.genBasicInputStyle)(token)), {
-          flex: 'auto',
-          // Fix Firefox flex not correct:
-          // https://github.com/ant-design/ant-design/pull/20023#issuecomment-564389553
-          minWidth: 1,
-          height: 'auto',
-          padding: 0,
-          background: 'transparent',
-          border: 0,
-          borderRadius: 0,
-          '&:focus': {
-            boxShadow: 'none'
-          },
-          '&[disabled]': {
-            background: 'transparent'
-          }
-        }),
-        '&:hover': {
-          [`${componentCls}-clear`]: {
-            opacity: 1
-          }
-        },
-        '&-placeholder': {
-          '> input': {
-            color: colorTextPlaceholder
-          }
-        }
-      },
-      // Size
-      '&-large': Object.assign(Object.assign({}, genPikerPadding(token, controlHeightLG, fontSizeLG, inputPaddingHorizontal)), {
-        [`${componentCls}-input > input`]: {
-          fontSize: fontSizeLG
-        }
-      }),
-      '&-small': Object.assign({}, genPikerPadding(token, controlHeightSM, fontSize, inputPaddingHorizontalSM)),
-      [`${componentCls}-suffix`]: {
-        display: 'flex',
-        flex: 'none',
-        alignSelf: 'center',
-        marginInlineStart: paddingXS / 2,
-        color: colorTextDisabled,
-        lineHeight: 1,
-        pointerEvents: 'none',
-        '> *': {
-          verticalAlign: 'top',
-          '&:not(:last-child)': {
-            marginInlineEnd: marginXS
-          }
-        }
-      },
-      [`${componentCls}-clear`]: {
-        position: 'absolute',
-        top: '50%',
-        insetInlineEnd: 0,
-        color: colorTextDisabled,
-        lineHeight: 1,
-        background: colorBgContainer,
-        transform: 'translateY(-50%)',
-        cursor: 'pointer',
-        opacity: 0,
-        transition: `opacity ${motionDurationMid}, color ${motionDurationMid}`,
-        '> *': {
-          verticalAlign: 'top'
-        },
-        '&:hover': {
-          color: colorTextDescription
-        }
-      },
-      [`${componentCls}-separator`]: {
-        position: 'relative',
-        display: 'inline-block',
-        width: '1em',
-        height: fontSizeLG,
-        color: colorTextDisabled,
-        fontSize: fontSizeLG,
-        verticalAlign: 'top',
-        cursor: 'default',
-        [`${componentCls}-focused &`]: {
-          color: colorTextDescription
-        },
-        [`${componentCls}-range-separator &`]: {
-          [`${componentCls}-disabled &`]: {
-            cursor: 'not-allowed'
-          }
-        }
-      },
-      // ======================== Range =========================
-      '&-range': {
-        position: 'relative',
-        display: 'inline-flex',
-        // Clear
-        [`${componentCls}-clear`]: {
-          insetInlineEnd: inputPaddingHorizontal
-        },
-        '&:hover': {
-          [`${componentCls}-clear`]: {
-            opacity: 1
-          }
-        },
-        // Active bar
-        [`${componentCls}-active-bar`]: {
-          bottom: -lineWidth,
-          height: lineWidthBold,
-          marginInlineStart: inputPaddingHorizontal,
-          background: colorPrimary,
-          opacity: 0,
-          transition: `all ${motionDurationSlow} ease-out`,
-          pointerEvents: 'none'
-        },
-        [`&${componentCls}-focused`]: {
-          [`${componentCls}-active-bar`]: {
-            opacity: 1
-          }
-        },
-        [`${componentCls}-range-separator`]: {
-          alignItems: 'center',
-          padding: `0 ${paddingXS}px`,
-          lineHeight: 1
-        },
-        [`&${componentCls}-small`]: {
-          [`${componentCls}-clear`]: {
-            insetInlineEnd: inputPaddingHorizontalSM
-          },
-          [`${componentCls}-active-bar`]: {
-            marginInlineStart: inputPaddingHorizontalSM
-          }
-        }
-      },
-      // ======================= Dropdown =======================
-      '&-dropdown': Object.assign(Object.assign(Object.assign({}, (0, _style2.resetComponent)(token)), genPanelStyle(token)), {
-        position: 'absolute',
-        // Fix incorrect position of picker popup
-        // https://github.com/ant-design/ant-design/issues/35590
-        top: -9999,
-        left: {
-          _skip_check_: true,
-          value: -9999
-        },
-        zIndex: zIndexPopup,
-        [`&${componentCls}-dropdown-hidden`]: {
-          display: 'none'
-        },
-        [`&${componentCls}-dropdown-placement-bottomLeft`]: {
-          [`${componentCls}-range-arrow`]: {
-            top: 0,
-            display: 'block',
-            transform: 'translateY(-100%)'
-          }
-        },
-        [`&${componentCls}-dropdown-placement-topLeft`]: {
-          [`${componentCls}-range-arrow`]: {
-            bottom: 0,
-            display: 'block',
-            transform: 'translateY(100%) rotate(180deg)'
-          }
-        },
-        [`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-topLeft,
-          &${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-topRight,
-          &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-topLeft,
-          &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-topRight`]: {
-          animationName: _motion.slideDownIn
-        },
-        [`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-bottomLeft,
-          &${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-bottomRight,
-          &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-bottomLeft,
-          &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-bottomRight`]: {
-          animationName: _motion.slideUpIn
-        },
-        [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-topLeft,
-          &${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-topRight`]: {
-          animationName: _motion.slideDownOut
-        },
-        [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-bottomLeft,
-          &${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-bottomRight`]: {
-          animationName: _motion.slideUpOut
-        },
-        // Time picker with additional style
-        [`${componentCls}-panel > ${componentCls}-time-panel`]: {
-          paddingTop: paddingXXS
-        },
-        // ======================== Ranges ========================
-        [`${componentCls}-ranges`]: {
-          marginBottom: 0,
-          padding: `${paddingXXS}px ${paddingSM}px`,
-          overflow: 'hidden',
-          lineHeight: `${pickerTextHeight - 2 * lineWidth - paddingXS / 2}px`,
-          textAlign: 'start',
-          listStyle: 'none',
-          display: 'flex',
-          justifyContent: 'space-between',
-          '> li': {
-            display: 'inline-block'
-          },
-          // https://github.com/ant-design/ant-design/issues/23687
-          [`${componentCls}-preset > ${antCls}-tag-blue`]: {
-            color: colorPrimary,
-            background: controlItemBgActive,
-            borderColor: colorPrimaryBorder,
-            cursor: 'pointer'
-          },
-          [`${componentCls}-ok`]: {
-            marginInlineStart: 'auto'
-          }
-        },
-        [`${componentCls}-range-wrapper`]: {
-          display: 'flex',
-          position: 'relative'
-        },
-        [`${componentCls}-range-arrow`]: Object.assign({
-          position: 'absolute',
-          zIndex: 1,
-          display: 'none',
-          marginInlineStart: inputPaddingHorizontal * 1.5,
-          transition: `left ${motionDurationSlow} ease-out`
-        }, (0, _style2.roundedArrow)(sizePopupArrow, borderRadiusXS, borderRadiusOuter, colorBgElevated, boxShadowPopoverArrow)),
-        [`${componentCls}-panel-container`]: {
-          overflow: 'hidden',
-          verticalAlign: 'top',
-          background: colorBgElevated,
-          borderRadius: borderRadiusLG,
-          boxShadow: boxShadowSecondary,
-          transition: `margin ${motionDurationSlow}`,
-          // ======================== Layout ========================
-          [`${componentCls}-panel-layout`]: {
-            display: 'flex',
-            flexWrap: 'nowrap',
-            alignItems: 'stretch'
-          },
-          // ======================== Preset ========================
-          [`${componentCls}-presets`]: {
-            display: 'flex',
-            flexDirection: 'column',
-            minWidth: presetsWidth,
-            maxWidth: presetsMaxWidth,
-            ul: {
-              height: 0,
-              flex: 'auto',
-              listStyle: 'none',
-              overflow: 'auto',
-              margin: 0,
-              padding: paddingXS,
-              borderInlineEnd: `${lineWidth}px ${lineType} ${colorSplit}`,
-              li: Object.assign(Object.assign({}, _style2.textEllipsis), {
-                borderRadius: borderRadiusSM,
-                paddingInline: paddingXS,
-                paddingBlock: (controlHeightSM - Math.round(fontSize * lineHeight)) / 2,
-                cursor: 'pointer',
-                transition: `all ${motionDurationSlow}`,
-                '+ li': {
-                  marginTop: marginXS
-                },
-                '&:hover': {
-                  background: controlItemBgHover
-                }
-              })
-            }
-          },
-          // ======================== Panels ========================
-          [`${componentCls}-panels`]: {
-            display: 'inline-flex',
-            flexWrap: 'nowrap',
-            direction: 'ltr',
-            [`${componentCls}-panel`]: {
-              borderWidth: `0 0 ${lineWidth}px`
-            },
-            '&:last-child': {
-              [`${componentCls}-panel`]: {
-                borderWidth: 0
-              }
-            }
-          },
-          [`${componentCls}-panel`]: {
-            verticalAlign: 'top',
-            background: 'transparent',
-            borderRadius: 0,
-            borderWidth: 0,
-            [`${componentCls}-content,
-            table`]: {
-              textAlign: 'center'
-            },
-            '&-focused': {
-              borderColor: colorBorder
-            }
-          }
-        }
-      }),
-      '&-dropdown-range': {
-        padding: `${sizePopupArrow * 2 / 3}px 0`,
-        '&-hidden': {
-          display: 'none'
-        }
-      },
-      '&-rtl': {
-        direction: 'rtl',
-        [`${componentCls}-separator`]: {
-          transform: 'rotate(180deg)'
-        },
-        [`${componentCls}-footer`]: {
-          '&-extra': {
-            direction: 'rtl'
-          }
-        }
-      }
-    })
-  },
-  // Follow code may reuse in other components
-  (0, _motion.initSlideMotion)(token, 'slide-up'), (0, _motion.initSlideMotion)(token, 'slide-down'), (0, _motion.initMoveMotion)(token, 'move-up'), (0, _motion.initMoveMotion)(token, 'move-down')];
-};
-const initPickerPanelToken = token => {
-  const pickerTimePanelCellHeight = 28;
-  const {
-    componentCls,
-    controlHeightLG,
-    controlHeightSM,
-    colorPrimary,
-    paddingXXS,
-    padding
-  } = token;
-  return {
-    pickerCellCls: `${componentCls}-cell`,
-    pickerCellInnerCls: `${componentCls}-cell-inner`,
-    pickerTextHeight: controlHeightLG,
-    pickerPanelCellWidth: controlHeightSM * 1.5,
-    pickerPanelCellHeight: controlHeightSM,
-    pickerDateHoverRangeBorderColor: new _tinycolor.TinyColor(colorPrimary).lighten(20).toHexString(),
-    pickerBasicCellHoverWithRangeColor: new _tinycolor.TinyColor(colorPrimary).lighten(35).toHexString(),
-    pickerPanelWithoutTimeCellHeight: controlHeightLG * 1.65,
-    pickerYearMonthCellWidth: controlHeightLG * 1.5,
-    pickerTimePanelColumnHeight: pickerTimePanelCellHeight * 8,
-    pickerTimePanelColumnWidth: controlHeightLG * 1.4,
-    pickerTimePanelCellHeight,
-    pickerQuarterPanelContentHeight: controlHeightLG * 1.4,
-    pickerCellPaddingVertical: paddingXXS + paddingXXS / 2,
-    pickerCellBorderGap: 2,
-    pickerControlIconSize: 7,
-    pickerControlIconBorderWidth: 1.5,
-    pickerDatePanelPaddingHorizontal: padding + paddingXXS / 2 // 18 in normal
-  };
-};
-// ============================== Export ==============================
-exports.initPickerPanelToken = initPickerPanelToken;
-var _default = (0, _internal.genComponentStyleHook)('DatePicker', token => {
-  const pickerToken = (0, _internal.mergeToken)((0, _style.initInputToken)(token), initPickerPanelToken(token));
-  return [genPickerStyle(pickerToken), genPickerStatusStyle(pickerToken),
-  // =====================================================
-  // ==             Space Compact                       ==
-  // =====================================================
-  (0, _compactItem.genCompactItemStyle)(token, {
-    focusElCls: `${token.componentCls}-focused`
-  })];
-}, token => ({
-  presetsWidth: 120,
-  presetsMaxWidth: 200,
-  zIndexPopup: token.zIndexPopupBase + 50
-}));
-exports.default = _default;