@gobolt/genesis 0.2.13 → 0.2.14

package/dist/node_modules/antd/es/tabs/style/index.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 a } from "../../../../@ant-design/cssinjs/es/util/index.js";
+import { unit as n } 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,832 +10,44 @@ 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 { resetComponent as $, textEllipsis as g, genFocusOutline as p, genFocusStyle as s } from "../../style/index.js";
+import { resetComponent as $, textEllipsis as b, genFocusOutline as p, genFocusStyle as s } from "../../style/index.js";
 import "../../../../rc-util/es/hooks/useLayoutEffect.js";
 import "../../../../rc-util/es/ref.js";
-import { merge as b } from "../../../../@ant-design/cssinjs-utils/es/util/statistic.js";
+import { merge as m } from "../../../../@ant-design/cssinjs-utils/es/util/statistic.js";
 import "../../../../@ant-design/cssinjs-utils/es/_util/hooks/useUniqueMemo.js";
-import { genStyleHooks as m } from "../../theme/util/genStyleUtils.js";
-import v from "./motion.js";
-const h = (r) => {
-  const {
-    componentCls: i,
-    tabsCardPadding: o,
-    cardBg: t,
-    cardGutter: e,
-    colorBorderSecondary: l,
-    itemSelectedColor: d
-  } = r;
-  return {
-    [`${i}-card`]: {
-      [`> ${i}-nav, > div > ${i}-nav`]: {
-        [`${i}-tab`]: {
-          margin: 0,
-          padding: o,
-          background: t,
-          border: `${a(r.lineWidth)} ${r.lineType} ${l}`,
-          transition: `all ${r.motionDurationSlow} ${r.motionEaseInOut}`
-        },
-        [`${i}-tab-active`]: {
-          color: d,
-          background: r.colorBgContainer
-        },
-        [`${i}-tab-focus`]: Object.assign({}, p(r, -3)),
-        [`${i}-ink-bar`]: {
-          visibility: "hidden"
-        },
-        [`& ${i}-tab${i}-tab-focus ${i}-tab-btn`]: {
-          outline: "none"
-        }
-      },
-      // ========================== Top & Bottom ==========================
-      [`&${i}-top, &${i}-bottom`]: {
-        [`> ${i}-nav, > div > ${i}-nav`]: {
-          [`${i}-tab + ${i}-tab`]: {
-            marginLeft: {
-              _skip_check_: !0,
-              value: a(e)
-            }
-          }
-        }
-      },
-      [`&${i}-top`]: {
-        [`> ${i}-nav, > div > ${i}-nav`]: {
-          [`${i}-tab`]: {
-            borderRadius: `${a(r.borderRadiusLG)} ${a(r.borderRadiusLG)} 0 0`
-          },
-          [`${i}-tab-active`]: {
-            borderBottomColor: r.colorBgContainer
-          }
-        }
-      },
-      [`&${i}-bottom`]: {
-        [`> ${i}-nav, > div > ${i}-nav`]: {
-          [`${i}-tab`]: {
-            borderRadius: `0 0 ${a(r.borderRadiusLG)} ${a(r.borderRadiusLG)}`
-          },
-          [`${i}-tab-active`]: {
-            borderTopColor: r.colorBgContainer
-          }
-        }
-      },
-      // ========================== Left & Right ==========================
-      [`&${i}-left, &${i}-right`]: {
-        [`> ${i}-nav, > div > ${i}-nav`]: {
-          [`${i}-tab + ${i}-tab`]: {
-            marginTop: a(e)
-          }
-        }
-      },
-      [`&${i}-left`]: {
-        [`> ${i}-nav, > div > ${i}-nav`]: {
-          [`${i}-tab`]: {
-            borderRadius: {
-              _skip_check_: !0,
-              value: `${a(r.borderRadiusLG)} 0 0 ${a(r.borderRadiusLG)}`
-            }
-          },
-          [`${i}-tab-active`]: {
-            borderRightColor: {
-              _skip_check_: !0,
-              value: r.colorBgContainer
-            }
-          }
-        }
-      },
-      [`&${i}-right`]: {
-        [`> ${i}-nav, > div > ${i}-nav`]: {
-          [`${i}-tab`]: {
-            borderRadius: {
-              _skip_check_: !0,
-              value: `0 ${a(r.borderRadiusLG)} ${a(r.borderRadiusLG)} 0`
-            }
-          },
-          [`${i}-tab-active`]: {
-            borderLeftColor: {
-              _skip_check_: !0,
-              value: r.colorBgContainer
-            }
-          }
-        }
-      }
-    }
-  };
-}, _ = (r) => {
-  const {
-    componentCls: i,
-    itemHoverColor: o,
-    dropdownEdgeChildVerticalPadding: t
-  } = r;
-  return {
-    [`${i}-dropdown`]: Object.assign(Object.assign({}, $(r)), {
-      position: "absolute",
-      top: -9999,
-      left: {
-        _skip_check_: !0,
-        value: -9999
-      },
-      zIndex: r.zIndexPopup,
-      display: "block",
-      "&-hidden": {
-        display: "none"
-      },
-      [`${i}-dropdown-menu`]: {
-        maxHeight: r.tabsDropdownHeight,
-        margin: 0,
-        padding: `${a(t)} 0`,
-        overflowX: "hidden",
-        overflowY: "auto",
-        textAlign: {
-          _skip_check_: !0,
-          value: "left"
-        },
-        listStyleType: "none",
-        backgroundColor: r.colorBgContainer,
-        backgroundClip: "padding-box",
-        borderRadius: r.borderRadiusLG,
-        outline: "none",
-        boxShadow: r.boxShadowSecondary,
-        "&-item": Object.assign(Object.assign({}, g), {
-          display: "flex",
-          alignItems: "center",
-          minWidth: r.tabsDropdownWidth,
-          margin: 0,
-          padding: `${a(r.paddingXXS)} ${a(r.paddingSM)}`,
-          color: r.colorText,
-          fontWeight: "normal",
-          fontSize: r.fontSize,
-          lineHeight: r.lineHeight,
-          cursor: "pointer",
-          transition: `all ${r.motionDurationSlow}`,
-          "> span": {
-            flex: 1,
-            whiteSpace: "nowrap"
-          },
-          "&-remove": {
-            flex: "none",
-            marginLeft: {
-              _skip_check_: !0,
-              value: r.marginSM
-            },
-            color: r.colorTextDescription,
-            fontSize: r.fontSizeSM,
-            background: "transparent",
-            border: 0,
-            cursor: "pointer",
-            "&:hover": {
-              color: o
-            }
-          },
-          "&:hover": {
-            background: r.controlItemBgHover
-          },
-          "&-disabled": {
-            "&, &:hover": {
-              color: r.colorTextDisabled,
-              background: "transparent",
-              cursor: "not-allowed"
-            }
-          }
-        })
-      }
-    })
-  };
-}, f = (r) => {
-  const {
-    componentCls: i,
-    margin: o,
-    colorBorderSecondary: t,
-    horizontalMargin: e,
-    verticalItemPadding: l,
-    verticalItemMargin: d,
-    calc: c
-  } = r;
-  return {
-    // ========================== Top & Bottom ==========================
-    [`${i}-top, ${i}-bottom`]: {
-      flexDirection: "column",
-      [`> ${i}-nav, > div > ${i}-nav`]: {
-        margin: e,
-        "&::before": {
-          position: "absolute",
-          right: {
-            _skip_check_: !0,
-            value: 0
-          },
-          left: {
-            _skip_check_: !0,
-            value: 0
-          },
-          borderBottom: `${a(r.lineWidth)} ${r.lineType} ${t}`,
-          content: "''"
-        },
-        [`${i}-ink-bar`]: {
-          height: r.lineWidthBold,
-          "&-animated": {
-            transition: `width ${r.motionDurationSlow}, left ${r.motionDurationSlow},
-            right ${r.motionDurationSlow}`
-          }
-        },
-        [`${i}-nav-wrap`]: {
-          "&::before, &::after": {
-            top: 0,
-            bottom: 0,
-            width: r.controlHeight
-          },
-          "&::before": {
-            left: {
-              _skip_check_: !0,
-              value: 0
-            },
-            boxShadow: r.boxShadowTabsOverflowLeft
-          },
-          "&::after": {
-            right: {
-              _skip_check_: !0,
-              value: 0
-            },
-            boxShadow: r.boxShadowTabsOverflowRight
-          },
-          [`&${i}-nav-wrap-ping-left::before`]: {
-            opacity: 1
-          },
-          [`&${i}-nav-wrap-ping-right::after`]: {
-            opacity: 1
-          }
-        }
-      }
-    },
-    [`${i}-top`]: {
-      [`> ${i}-nav,
-        > div > ${i}-nav`]: {
-        "&::before": {
-          bottom: 0
-        },
-        [`${i}-ink-bar`]: {
-          bottom: 0
-        }
-      }
-    },
-    [`${i}-bottom`]: {
-      [`> ${i}-nav, > div > ${i}-nav`]: {
-        order: 1,
-        marginTop: o,
-        marginBottom: 0,
-        "&::before": {
-          top: 0
-        },
-        [`${i}-ink-bar`]: {
-          top: 0
-        }
-      },
-      [`> ${i}-content-holder, > div > ${i}-content-holder`]: {
-        order: 0
-      }
-    },
-    // ========================== Left & Right ==========================
-    [`${i}-left, ${i}-right`]: {
-      [`> ${i}-nav, > div > ${i}-nav`]: {
-        flexDirection: "column",
-        minWidth: c(r.controlHeight).mul(1.25).equal(),
-        // >>>>>>>>>>> Tab
-        [`${i}-tab`]: {
-          padding: l,
-          textAlign: "center"
-        },
-        [`${i}-tab + ${i}-tab`]: {
-          margin: d
-        },
-        // >>>>>>>>>>> Nav
-        [`${i}-nav-wrap`]: {
-          flexDirection: "column",
-          "&::before, &::after": {
-            right: {
-              _skip_check_: !0,
-              value: 0
-            },
-            left: {
-              _skip_check_: !0,
-              value: 0
-            },
-            height: r.controlHeight
-          },
-          "&::before": {
-            top: 0,
-            boxShadow: r.boxShadowTabsOverflowTop
-          },
-          "&::after": {
-            bottom: 0,
-            boxShadow: r.boxShadowTabsOverflowBottom
-          },
-          [`&${i}-nav-wrap-ping-top::before`]: {
-            opacity: 1
-          },
-          [`&${i}-nav-wrap-ping-bottom::after`]: {
-            opacity: 1
-          }
-        },
-        // >>>>>>>>>>> Ink Bar
-        [`${i}-ink-bar`]: {
-          width: r.lineWidthBold,
-          "&-animated": {
-            transition: `height ${r.motionDurationSlow}, top ${r.motionDurationSlow}`
-          }
-        },
-        [`${i}-nav-list, ${i}-nav-operations`]: {
-          flex: "1 0 auto",
-          // fix safari scroll problem
-          flexDirection: "column"
-        }
-      }
-    },
-    [`${i}-left`]: {
-      [`> ${i}-nav, > div > ${i}-nav`]: {
-        [`${i}-ink-bar`]: {
-          right: {
-            _skip_check_: !0,
-            value: 0
-          }
-        }
-      },
-      [`> ${i}-content-holder, > div > ${i}-content-holder`]: {
-        marginLeft: {
-          _skip_check_: !0,
-          value: a(c(r.lineWidth).mul(-1).equal())
-        },
-        borderLeft: {
-          _skip_check_: !0,
-          value: `${a(r.lineWidth)} ${r.lineType} ${r.colorBorder}`
-        },
-        [`> ${i}-content > ${i}-tabpane`]: {
-          paddingLeft: {
-            _skip_check_: !0,
-            value: r.paddingLG
-          }
-        }
-      }
-    },
-    [`${i}-right`]: {
-      [`> ${i}-nav, > div > ${i}-nav`]: {
-        order: 1,
-        [`${i}-ink-bar`]: {
-          left: {
-            _skip_check_: !0,
-            value: 0
-          }
-        }
-      },
-      [`> ${i}-content-holder, > div > ${i}-content-holder`]: {
-        order: 0,
-        marginRight: {
-          _skip_check_: !0,
-          value: c(r.lineWidth).mul(-1).equal()
-        },
-        borderRight: {
-          _skip_check_: !0,
-          value: `${a(r.lineWidth)} ${r.lineType} ${r.colorBorder}`
-        },
-        [`> ${i}-content > ${i}-tabpane`]: {
-          paddingRight: {
-            _skip_check_: !0,
-            value: r.paddingLG
-          }
-        }
-      }
-    }
-  };
-}, S = (r) => {
-  const {
-    componentCls: i,
-    cardPaddingSM: o,
-    cardPaddingLG: t,
-    horizontalItemPaddingSM: e,
-    horizontalItemPaddingLG: l
-  } = r;
-  return {
-    [i]: {
-      "&-small": {
-        [`> ${i}-nav`]: {
-          [`${i}-tab`]: {
-            padding: e,
-            fontSize: r.titleFontSizeSM
-          }
-        }
-      },
-      "&-large": {
-        [`> ${i}-nav`]: {
-          [`${i}-tab`]: {
-            padding: l,
-            fontSize: r.titleFontSizeLG
-          }
-        }
-      }
-    },
-    [`${i}-card`]: {
-      [`&${i}-small`]: {
-        [`> ${i}-nav`]: {
-          [`${i}-tab`]: {
-            padding: o
-          }
-        },
-        [`&${i}-bottom`]: {
-          [`> ${i}-nav ${i}-tab`]: {
-            borderRadius: `0 0 ${a(r.borderRadius)} ${a(r.borderRadius)}`
-          }
-        },
-        [`&${i}-top`]: {
-          [`> ${i}-nav ${i}-tab`]: {
-            borderRadius: `${a(r.borderRadius)} ${a(r.borderRadius)} 0 0`
-          }
-        },
-        [`&${i}-right`]: {
-          [`> ${i}-nav ${i}-tab`]: {
-            borderRadius: {
-              _skip_check_: !0,
-              value: `0 ${a(r.borderRadius)} ${a(r.borderRadius)} 0`
-            }
-          }
-        },
-        [`&${i}-left`]: {
-          [`> ${i}-nav ${i}-tab`]: {
-            borderRadius: {
-              _skip_check_: !0,
-              value: `${a(r.borderRadius)} 0 0 ${a(r.borderRadius)}`
-            }
-          }
-        }
-      },
-      [`&${i}-large`]: {
-        [`> ${i}-nav`]: {
-          [`${i}-tab`]: {
-            padding: t
-          }
-        }
-      }
-    }
-  };
-}, x = (r) => {
-  const {
-    componentCls: i,
-    itemActiveColor: o,
-    itemHoverColor: t,
-    iconCls: e,
-    tabsHorizontalItemMargin: l,
-    horizontalItemPadding: d,
-    itemSelectedColor: c,
-    itemColor: u
-  } = r, n = `${i}-tab`;
-  return {
-    [n]: {
-      position: "relative",
-      WebkitTouchCallout: "none",
-      WebkitTapHighlightColor: "transparent",
-      display: "inline-flex",
-      alignItems: "center",
-      padding: d,
-      fontSize: r.titleFontSize,
-      background: "transparent",
-      border: 0,
-      outline: "none",
-      cursor: "pointer",
-      color: u,
-      "&-btn, &-remove": {
-        "&:focus:not(:focus-visible), &:active": {
-          color: o
-        }
-      },
-      "&-btn": {
-        outline: "none",
-        transition: `all ${r.motionDurationSlow}`,
-        [`${n}-icon:not(:last-child)`]: {
-          marginInlineEnd: r.marginSM
-        }
-      },
-      "&-remove": Object.assign({
-        flex: "none",
-        marginRight: {
-          _skip_check_: !0,
-          value: r.calc(r.marginXXS).mul(-1).equal()
-        },
-        marginLeft: {
-          _skip_check_: !0,
-          value: r.marginXS
-        },
-        color: r.colorTextDescription,
-        fontSize: r.fontSizeSM,
-        background: "transparent",
-        border: "none",
-        outline: "none",
-        cursor: "pointer",
-        transition: `all ${r.motionDurationSlow}`,
-        "&:hover": {
-          color: r.colorTextHeading
-        }
-      }, s(r)),
-      "&:hover": {
-        color: t
-      },
-      [`&${n}-active ${n}-btn`]: {
-        color: c,
-        textShadow: r.tabsActiveTextShadow
-      },
-      [`&${n}-focus ${n}-btn`]: Object.assign({}, p(r)),
-      [`&${n}-disabled`]: {
-        color: r.colorTextDisabled,
-        cursor: "not-allowed"
-      },
-      [`&${n}-disabled ${n}-btn, &${n}-disabled ${i}-remove`]: {
-        "&:focus, &:active": {
-          color: r.colorTextDisabled
-        }
-      },
-      [`& ${n}-remove ${e}`]: {
-        margin: 0
-      },
-      [`${e}:not(:last-child)`]: {
-        marginRight: {
-          _skip_check_: !0,
-          value: r.marginSM
-        }
-      }
-    },
-    [`${n} + ${n}`]: {
-      margin: {
-        _skip_check_: !0,
-        value: l
-      }
-    }
-  };
-}, w = (r) => {
-  const {
-    componentCls: i,
-    tabsHorizontalItemMarginRTL: o,
-    iconCls: t,
-    cardGutter: e,
-    calc: l
-  } = r;
-  return {
-    [`${i}-rtl`]: {
-      direction: "rtl",
-      [`${i}-nav`]: {
-        [`${i}-tab`]: {
-          margin: {
-            _skip_check_: !0,
-            value: o
-          },
-          [`${i}-tab:last-of-type`]: {
-            marginLeft: {
-              _skip_check_: !0,
-              value: 0
-            }
-          },
-          [t]: {
-            marginRight: {
-              _skip_check_: !0,
-              value: 0
-            },
-            marginLeft: {
-              _skip_check_: !0,
-              value: a(r.marginSM)
-            }
-          },
-          [`${i}-tab-remove`]: {
-            marginRight: {
-              _skip_check_: !0,
-              value: a(r.marginXS)
-            },
-            marginLeft: {
-              _skip_check_: !0,
-              value: a(l(r.marginXXS).mul(-1).equal())
-            },
-            [t]: {
-              margin: 0
-            }
-          }
-        }
-      },
-      [`&${i}-left`]: {
-        [`> ${i}-nav`]: {
-          order: 1
-        },
-        [`> ${i}-content-holder`]: {
-          order: 0
-        }
-      },
-      [`&${i}-right`]: {
-        [`> ${i}-nav`]: {
-          order: 0
-        },
-        [`> ${i}-content-holder`]: {
-          order: 1
-        }
-      },
-      // ====================== Card ======================
-      [`&${i}-card${i}-top, &${i}-card${i}-bottom`]: {
-        [`> ${i}-nav, > div > ${i}-nav`]: {
-          [`${i}-tab + ${i}-tab`]: {
-            marginRight: {
-              _skip_check_: !0,
-              value: e
-            },
-            marginLeft: {
-              _skip_check_: !0,
-              value: 0
-            }
-          }
-        }
-      }
-    },
-    [`${i}-dropdown-rtl`]: {
-      direction: "rtl"
-    },
-    [`${i}-menu-item`]: {
-      [`${i}-dropdown-rtl`]: {
-        textAlign: {
-          _skip_check_: !0,
-          value: "right"
-        }
-      }
-    }
-  };
-}, C = (r) => {
-  const {
-    componentCls: i,
-    tabsCardPadding: o,
-    cardHeight: t,
-    cardGutter: e,
-    itemHoverColor: l,
-    itemActiveColor: d,
-    colorBorderSecondary: c
-  } = r;
-  return {
-    [i]: Object.assign(Object.assign(Object.assign(Object.assign({}, $(r)), {
-      display: "flex",
-      // ========================== Navigation ==========================
-      [`> ${i}-nav, > div > ${i}-nav`]: {
-        position: "relative",
-        display: "flex",
-        flex: "none",
-        alignItems: "center",
-        [`${i}-nav-wrap`]: {
-          position: "relative",
-          display: "flex",
-          flex: "auto",
-          alignSelf: "stretch",
-          overflow: "hidden",
-          whiteSpace: "nowrap",
-          transform: "translate(0)",
-          // Fix chrome render bug
-          // >>>>> Ping shadow
-          "&::before, &::after": {
-            position: "absolute",
-            zIndex: 1,
-            opacity: 0,
-            transition: `opacity ${r.motionDurationSlow}`,
-            content: "''",
-            pointerEvents: "none"
-          }
-        },
-        [`${i}-nav-list`]: {
-          position: "relative",
-          display: "flex",
-          transition: `opacity ${r.motionDurationSlow}`
-        },
-        // >>>>>>>> Operations
-        [`${i}-nav-operations`]: {
-          display: "flex",
-          alignSelf: "stretch"
-        },
-        [`${i}-nav-operations-hidden`]: {
-          position: "absolute",
-          visibility: "hidden",
-          pointerEvents: "none"
-        },
-        [`${i}-nav-more`]: {
-          position: "relative",
-          padding: o,
-          background: "transparent",
-          border: 0,
-          color: r.colorText,
-          "&::after": {
-            position: "absolute",
-            right: {
-              _skip_check_: !0,
-              value: 0
-            },
-            bottom: 0,
-            left: {
-              _skip_check_: !0,
-              value: 0
-            },
-            height: r.calc(r.controlHeightLG).div(8).equal(),
-            transform: "translateY(100%)",
-            content: "''"
-          }
-        },
-        [`${i}-nav-add`]: Object.assign({
-          minWidth: t,
-          marginLeft: {
-            _skip_check_: !0,
-            value: e
-          },
-          padding: a(r.paddingXS),
-          background: "transparent",
-          border: `${a(r.lineWidth)} ${r.lineType} ${c}`,
-          borderRadius: `${a(r.borderRadiusLG)} ${a(r.borderRadiusLG)} 0 0`,
-          outline: "none",
-          cursor: "pointer",
-          color: r.colorText,
-          transition: `all ${r.motionDurationSlow} ${r.motionEaseInOut}`,
-          "&:hover": {
-            color: l
-          },
-          "&:active, &:focus:not(:focus-visible)": {
-            color: d
-          }
-        }, s(r, -3))
-      },
-      [`${i}-extra-content`]: {
-        flex: "none"
-      },
-      // ============================ InkBar ============================
-      [`${i}-ink-bar`]: {
-        position: "absolute",
-        background: r.inkBarColor,
-        pointerEvents: "none"
-      }
-    }), x(r)), {
-      // =========================== TabPanes ===========================
-      [`${i}-content`]: {
-        position: "relative",
-        width: "100%"
-      },
-      [`${i}-content-holder`]: {
-        flex: "auto",
-        minWidth: 0,
-        minHeight: 0
-      },
-      [`${i}-tabpane`]: Object.assign(Object.assign({}, s(r)), {
-        "&-hidden": {
-          display: "none"
-        }
-      })
-    }),
-    [`${i}-centered`]: {
-      [`> ${i}-nav, > div > ${i}-nav`]: {
-        [`${i}-nav-wrap`]: {
-          [`&:not([class*='${i}-nav-wrap-ping']) > ${i}-nav-list`]: {
-            margin: "auto"
-          }
-        }
-      }
-    }
-  };
-}, y = (r) => {
-  const i = r.controlHeightLG;
-  return {
-    zIndexPopup: r.zIndexPopupBase + 50,
-    cardBg: r.colorFillAlter,
-    cardHeight: i,
-    // Initialize with empty string, because cardPadding will be calculated with cardHeight by default.
-    cardPadding: `${(i - Math.round(r.fontSize * r.lineHeight)) / 2 - r.lineWidth}px ${r.padding}px`,
-    cardPaddingSM: `${r.paddingXXS * 1.5}px ${r.padding}px`,
-    cardPaddingLG: `${r.paddingXS}px ${r.padding}px ${r.paddingXXS * 1.5}px`,
-    titleFontSize: r.fontSize,
-    titleFontSizeLG: r.fontSizeLG,
-    titleFontSizeSM: r.fontSize,
-    inkBarColor: r.colorPrimary,
-    horizontalMargin: `0 0 ${r.margin}px 0`,
-    horizontalItemGutter: 32,
-    // Fixed Value
-    // Initialize with empty string, because horizontalItemMargin will be calculated with horizontalItemGutter by default.
-    horizontalItemMargin: "",
-    horizontalItemMarginRTL: "",
-    horizontalItemPadding: `${r.paddingSM}px 0`,
-    horizontalItemPaddingSM: `${r.paddingXS}px 0`,
-    horizontalItemPaddingLG: `${r.padding}px 0`,
-    verticalItemPadding: `${r.paddingXS}px ${r.paddingLG}px`,
-    verticalItemMargin: `${r.margin}px 0 0 0`,
-    itemColor: r.colorText,
-    itemSelectedColor: r.colorPrimary,
-    itemHoverColor: r.colorPrimaryHover,
-    itemActiveColor: r.colorPrimaryActive,
-    cardGutter: r.marginXXS / 2
-  };
-}, V = m("Tabs", (r) => {
-  const i = b(r, {
-    // `cardPadding` is empty by default, so we could calculate with dynamic `cardHeight`
-    tabsCardPadding: r.cardPadding,
-    dropdownEdgeChildVerticalPadding: r.paddingXXS,
-    tabsActiveTextShadow: "0 0 0.25px currentcolor",
-    tabsDropdownHeight: 200,
-    tabsDropdownWidth: 120,
-    tabsHorizontalItemMargin: `0 0 0 ${a(r.horizontalItemGutter)}`,
-    tabsHorizontalItemMarginRTL: `0 0 0 ${a(r.horizontalItemGutter)}`
-  });
-  return [S(i), w(i), f(i), _(i), h(i), C(i), v(i)];
-}, y);
+import { genStyleHooks as v } from "../../theme/util/genStyleUtils.js";
+import u from "./motion.js";
+const h = (t) => {
+  const { componentCls: o, tabsCardPadding: e, cardBg: i, cardGutter: a, colorBorderSecondary: d, itemSelectedColor: l } = t;
+  return { [`${o}-card`]: { [`> ${o}-nav, > div > ${o}-nav`]: { [`${o}-tab`]: { margin: 0, padding: e, background: i, border: `${n(t.lineWidth)} ${t.lineType} ${d}`, transition: `all ${t.motionDurationSlow} ${t.motionEaseInOut}` }, [`${o}-tab-active`]: { color: l, background: t.colorBgContainer }, [`${o}-tab-focus`]: Object.assign({}, p(t, -3)), [`${o}-ink-bar`]: { visibility: "hidden" }, [`& ${o}-tab${o}-tab-focus ${o}-tab-btn`]: { outline: "none" } }, [`&${o}-top, &${o}-bottom`]: { [`> ${o}-nav, > div > ${o}-nav`]: { [`${o}-tab + ${o}-tab`]: { marginLeft: { _skip_check_: !0, value: n(a) } } } }, [`&${o}-top`]: { [`> ${o}-nav, > div > ${o}-nav`]: { [`${o}-tab`]: { borderRadius: `${n(t.borderRadiusLG)} ${n(t.borderRadiusLG)} 0 0` }, [`${o}-tab-active`]: { borderBottomColor: t.colorBgContainer } } }, [`&${o}-bottom`]: { [`> ${o}-nav, > div > ${o}-nav`]: { [`${o}-tab`]: { borderRadius: `0 0 ${n(t.borderRadiusLG)} ${n(t.borderRadiusLG)}` }, [`${o}-tab-active`]: { borderTopColor: t.colorBgContainer } } }, [`&${o}-left, &${o}-right`]: { [`> ${o}-nav, > div > ${o}-nav`]: { [`${o}-tab + ${o}-tab`]: { marginTop: n(a) } } }, [`&${o}-left`]: { [`> ${o}-nav, > div > ${o}-nav`]: { [`${o}-tab`]: { borderRadius: { _skip_check_: !0, value: `${n(t.borderRadiusLG)} 0 0 ${n(t.borderRadiusLG)}` } }, [`${o}-tab-active`]: { borderRightColor: { _skip_check_: !0, value: t.colorBgContainer } } } }, [`&${o}-right`]: { [`> ${o}-nav, > div > ${o}-nav`]: { [`${o}-tab`]: { borderRadius: { _skip_check_: !0, value: `0 ${n(t.borderRadiusLG)} ${n(t.borderRadiusLG)} 0` } }, [`${o}-tab-active`]: { borderLeftColor: { _skip_check_: !0, value: t.colorBgContainer } } } } } };
+}, _ = (t) => {
+  const { componentCls: o, itemHoverColor: e, dropdownEdgeChildVerticalPadding: i } = t;
+  return { [`${o}-dropdown`]: Object.assign(Object.assign({}, $(t)), { position: "absolute", top: -9999, left: { _skip_check_: !0, value: -9999 }, zIndex: t.zIndexPopup, display: "block", "&-hidden": { display: "none" }, [`${o}-dropdown-menu`]: { maxHeight: t.tabsDropdownHeight, margin: 0, padding: `${n(i)} 0`, overflowX: "hidden", overflowY: "auto", textAlign: { _skip_check_: !0, value: "left" }, listStyleType: "none", backgroundColor: t.colorBgContainer, backgroundClip: "padding-box", borderRadius: t.borderRadiusLG, outline: "none", boxShadow: t.boxShadowSecondary, "&-item": Object.assign(Object.assign({}, b), { display: "flex", alignItems: "center", minWidth: t.tabsDropdownWidth, margin: 0, padding: `${n(t.paddingXXS)} ${n(t.paddingSM)}`, color: t.colorText, fontWeight: "normal", fontSize: t.fontSize, lineHeight: t.lineHeight, cursor: "pointer", transition: `all ${t.motionDurationSlow}`, "> span": { flex: 1, whiteSpace: "nowrap" }, "&-remove": { flex: "none", marginLeft: { _skip_check_: !0, value: t.marginSM }, color: t.colorTextDescription, fontSize: t.fontSizeSM, background: "transparent", border: 0, cursor: "pointer", "&:hover": { color: e } }, "&:hover": { background: t.controlItemBgHover }, "&-disabled": { "&, &:hover": { color: t.colorTextDisabled, background: "transparent", cursor: "not-allowed" } } }) } }) };
+}, k = (t) => {
+  const { componentCls: o, margin: e, colorBorderSecondary: i, horizontalMargin: a, verticalItemPadding: d, verticalItemMargin: l, calc: c } = t;
+  return { [`${o}-top, ${o}-bottom`]: { flexDirection: "column", [`> ${o}-nav, > div > ${o}-nav`]: { margin: a, "&::before": { position: "absolute", right: { _skip_check_: !0, value: 0 }, left: { _skip_check_: !0, value: 0 }, borderBottom: `${n(t.lineWidth)} ${t.lineType} ${i}`, content: "''" }, [`${o}-ink-bar`]: { height: t.lineWidthBold, "&-animated": { transition: `width ${t.motionDurationSlow}, left ${t.motionDurationSlow},
+            right ${t.motionDurationSlow}` } }, [`${o}-nav-wrap`]: { "&::before, &::after": { top: 0, bottom: 0, width: t.controlHeight }, "&::before": { left: { _skip_check_: !0, value: 0 }, boxShadow: t.boxShadowTabsOverflowLeft }, "&::after": { right: { _skip_check_: !0, value: 0 }, boxShadow: t.boxShadowTabsOverflowRight }, [`&${o}-nav-wrap-ping-left::before`]: { opacity: 1 }, [`&${o}-nav-wrap-ping-right::after`]: { opacity: 1 } } } }, [`${o}-top`]: { [`> ${o}-nav,
+        > div > ${o}-nav`]: { "&::before": { bottom: 0 }, [`${o}-ink-bar`]: { bottom: 0 } } }, [`${o}-bottom`]: { [`> ${o}-nav, > div > ${o}-nav`]: { order: 1, marginTop: e, marginBottom: 0, "&::before": { top: 0 }, [`${o}-ink-bar`]: { top: 0 } }, [`> ${o}-content-holder, > div > ${o}-content-holder`]: { order: 0 } }, [`${o}-left, ${o}-right`]: { [`> ${o}-nav, > div > ${o}-nav`]: { flexDirection: "column", minWidth: c(t.controlHeight).mul(1.25).equal(), [`${o}-tab`]: { padding: d, textAlign: "center" }, [`${o}-tab + ${o}-tab`]: { margin: l }, [`${o}-nav-wrap`]: { flexDirection: "column", "&::before, &::after": { right: { _skip_check_: !0, value: 0 }, left: { _skip_check_: !0, value: 0 }, height: t.controlHeight }, "&::before": { top: 0, boxShadow: t.boxShadowTabsOverflowTop }, "&::after": { bottom: 0, boxShadow: t.boxShadowTabsOverflowBottom }, [`&${o}-nav-wrap-ping-top::before`]: { opacity: 1 }, [`&${o}-nav-wrap-ping-bottom::after`]: { opacity: 1 } }, [`${o}-ink-bar`]: { width: t.lineWidthBold, "&-animated": { transition: `height ${t.motionDurationSlow}, top ${t.motionDurationSlow}` } }, [`${o}-nav-list, ${o}-nav-operations`]: { flex: "1 0 auto", flexDirection: "column" } } }, [`${o}-left`]: { [`> ${o}-nav, > div > ${o}-nav`]: { [`${o}-ink-bar`]: { right: { _skip_check_: !0, value: 0 } } }, [`> ${o}-content-holder, > div > ${o}-content-holder`]: { marginLeft: { _skip_check_: !0, value: n(c(t.lineWidth).mul(-1).equal()) }, borderLeft: { _skip_check_: !0, value: `${n(t.lineWidth)} ${t.lineType} ${t.colorBorder}` }, [`> ${o}-content > ${o}-tabpane`]: { paddingLeft: { _skip_check_: !0, value: t.paddingLG } } } }, [`${o}-right`]: { [`> ${o}-nav, > div > ${o}-nav`]: { order: 1, [`${o}-ink-bar`]: { left: { _skip_check_: !0, value: 0 } } }, [`> ${o}-content-holder, > div > ${o}-content-holder`]: { order: 0, marginRight: { _skip_check_: !0, value: c(t.lineWidth).mul(-1).equal() }, borderRight: { _skip_check_: !0, value: `${n(t.lineWidth)} ${t.lineType} ${t.colorBorder}` }, [`> ${o}-content > ${o}-tabpane`]: { paddingRight: { _skip_check_: !0, value: t.paddingLG } } } } };
+}, f = (t) => {
+  const { componentCls: o, cardPaddingSM: e, cardPaddingLG: i, horizontalItemPaddingSM: a, horizontalItemPaddingLG: d } = t;
+  return { [o]: { "&-small": { [`> ${o}-nav`]: { [`${o}-tab`]: { padding: a, fontSize: t.titleFontSizeSM } } }, "&-large": { [`> ${o}-nav`]: { [`${o}-tab`]: { padding: d, fontSize: t.titleFontSizeLG } } } }, [`${o}-card`]: { [`&${o}-small`]: { [`> ${o}-nav`]: { [`${o}-tab`]: { padding: e } }, [`&${o}-bottom`]: { [`> ${o}-nav ${o}-tab`]: { borderRadius: `0 0 ${n(t.borderRadius)} ${n(t.borderRadius)}` } }, [`&${o}-top`]: { [`> ${o}-nav ${o}-tab`]: { borderRadius: `${n(t.borderRadius)} ${n(t.borderRadius)} 0 0` } }, [`&${o}-right`]: { [`> ${o}-nav ${o}-tab`]: { borderRadius: { _skip_check_: !0, value: `0 ${n(t.borderRadius)} ${n(t.borderRadius)} 0` } } }, [`&${o}-left`]: { [`> ${o}-nav ${o}-tab`]: { borderRadius: { _skip_check_: !0, value: `${n(t.borderRadius)} 0 0 ${n(t.borderRadius)}` } } } }, [`&${o}-large`]: { [`> ${o}-nav`]: { [`${o}-tab`]: { padding: i } } } } };
+}, S = (t) => {
+  const { componentCls: o, itemActiveColor: e, itemHoverColor: i, iconCls: a, tabsHorizontalItemMargin: d, horizontalItemPadding: l, itemSelectedColor: c, itemColor: g } = t, r = `${o}-tab`;
+  return { [r]: { position: "relative", WebkitTouchCallout: "none", WebkitTapHighlightColor: "transparent", display: "inline-flex", alignItems: "center", padding: l, fontSize: t.titleFontSize, background: "transparent", border: 0, outline: "none", cursor: "pointer", color: g, "&-btn, &-remove": { "&:focus:not(:focus-visible), &:active": { color: e } }, "&-btn": { outline: "none", transition: `all ${t.motionDurationSlow}`, [`${r}-icon:not(:last-child)`]: { marginInlineEnd: t.marginSM } }, "&-remove": Object.assign({ flex: "none", marginRight: { _skip_check_: !0, value: t.calc(t.marginXXS).mul(-1).equal() }, marginLeft: { _skip_check_: !0, value: t.marginXS }, color: t.colorTextDescription, fontSize: t.fontSizeSM, background: "transparent", border: "none", outline: "none", cursor: "pointer", transition: `all ${t.motionDurationSlow}`, "&:hover": { color: t.colorTextHeading } }, s(t)), "&:hover": { color: i }, [`&${r}-active ${r}-btn`]: { color: c, textShadow: t.tabsActiveTextShadow }, [`&${r}-focus ${r}-btn`]: Object.assign({}, p(t)), [`&${r}-disabled`]: { color: t.colorTextDisabled, cursor: "not-allowed" }, [`&${r}-disabled ${r}-btn, &${r}-disabled ${o}-remove`]: { "&:focus, &:active": { color: t.colorTextDisabled } }, [`& ${r}-remove ${a}`]: { margin: 0 }, [`${a}:not(:last-child)`]: { marginRight: { _skip_check_: !0, value: t.marginSM } } }, [`${r} + ${r}`]: { margin: { _skip_check_: !0, value: d } } };
+}, x = (t) => {
+  const { componentCls: o, tabsHorizontalItemMarginRTL: e, iconCls: i, cardGutter: a, calc: d } = t;
+  return { [`${o}-rtl`]: { direction: "rtl", [`${o}-nav`]: { [`${o}-tab`]: { margin: { _skip_check_: !0, value: e }, [`${o}-tab:last-of-type`]: { marginLeft: { _skip_check_: !0, value: 0 } }, [i]: { marginRight: { _skip_check_: !0, value: 0 }, marginLeft: { _skip_check_: !0, value: n(t.marginSM) } }, [`${o}-tab-remove`]: { marginRight: { _skip_check_: !0, value: n(t.marginXS) }, marginLeft: { _skip_check_: !0, value: n(d(t.marginXXS).mul(-1).equal()) }, [i]: { margin: 0 } } } }, [`&${o}-left`]: { [`> ${o}-nav`]: { order: 1 }, [`> ${o}-content-holder`]: { order: 0 } }, [`&${o}-right`]: { [`> ${o}-nav`]: { order: 0 }, [`> ${o}-content-holder`]: { order: 1 } }, [`&${o}-card${o}-top, &${o}-card${o}-bottom`]: { [`> ${o}-nav, > div > ${o}-nav`]: { [`${o}-tab + ${o}-tab`]: { marginRight: { _skip_check_: !0, value: a }, marginLeft: { _skip_check_: !0, value: 0 } } } } }, [`${o}-dropdown-rtl`]: { direction: "rtl" }, [`${o}-menu-item`]: { [`${o}-dropdown-rtl`]: { textAlign: { _skip_check_: !0, value: "right" } } } };
+}, w = (t) => {
+  const { componentCls: o, tabsCardPadding: e, cardHeight: i, cardGutter: a, itemHoverColor: d, itemActiveColor: l, colorBorderSecondary: c } = t;
+  return { [o]: Object.assign(Object.assign(Object.assign(Object.assign({}, $(t)), { display: "flex", [`> ${o}-nav, > div > ${o}-nav`]: { position: "relative", display: "flex", flex: "none", alignItems: "center", [`${o}-nav-wrap`]: { position: "relative", display: "flex", flex: "auto", alignSelf: "stretch", overflow: "hidden", whiteSpace: "nowrap", transform: "translate(0)", "&::before, &::after": { position: "absolute", zIndex: 1, opacity: 0, transition: `opacity ${t.motionDurationSlow}`, content: "''", pointerEvents: "none" } }, [`${o}-nav-list`]: { position: "relative", display: "flex", transition: `opacity ${t.motionDurationSlow}` }, [`${o}-nav-operations`]: { display: "flex", alignSelf: "stretch" }, [`${o}-nav-operations-hidden`]: { position: "absolute", visibility: "hidden", pointerEvents: "none" }, [`${o}-nav-more`]: { position: "relative", padding: e, background: "transparent", border: 0, color: t.colorText, "&::after": { position: "absolute", right: { _skip_check_: !0, value: 0 }, bottom: 0, left: { _skip_check_: !0, value: 0 }, height: t.calc(t.controlHeightLG).div(8).equal(), transform: "translateY(100%)", content: "''" } }, [`${o}-nav-add`]: Object.assign({ minWidth: i, marginLeft: { _skip_check_: !0, value: a }, padding: n(t.paddingXS), background: "transparent", border: `${n(t.lineWidth)} ${t.lineType} ${c}`, borderRadius: `${n(t.borderRadiusLG)} ${n(t.borderRadiusLG)} 0 0`, outline: "none", cursor: "pointer", color: t.colorText, transition: `all ${t.motionDurationSlow} ${t.motionEaseInOut}`, "&:hover": { color: d }, "&:active, &:focus:not(:focus-visible)": { color: l } }, s(t, -3)) }, [`${o}-extra-content`]: { flex: "none" }, [`${o}-ink-bar`]: { position: "absolute", background: t.inkBarColor, pointerEvents: "none" } }), S(t)), { [`${o}-content`]: { position: "relative", width: "100%" }, [`${o}-content-holder`]: { flex: "auto", minWidth: 0, minHeight: 0 }, [`${o}-tabpane`]: Object.assign(Object.assign({}, s(t)), { "&-hidden": { display: "none" } }) }), [`${o}-centered`]: { [`> ${o}-nav, > div > ${o}-nav`]: { [`${o}-nav-wrap`]: { [`&:not([class*='${o}-nav-wrap-ping']) > ${o}-nav-list`]: { margin: "auto" } } } } };
+}, C = (t) => {
+  const o = t.controlHeightLG;
+  return { zIndexPopup: t.zIndexPopupBase + 50, cardBg: t.colorFillAlter, cardHeight: o, cardPadding: `${(o - Math.round(t.fontSize * t.lineHeight)) / 2 - t.lineWidth}px ${t.padding}px`, cardPaddingSM: `${1.5 * t.paddingXXS}px ${t.padding}px`, cardPaddingLG: `${t.paddingXS}px ${t.padding}px ${1.5 * t.paddingXXS}px`, titleFontSize: t.fontSize, titleFontSizeLG: t.fontSizeLG, titleFontSizeSM: t.fontSize, inkBarColor: t.colorPrimary, horizontalMargin: `0 0 ${t.margin}px 0`, horizontalItemGutter: 32, horizontalItemMargin: "", horizontalItemMarginRTL: "", horizontalItemPadding: `${t.paddingSM}px 0`, horizontalItemPaddingSM: `${t.paddingXS}px 0`, horizontalItemPaddingLG: `${t.padding}px 0`, verticalItemPadding: `${t.paddingXS}px ${t.paddingLG}px`, verticalItemMargin: `${t.margin}px 0 0 0`, itemColor: t.colorText, itemSelectedColor: t.colorPrimary, itemHoverColor: t.colorPrimaryHover, itemActiveColor: t.colorPrimaryActive, cardGutter: t.marginXXS / 2 };
+}, q = v("Tabs", (t) => {
+  const o = m(t, { tabsCardPadding: t.cardPadding, dropdownEdgeChildVerticalPadding: t.paddingXXS, tabsActiveTextShadow: "0 0 0.25px currentcolor", tabsDropdownHeight: 200, tabsDropdownWidth: 120, tabsHorizontalItemMargin: `0 0 0 ${n(t.horizontalItemGutter)}`, tabsHorizontalItemMarginRTL: `0 0 0 ${n(t.horizontalItemGutter)}` });
+  return [f(o), x(o), k(o), _(o), h(o), w(o), u(o)];
+}, C);
 export {
-  V as default,
-  y as prepareComponentToken
+  q as default,
+  C as prepareComponentToken
 };