@gobolt/genesis 0.2.14 → 0.2.16

package/dist/node_modules/antd/es/date-picker/style/panel.js

@@ -2,7 +2,7 @@ import "../../../../@ant-design/cssinjs/es/extractStyle.js";
 import "../../../../@ant-design/cssinjs/es/hooks/useCacheToken.js";
 import "react";
 import "../../../../@ant-design/cssinjs/es/StyleContext.js";
-import { unit as n } from "../../../../@ant-design/cssinjs/es/util/index.js";
+import { unit } from "../../../../@ant-design/cssinjs/es/util/index.js";
 import "../../../../@ant-design/cssinjs/es/hooks/useCompatibleInsertionEffect.js";
 import "../../../../@ant-design/cssinjs/es/hooks/useEffectCleanupRegister.js";
 import "../../../../@ant-design/cssinjs/es/hooks/useHMR.js";
@@ -10,29 +10,609 @@ import "../../../../rc-util/es/warning.js";
 import "../../../../@ant-design/cssinjs/es/theme/createTheme.js";
 import "../../../../@ant-design/cssinjs/es/theme/ThemeCache.js";
 import "../../../../@ant-design/cssinjs/es/transformers/legacyLogicalProperties.js";
-import { FastColor as q } from "../../../../@ant-design/fast-color/es/FastColor.js";
-const G = (t) => {
-  const { pickerCellCls: e, pickerCellInnerCls: r, cellHeight: o, borderRadiusSM: i, motionDurationMid: a, cellHoverBg: p, lineWidth: g, lineType: l, colorPrimary: d, cellActiveWithRangeBg: c, colorTextLightSolid: b, colorTextDisabled: s, cellBgDisabled: v, colorFillSecondary: u } = t;
-  return { "&::before": { position: "absolute", top: "50%", insetInlineStart: 0, insetInlineEnd: 0, zIndex: 1, height: o, transform: "translateY(-50%)", content: '""', pointerEvents: "none" }, [r]: { position: "relative", zIndex: 2, display: "inline-block", minWidth: o, height: o, lineHeight: n(o), borderRadius: i, transition: `background ${a}` }, [`&:hover:not(${e}-in-view):not(${e}-disabled),
-    &:hover:not(${e}-selected):not(${e}-range-start):not(${e}-range-end):not(${e}-disabled)`]: { [r]: { background: p } }, [`&-in-view${e}-today ${r}`]: { "&::before": { position: "absolute", top: 0, insetInlineEnd: 0, bottom: 0, insetInlineStart: 0, zIndex: 1, border: `${n(g)} ${l} ${d}`, borderRadius: i, content: '""' } }, [`&-in-view${e}-in-range,
-      &-in-view${e}-range-start,
-      &-in-view${e}-range-end`]: { position: "relative", [`&:not(${e}-disabled):before`]: { background: c } }, [`&-in-view${e}-selected,
-      &-in-view${e}-range-start,
-      &-in-view${e}-range-end`]: { [`&:not(${e}-disabled) ${r}`]: { color: b, background: d }, [`&${e}-disabled ${r}`]: { background: u } }, [`&-in-view${e}-range-start:not(${e}-disabled):before`]: { insetInlineStart: "50%" }, [`&-in-view${e}-range-end:not(${e}-disabled):before`]: { insetInlineEnd: "50%" }, [`&-in-view${e}-range-start:not(${e}-range-end) ${r}`]: { borderStartStartRadius: i, borderEndStartRadius: i, borderStartEndRadius: 0, borderEndEndRadius: 0 }, [`&-in-view${e}-range-end:not(${e}-range-start) ${r}`]: { borderStartStartRadius: 0, borderEndStartRadius: 0, borderStartEndRadius: i, borderEndEndRadius: i }, "&-disabled": { color: s, cursor: "not-allowed", [r]: { background: "transparent" }, "&::before": { background: v } }, [`&-disabled${e}-today ${r}::before`]: { borderColor: s } };
-}, re = (t) => {
-  const { componentCls: e, pickerCellCls: r, pickerCellInnerCls: o, pickerYearMonthCellWidth: i, pickerControlIconSize: a, cellWidth: p, paddingSM: g, paddingXS: l, paddingXXS: d, colorBgContainer: c, lineWidth: b, lineType: s, borderRadiusLG: v, colorPrimary: u, colorTextHeading: P, colorSplit: k, pickerControlIconBorderWidth: h, colorIcon: A, textHeight: x, motionDurationMid: m, colorIconHover: D, fontWeightStrong: z, cellHeight: C, pickerCellPaddingVertical: I, colorTextDisabled: R, colorText: S, fontSize: M, motionDurationSlow: X, withoutTimeCellHeight: j, pickerQuarterPanelContentHeight: L, borderRadiusSM: $, colorTextLightSolid: W, cellHoverBg: H, timeColumnHeight: Y, timeColumnWidth: w, timeCellHeight: f, controlItemBgActive: y, marginXXS: E, pickerDatePanelPaddingHorizontal: B, pickerControlIconMargin: T } = t, F = t.calc(p).mul(7).add(t.calc(B).mul(2)).equal();
-  return { [e]: { "&-panel": { display: "inline-flex", flexDirection: "column", textAlign: "center", background: c, borderRadius: v, outline: "none", "&-focused": { borderColor: u }, "&-rtl": { [`${e}-prev-icon,
-              ${e}-super-prev-icon`]: { transform: "rotate(45deg)" }, [`${e}-next-icon,
-              ${e}-super-next-icon`]: { transform: "rotate(-135deg)" }, [`${e}-time-panel`]: { [`${e}-content`]: { direction: "ltr", "> *": { direction: "rtl" } } } } }, "&-decade-panel,\n        &-year-panel,\n        &-quarter-panel,\n        &-month-panel,\n        &-week-panel,\n        &-date-panel,\n        &-time-panel": { display: "flex", flexDirection: "column", width: F }, "&-header": { display: "flex", padding: `0 ${n(l)}`, color: P, borderBottom: `${n(b)} ${s} ${k}`, "> *": { flex: "none" }, button: { padding: 0, color: A, lineHeight: n(x), background: "transparent", border: 0, cursor: "pointer", transition: `color ${m}`, fontSize: "inherit", display: "inline-flex", alignItems: "center", justifyContent: "center", "&:empty": { display: "none" } }, "> button": { minWidth: "1.6em", fontSize: M, "&:hover": { color: D }, "&:disabled": { opacity: 0.25, pointerEvents: "none" } }, "&-view": { flex: "auto", fontWeight: z, lineHeight: n(x), "> button": { color: "inherit", fontWeight: "inherit", verticalAlign: "top", "&:not(:first-child)": { marginInlineStart: l }, "&:hover": { color: u } } } }, "&-prev-icon,\n        &-next-icon,\n        &-super-prev-icon,\n        &-super-next-icon": { position: "relative", width: a, height: a, "&::before": { position: "absolute", top: 0, insetInlineStart: 0, width: a, height: a, border: "0 solid currentcolor", borderBlockWidth: `${n(h)} 0`, borderInlineWidth: `${n(h)} 0`, content: '""' } }, "&-super-prev-icon,\n        &-super-next-icon": { "&::after": { position: "absolute", top: T, insetInlineStart: T, display: "inline-block", width: a, height: a, border: "0 solid currentcolor", borderBlockWidth: `${n(h)} 0`, borderInlineWidth: `${n(h)} 0`, content: '""' } }, "&-prev-icon, &-super-prev-icon": { transform: "rotate(-45deg)" }, "&-next-icon, &-super-next-icon": { transform: "rotate(135deg)" }, "&-content": { width: "100%", tableLayout: "fixed", borderCollapse: "collapse", "th, td": { position: "relative", minWidth: C, fontWeight: "normal" }, th: { height: t.calc(C).add(t.calc(I).mul(2)).equal(), color: S, verticalAlign: "middle" } }, "&-cell": Object.assign({ padding: `${n(I)} 0`, color: R, cursor: "pointer", "&-in-view": { color: S } }, G(t)), "&-decade-panel,\n        &-year-panel,\n        &-quarter-panel,\n        &-month-panel": { [`${e}-content`]: { height: t.calc(j).mul(4).equal() }, [o]: { padding: `0 ${n(l)}` } }, "&-quarter-panel": { [`${e}-content`]: { height: L } }, "&-decade-panel": { [o]: { padding: `0 ${n(t.calc(l).div(2).equal())}` }, [`${e}-cell::before`]: { display: "none" } }, "&-year-panel,\n        &-quarter-panel,\n        &-month-panel": { [`${e}-body`]: { padding: `0 ${n(l)}` }, [o]: { width: i } }, "&-date-panel": { [`${e}-body`]: { padding: `${n(l)} ${n(B)}` }, [`${e}-content th`]: { boxSizing: "border-box", padding: 0 } }, "&-week-panel": { [`${e}-cell`]: { [`&:hover ${o},
-            &-selected ${o},
-            ${o}`]: { background: "transparent !important" } }, "&-row": { td: { "&:before": { transition: `background ${m}` }, "&:first-child:before": { borderStartStartRadius: $, borderEndStartRadius: $ }, "&:last-child:before": { borderStartEndRadius: $, borderEndEndRadius: $ } }, "&:hover td:before": { background: H }, "&-range-start td, &-range-end td, &-selected td, &-hover td": { [`&${r}`]: { "&:before": { background: u }, [`&${e}-cell-week`]: { color: new q(W).setA(0.5).toHexString() }, [o]: { color: W } } }, "&-range-hover td:before": { background: y } } }, "&-week-panel, &-date-panel-show-week": { [`${e}-body`]: { padding: `${n(l)} ${n(g)}` }, [`${e}-content th`]: { width: "auto" } }, "&-datetime-panel": { display: "flex", [`${e}-time-panel`]: { borderInlineStart: `${n(b)} ${s} ${k}` }, [`${e}-date-panel,
-          ${e}-time-panel`]: { transition: `opacity ${X}` }, "&-active": { [`${e}-date-panel,
-            ${e}-time-panel`]: { opacity: 0.3, "&-active": { opacity: 1 } } } }, "&-time-panel": { width: "auto", minWidth: "auto", [`${e}-content`]: { display: "flex", flex: "auto", height: Y }, "&-column": { flex: "1 0 auto", width: w, margin: `${n(d)} 0`, padding: 0, overflowY: "hidden", textAlign: "start", listStyle: "none", transition: `background ${m}`, overflowX: "hidden", "&::-webkit-scrollbar": { width: 8, backgroundColor: "transparent" }, "&::-webkit-scrollbar-thumb": { backgroundColor: t.colorTextTertiary, borderRadius: t.borderRadiusSM }, "&": { scrollbarWidth: "thin", scrollbarColor: `${t.colorTextTertiary} transparent` }, "&::after": { display: "block", height: `calc(100% - ${n(f)})`, content: '""' }, "&:not(:first-child)": { borderInlineStart: `${n(b)} ${s} ${k}` }, "&-active": { background: new q(y).setA(0.2).toHexString() }, "&:hover": { overflowY: "auto" }, "> li": { margin: 0, padding: 0, [`&${e}-time-panel-cell`]: { marginInline: E, [`${e}-time-panel-cell-inner`]: { display: "block", width: t.calc(w).sub(t.calc(E).mul(2)).equal(), height: f, margin: 0, paddingBlock: 0, paddingInlineEnd: 0, paddingInlineStart: t.calc(w).sub(f).div(2).equal(), color: S, lineHeight: n(f), borderRadius: $, cursor: "pointer", transition: `background ${m}`, "&:hover": { background: H } }, "&-selected": { [`${e}-time-panel-cell-inner`]: { background: y } }, "&-disabled": { [`${e}-time-panel-cell-inner`]: { color: R, background: "transparent", cursor: "not-allowed" } } } } } } } };
-}, ie = (t) => {
-  const { componentCls: e, textHeight: r, lineWidth: o, paddingSM: i, antCls: a, colorPrimary: p, cellActiveWithRangeBg: g, colorPrimaryBorder: l, lineType: d, colorSplit: c } = t;
-  return { [`${e}-dropdown`]: { [`${e}-footer`]: { borderTop: `${n(o)} ${d} ${c}`, "&-extra": { padding: `0 ${n(i)}`, lineHeight: n(t.calc(r).sub(t.calc(o).mul(2)).equal()), textAlign: "start", "&:not(:last-child)": { borderBottom: `${n(o)} ${d} ${c}` } } }, [`${e}-panels + ${e}-footer ${e}-ranges`]: { justifyContent: "space-between" }, [`${e}-ranges`]: { marginBlock: 0, paddingInline: n(i), overflow: "hidden", textAlign: "start", listStyle: "none", display: "flex", justifyContent: "center", alignItems: "center", "> li": { lineHeight: n(t.calc(r).sub(t.calc(o).mul(2)).equal()), display: "inline-block" }, [`${e}-now-btn-disabled`]: { pointerEvents: "none", color: t.colorTextDisabled }, [`${e}-preset > ${a}-tag-blue`]: { color: p, background: g, borderColor: l, cursor: "pointer" }, [`${e}-ok`]: { paddingBlock: t.calc(o).mul(2).equal(), marginInlineStart: "auto" } } } };
+import { FastColor } from "../../../../@ant-design/fast-color/es/FastColor.js";
+const genPickerCellInnerStyle = (token) => {
+  const {
+    pickerCellCls,
+    pickerCellInnerCls,
+    cellHeight,
+    borderRadiusSM,
+    motionDurationMid,
+    cellHoverBg,
+    lineWidth,
+    lineType,
+    colorPrimary,
+    cellActiveWithRangeBg,
+    colorTextLightSolid,
+    colorTextDisabled,
+    cellBgDisabled,
+    colorFillSecondary
+  } = token;
+  return {
+    "&::before": {
+      position: "absolute",
+      top: "50%",
+      insetInlineStart: 0,
+      insetInlineEnd: 0,
+      zIndex: 1,
+      height: cellHeight,
+      transform: "translateY(-50%)",
+      content: '""',
+      pointerEvents: "none"
+    },
+    // >>> Default
+    [pickerCellInnerCls]: {
+      position: "relative",
+      zIndex: 2,
+      display: "inline-block",
+      minWidth: cellHeight,
+      height: cellHeight,
+      lineHeight: unit(cellHeight),
+      borderRadius: borderRadiusSM,
+      transition: `background ${motionDurationMid}`
+    },
+    // >>> Hover
+    [`&:hover:not(${pickerCellCls}-in-view):not(${pickerCellCls}-disabled),
+    &:hover:not(${pickerCellCls}-selected):not(${pickerCellCls}-range-start):not(${pickerCellCls}-range-end):not(${pickerCellCls}-disabled)`]: {
+      [pickerCellInnerCls]: {
+        background: cellHoverBg
+      }
+    },
+    // >>> Today
+    [`&-in-view${pickerCellCls}-today ${pickerCellInnerCls}`]: {
+      "&::before": {
+        position: "absolute",
+        top: 0,
+        insetInlineEnd: 0,
+        bottom: 0,
+        insetInlineStart: 0,
+        zIndex: 1,
+        border: `${unit(lineWidth)} ${lineType} ${colorPrimary}`,
+        borderRadius: borderRadiusSM,
+        content: '""'
+      }
+    },
+    // >>> In Range
+    [`&-in-view${pickerCellCls}-in-range,
+      &-in-view${pickerCellCls}-range-start,
+      &-in-view${pickerCellCls}-range-end`]: {
+      position: "relative",
+      [`&:not(${pickerCellCls}-disabled):before`]: {
+        background: cellActiveWithRangeBg
+      }
+    },
+    // >>> Selected
+    [`&-in-view${pickerCellCls}-selected,
+      &-in-view${pickerCellCls}-range-start,
+      &-in-view${pickerCellCls}-range-end`]: {
+      [`&:not(${pickerCellCls}-disabled) ${pickerCellInnerCls}`]: {
+        color: colorTextLightSolid,
+        background: colorPrimary
+      },
+      [`&${pickerCellCls}-disabled ${pickerCellInnerCls}`]: {
+        background: colorFillSecondary
+      }
+    },
+    [`&-in-view${pickerCellCls}-range-start:not(${pickerCellCls}-disabled):before`]: {
+      insetInlineStart: "50%"
+    },
+    [`&-in-view${pickerCellCls}-range-end:not(${pickerCellCls}-disabled):before`]: {
+      insetInlineEnd: "50%"
+    },
+    // range start border-radius
+    [`&-in-view${pickerCellCls}-range-start: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-start) ${pickerCellInnerCls}`]: {
+      borderStartStartRadius: 0,
+      borderEndStartRadius: 0,
+      borderStartEndRadius: borderRadiusSM,
+      borderEndEndRadius: borderRadiusSM
+    },
+    // >>> Disabled
+    "&-disabled": {
+      color: colorTextDisabled,
+      cursor: "not-allowed",
+      [pickerCellInnerCls]: {
+        background: "transparent"
+      },
+      "&::before": {
+        background: cellBgDisabled
+      }
+    },
+    [`&-disabled${pickerCellCls}-today ${pickerCellInnerCls}::before`]: {
+      borderColor: colorTextDisabled
+    }
+  };
+};
+const genPanelStyle = (token) => {
+  const {
+    componentCls,
+    pickerCellCls,
+    pickerCellInnerCls,
+    pickerYearMonthCellWidth,
+    pickerControlIconSize,
+    cellWidth,
+    paddingSM,
+    paddingXS,
+    paddingXXS,
+    colorBgContainer,
+    lineWidth,
+    lineType,
+    borderRadiusLG,
+    colorPrimary,
+    colorTextHeading,
+    colorSplit,
+    pickerControlIconBorderWidth,
+    colorIcon,
+    textHeight,
+    motionDurationMid,
+    colorIconHover,
+    fontWeightStrong,
+    cellHeight,
+    pickerCellPaddingVertical,
+    colorTextDisabled,
+    colorText,
+    fontSize,
+    motionDurationSlow,
+    withoutTimeCellHeight,
+    pickerQuarterPanelContentHeight,
+    borderRadiusSM,
+    colorTextLightSolid,
+    cellHoverBg,
+    timeColumnHeight,
+    timeColumnWidth,
+    timeCellHeight,
+    controlItemBgActive,
+    marginXXS,
+    pickerDatePanelPaddingHorizontal,
+    pickerControlIconMargin
+  } = token;
+  const pickerPanelWidth = token.calc(cellWidth).mul(7).add(token.calc(pickerDatePanelPaddingHorizontal).mul(2)).equal();
+  return {
+    [componentCls]: {
+      "&-panel": {
+        display: "inline-flex",
+        flexDirection: "column",
+        textAlign: "center",
+        background: colorBgContainer,
+        borderRadius: borderRadiusLG,
+        outline: "none",
+        "&-focused": {
+          borderColor: colorPrimary
+        },
+        "&-rtl": {
+          [`${componentCls}-prev-icon,
+              ${componentCls}-super-prev-icon`]: {
+            transform: "rotate(45deg)"
+          },
+          [`${componentCls}-next-icon,
+              ${componentCls}-super-next-icon`]: {
+            transform: "rotate(-135deg)"
+          },
+          [`${componentCls}-time-panel`]: {
+            [`${componentCls}-content`]: {
+              direction: "ltr",
+              "> *": {
+                direction: "rtl"
+              }
+            }
+          }
+        }
+      },
+      // ========================================================
+      // =                     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 ${unit(paddingXS)}`,
+        color: colorTextHeading,
+        borderBottom: `${unit(lineWidth)} ${lineType} ${colorSplit}`,
+        "> *": {
+          flex: "none"
+        },
+        button: {
+          padding: 0,
+          color: colorIcon,
+          lineHeight: unit(textHeight),
+          background: "transparent",
+          border: 0,
+          cursor: "pointer",
+          transition: `color ${motionDurationMid}`,
+          fontSize: "inherit",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          "&:empty": {
+            display: "none"
+          }
+        },
+        "> button": {
+          minWidth: "1.6em",
+          fontSize,
+          "&:hover": {
+            color: colorIconHover
+          },
+          "&:disabled": {
+            opacity: 0.25,
+            pointerEvents: "none"
+          }
+        },
+        "&-view": {
+          flex: "auto",
+          fontWeight: fontWeightStrong,
+          lineHeight: unit(textHeight),
+          "> 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",
+        width: pickerControlIconSize,
+        height: pickerControlIconSize,
+        "&::before": {
+          position: "absolute",
+          top: 0,
+          insetInlineStart: 0,
+          width: pickerControlIconSize,
+          height: pickerControlIconSize,
+          border: `0 solid currentcolor`,
+          borderBlockWidth: `${unit(pickerControlIconBorderWidth)} 0`,
+          borderInlineWidth: `${unit(pickerControlIconBorderWidth)} 0`,
+          content: '""'
+        }
+      },
+      [`&-super-prev-icon,
+        &-super-next-icon`]: {
+        "&::after": {
+          position: "absolute",
+          top: pickerControlIconMargin,
+          insetInlineStart: pickerControlIconMargin,
+          display: "inline-block",
+          width: pickerControlIconSize,
+          height: pickerControlIconSize,
+          border: "0 solid currentcolor",
+          borderBlockWidth: `${unit(pickerControlIconBorderWidth)} 0`,
+          borderInlineWidth: `${unit(pickerControlIconBorderWidth)} 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: cellHeight,
+          fontWeight: "normal"
+        },
+        th: {
+          height: token.calc(cellHeight).add(token.calc(pickerCellPaddingVertical).mul(2)).equal(),
+          color: colorText,
+          verticalAlign: "middle"
+        }
+      },
+      "&-cell": Object.assign({
+        padding: `${unit(pickerCellPaddingVertical)} 0`,
+        color: colorTextDisabled,
+        cursor: "pointer",
+        // In view
+        "&-in-view": {
+          color: colorText
+        }
+      }, genPickerCellInnerStyle(token)),
+      [`&-decade-panel,
+        &-year-panel,
+        &-quarter-panel,
+        &-month-panel`]: {
+        [`${componentCls}-content`]: {
+          height: token.calc(withoutTimeCellHeight).mul(4).equal()
+        },
+        [pickerCellInnerCls]: {
+          padding: `0 ${unit(paddingXS)}`
+        }
+      },
+      "&-quarter-panel": {
+        [`${componentCls}-content`]: {
+          height: pickerQuarterPanelContentHeight
+        }
+      },
+      // ========================================================
+      // =                       Special                        =
+      // ========================================================
+      // ===================== Decade Panel =====================
+      "&-decade-panel": {
+        [pickerCellInnerCls]: {
+          padding: `0 ${unit(token.calc(paddingXS).div(2).equal())}`
+        },
+        [`${componentCls}-cell::before`]: {
+          display: "none"
+        }
+      },
+      // ============= Year & Quarter & Month Panel =============
+      [`&-year-panel,
+        &-quarter-panel,
+        &-month-panel`]: {
+        [`${componentCls}-body`]: {
+          padding: `0 ${unit(paddingXS)}`
+        },
+        [pickerCellInnerCls]: {
+          width: pickerYearMonthCellWidth
+        }
+      },
+      // ====================== Date Panel ======================
+      "&-date-panel": {
+        [`${componentCls}-body`]: {
+          padding: `${unit(paddingXS)} ${unit(pickerDatePanelPaddingHorizontal)}`
+        },
+        [`${componentCls}-content th`]: {
+          boxSizing: "border-box",
+          padding: 0
+        }
+      },
+      // ====================== Week Panel ======================
+      "&-week-panel": {
+        // 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: cellHoverBg
+          },
+          "&-range-start td, &-range-end td, &-selected td, &-hover td": {
+            // Rise priority to override hover style
+            [`&${pickerCellCls}`]: {
+              "&:before": {
+                background: colorPrimary
+              },
+              [`&${componentCls}-cell-week`]: {
+                color: new FastColor(colorTextLightSolid).setA(0.5).toHexString()
+              },
+              [pickerCellInnerCls]: {
+                color: colorTextLightSolid
+              }
+            }
+          },
+          "&-range-hover td:before": {
+            background: controlItemBgActive
+          }
+        }
+      },
+      // >>> ShowWeek
+      "&-week-panel, &-date-panel-show-week": {
+        [`${componentCls}-body`]: {
+          padding: `${unit(paddingXS)} ${unit(paddingSM)}`
+        },
+        [`${componentCls}-content th`]: {
+          width: "auto"
+        }
+      },
+      // ==================== Datetime Panel ====================
+      "&-datetime-panel": {
+        display: "flex",
+        [`${componentCls}-time-panel`]: {
+          borderInlineStart: `${unit(lineWidth)} ${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",
+        [`${componentCls}-content`]: {
+          display: "flex",
+          flex: "auto",
+          height: timeColumnHeight
+        },
+        "&-column": {
+          flex: "1 0 auto",
+          width: timeColumnWidth,
+          margin: `${unit(paddingXXS)} 0`,
+          padding: 0,
+          overflowY: "hidden",
+          textAlign: "start",
+          listStyle: "none",
+          transition: `background ${motionDurationMid}`,
+          overflowX: "hidden",
+          "&::-webkit-scrollbar": {
+            width: 8,
+            backgroundColor: "transparent"
+          },
+          "&::-webkit-scrollbar-thumb": {
+            backgroundColor: token.colorTextTertiary,
+            borderRadius: token.borderRadiusSM
+          },
+          // For Firefox
+          "&": {
+            scrollbarWidth: "thin",
+            scrollbarColor: `${token.colorTextTertiary} transparent`
+          },
+          "&::after": {
+            display: "block",
+            height: `calc(100% - ${unit(timeCellHeight)})`,
+            content: '""'
+          },
+          "&:not(:first-child)": {
+            borderInlineStart: `${unit(lineWidth)} ${lineType} ${colorSplit}`
+          },
+          "&-active": {
+            background: new FastColor(controlItemBgActive).setA(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: token.calc(timeColumnWidth).sub(token.calc(marginXXS).mul(2)).equal(),
+                height: timeCellHeight,
+                margin: 0,
+                paddingBlock: 0,
+                paddingInlineEnd: 0,
+                paddingInlineStart: token.calc(timeColumnWidth).sub(timeCellHeight).div(2).equal(),
+                color: colorText,
+                lineHeight: unit(timeCellHeight),
+                borderRadius: borderRadiusSM,
+                cursor: "pointer",
+                transition: `background ${motionDurationMid}`,
+                "&:hover": {
+                  background: cellHoverBg
+                }
+              },
+              "&-selected": {
+                [`${componentCls}-time-panel-cell-inner`]: {
+                  background: controlItemBgActive
+                }
+              },
+              "&-disabled": {
+                [`${componentCls}-time-panel-cell-inner`]: {
+                  color: colorTextDisabled,
+                  background: "transparent",
+                  cursor: "not-allowed"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  };
+};
+const genPickerPanelStyle = (token) => {
+  const {
+    componentCls,
+    textHeight,
+    lineWidth,
+    paddingSM,
+    antCls,
+    colorPrimary,
+    cellActiveWithRangeBg,
+    colorPrimaryBorder,
+    lineType,
+    colorSplit
+  } = token;
+  return {
+    [`${componentCls}-dropdown`]: {
+      // ======================== Footer ========================
+      [`${componentCls}-footer`]: {
+        borderTop: `${unit(lineWidth)} ${lineType} ${colorSplit}`,
+        "&-extra": {
+          padding: `0 ${unit(paddingSM)}`,
+          lineHeight: unit(token.calc(textHeight).sub(token.calc(lineWidth).mul(2)).equal()),
+          textAlign: "start",
+          "&:not(:last-child)": {
+            borderBottom: `${unit(lineWidth)} ${lineType} ${colorSplit}`
+          }
+        }
+      },
+      // ==================== Footer > Ranges ===================
+      [`${componentCls}-panels + ${componentCls}-footer ${componentCls}-ranges`]: {
+        justifyContent: "space-between"
+      },
+      [`${componentCls}-ranges`]: {
+        marginBlock: 0,
+        paddingInline: unit(paddingSM),
+        overflow: "hidden",
+        textAlign: "start",
+        listStyle: "none",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        "> li": {
+          lineHeight: unit(token.calc(textHeight).sub(token.calc(lineWidth).mul(2)).equal()),
+          display: "inline-block"
+        },
+        [`${componentCls}-now-btn-disabled`]: {
+          pointerEvents: "none",
+          color: token.colorTextDisabled
+        },
+        // https://github.com/ant-design/ant-design/issues/23687
+        [`${componentCls}-preset > ${antCls}-tag-blue`]: {
+          color: colorPrimary,
+          background: cellActiveWithRangeBg,
+          borderColor: colorPrimaryBorder,
+          cursor: "pointer"
+        },
+        [`${componentCls}-ok`]: {
+          paddingBlock: token.calc(lineWidth).mul(2).equal(),
+          marginInlineStart: "auto"
+        }
+      }
+    }
+  };
 };
 export {
-  ie as default,
-  re as genPanelStyle
+  genPickerPanelStyle as default,
+  genPanelStyle
 };