refactor: Optimize theme export and add docs (#38902)

* refactor: Optimize theme export and add docs

* chore: fix lint

* chore: fix lint

* chore: fix lint

.dumi/pages/index/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, type FC } from 'react';
+import React, { type FC, useLayoutEffect } from 'react';
 import { useLocale as useDumiLocale } from 'dumi';
 import { css } from '@emotion/react';
 import useLocale from '../../hooks/useLocale';

components/_util/wave/style.ts

@@ -1,8 +1,8 @@
 import { Keyframes, useStyleRegister } from '@ant-design/cssinjs';
 import { useContext } from 'react';
 import { ConfigContext } from '../../config-provider';
-import type { AliasToken, GenerateStyle, UseComponentStyleResult } from '../../theme';
-import { useToken } from '../../theme';
+import type { AliasToken, GenerateStyle, UseComponentStyleResult } from '../../theme/internal';
+import { useToken } from '../../theme/internal';
 
 interface WaveToken extends AliasToken {
   hashId: string;

components/affix/style/index.tsx

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 interface AffixToken extends FullToken<'Affix'> {
   zIndexPopup: number;

components/alert/style/index.tsx

@@ -1,6 +1,6 @@
 import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent } from '../../style';
 
 export interface ComponentToken {}

components/anchor/style/index.tsx

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent, textEllipsis } from '../../style';
 
 export interface ComponentToken {}

components/avatar/style/index.tsx

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent } from '../../style';
 
 export interface ComponentToken {}

components/back-top/style/index.tsx

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent } from '../../style';
 
 /** Component only token. Which will handle additional calculation of alias token */

components/badge/style/index.tsx

@@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle, PresetColorType } from '../../theme';
-import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme';
+import type { FullToken, GenerateStyle, PresetColorType } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme/internal';
 import { resetComponent } from '../../style';
 
 interface BadgeToken extends FullToken<'Badge'> {

components/breadcrumb/style/index.tsx

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { genFocusStyle, resetComponent } from '../../style';
 
 interface BreadcrumbToken extends FullToken<'Breadcrumb'> {

components/button/button-group.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
 import type { SizeType } from '../config-provider/SizeContext';
-import { useToken } from '../theme';
+import { useToken } from '../theme/internal';
 import warning from '../_util/warning';
 
 export interface ButtonGroupProps {

components/button/style/group.tsx

@@ -1,5 +1,5 @@
 import type { ButtonToken } from '.';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 
 const genButtonBorderStyle = (buttonTypeCls: string, borderColor: string) => ({
   // Border

components/button/style/index.tsx

@@ -1,6 +1,6 @@
 import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import genGroupStyle from './group';
 import { genFocusStyle } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';

components/calendar/style/index.tsx

@@ -4,8 +4,8 @@ import type { PickerPanelToken } from '../../date-picker/style';
 import { genPanelStyle, initPickerPanelToken } from '../../date-picker/style';
 import type { InputToken } from '../../input/style';
 import { initInputToken } from '../../input/style';
-import type { FullToken } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
   yearControlWidth: number;

components/card/style/index.tsx

@@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { clearFix, resetComponent, textEllipsis } from '../../style';
 
 export interface ComponentToken {}

components/carousel/style/index.tsx

@@ -1,5 +1,5 @@
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent } from '../../style';
 
 export interface ComponentToken {

components/cascader/style/index.tsx

@@ -1,6 +1,6 @@
 import { getStyle as getCheckboxStyle } from '../../checkbox/style';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook } from '../../theme/internal';
 import { textEllipsis } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';
 

components/checkbox/style/index.tsx

@@ -1,6 +1,6 @@
 import { Keyframes } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { genFocusOutline, resetComponent } from '../../style';
 
 export interface ComponentToken {}

components/collapse/style/index.tsx

@@ -1,6 +1,6 @@
 import { genCollapseMotion } from '../../style/motion';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent, resetIcon } from '../../style';
 
 export interface ComponentToken {}

components/config-provider/__tests__/theme.test.tsx

@@ -4,8 +4,8 @@ import React from 'react';
 import ConfigProvider from '..';
 import { InputNumber } from '../..';
 import { render } from '../../../tests/utils';
-import { useToken } from '../../theme';
-import theme from '../../theme/export';
+import { useToken } from '../../theme/internal';
+import theme from '../../theme';
 import { resetWarned } from '../../_util/warning';
 
 const { defaultAlgorithm, darkAlgorithm, compactAlgorithm } = theme;

components/config-provider/hooks/useTheme.ts

@@ -2,7 +2,7 @@ import useMemo from 'rc-util/lib/hooks/useMemo';
 import shallowEqual from 'shallowequal';
 import type { OverrideToken } from '../../theme/interface';
 import type { ThemeConfig } from '../context';
-import { defaultConfig } from '../../theme';
+import { defaultConfig } from '../../theme/internal';
 
 export default function useTheme(
   theme?: ThemeConfig,

components/config-provider/index.tsx

@@ -10,7 +10,7 @@ import type { Locale } from '../locale-provider';
 import LocaleProvider, { ANT_MARK } from '../locale-provider';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale/en_US';
-import { DesignTokenContext } from '../theme';
+import { DesignTokenContext } from '../theme/internal';
 import defaultSeedToken from '../theme/themes/seed';
 import type { ConfigConsumerProps, CSPConfig, DirectionType, Theme, ThemeConfig } from './context';
 import { ConfigConsumer, ConfigContext, defaultIconPrefixCls } from './context';

components/config-provider/style/index.tsx

@@ -1,6 +1,6 @@
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { resetIcon } from '../../style';
-import { useToken } from '../../theme';
+import { useToken } from '../../theme/internal';
 
 const useStyle = (iconPrefixCls: string) => {
   const [theme, token] = useToken();

components/date-picker/style/index.tsx

@@ -15,8 +15,8 @@ import {
   slideUpIn,
   slideUpOut,
 } from '../../style/motion';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import type { GlobalToken } from '../../theme/interface';
 import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
 import { resetComponent, roundedArrow, textEllipsis } from '../../style';

components/descriptions/style/index.tsx

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent, textEllipsis } from '../../style';
 
 interface DescriptionsToken extends FullToken<'Descriptions'> {

components/divider/style/index.tsx

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent } from '../../style';
 
 /** Component only token. Which will handle additional calculation of alias token */

components/drawer/style/index.tsx

@@ -1,5 +1,5 @@
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import genMotionStyle from './motion';
 
 export interface ComponentToken {

components/drawer/style/motion.tsx

@@ -1,5 +1,5 @@
 import type { DrawerToken } from '.';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 
 const genMotionStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
   const { componentCls, motionDurationSlow } = token;

components/dropdown/style/button.tsx

@@ -1,5 +1,5 @@
 import type { DropdownToken } from '.';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 
 const genButtonStyle: GenerateStyle<DropdownToken> = (token) => {
   const { componentCls, antCls, paddingXS, opacityLoading } = token;

components/dropdown/style/index.tsx

@@ -7,8 +7,8 @@ import {
   slideUpIn,
   slideUpOut,
 } from '../../style/motion';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import genButtonStyle from './button';
 import genStatusStyle from './status';
 import { genFocusStyle, resetComponent, roundedArrow } from '../../style';

components/dropdown/style/status.tsx

@@ -1,5 +1,5 @@
 import type { DropdownToken } from '.';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 
 const genStatusStyle: GenerateStyle<DropdownToken> = (token) => {
   const { componentCls, menuCls, colorError, colorTextLightSolid } = token;

components/empty/simple.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useMemo } from 'react';
 import { TinyColor } from '@ctrl/tinycolor';
-import { useToken } from '../theme';
+import { useToken } from '../theme/internal';
 
 const Simple = () => {
   const [, token] = useToken();

components/empty/style/index.tsx

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {}

components/float-button/style/index.tsx

@@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { initFadeMotion } from '../../style/motion/fade';
 import { resetComponent } from '../../style';
 

components/form/style/index.tsx

@@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { genCollapseMotion, zoomIn } from '../../style/motion';
-import type { AliasToken, FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { AliasToken, FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent } from '../../style';
 
 interface FormToken extends FullToken<'Form'> {

components/grid/style/index.tsx

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 interface GridRowToken extends FullToken<'Grid'> {}
 

components/image/style/index.tsx

@@ -2,8 +2,8 @@ import type { CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
 import { genModalMaskStyle } from '../../modal/style';
 import { initZoomMotion, initFadeMotion } from '../../style/motion';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent, textEllipsis } from '../../style';
 
 export interface ComponentToken {

components/index.tsx

@@ -126,7 +126,7 @@ export { default as Tabs } from './tabs';
 export type { TabPaneProps, TabsProps } from './tabs';
 export { default as Tag } from './tag';
 export type { TagProps, TagType } from './tag';
-export { default as theme } from './theme/export';
+export { default as theme } from './theme';
 export { default as TimePicker } from './time-picker';
 export type { TimePickerProps, TimeRangePickerProps } from './time-picker';
 export { default as Timeline } from './timeline';

components/input-number/style/index.tsx

@@ -9,8 +9,8 @@ import {
   genStatusStyle,
   initInputToken,
 } from '../../input/style';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook } from '../../theme/internal';
 import { resetComponent, resetIcon } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';
 

components/input/style/index.tsx

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import type { GlobalToken } from '../../theme/interface';
 import { clearFix, resetComponent } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';

components/layout/style/index.tsx

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import genLayoutLightStyle from './light';
 
 export interface ComponentToken {

components/layout/style/light.ts

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { LayoutToken } from '.';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 
 const genLayoutLightStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
   const { componentCls, colorBgContainer, colorBgBody, colorText } = token;

components/list/style/index.tsx

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent } from '../../style';
 
 export interface ComponentToken {

components/mentions/style/index.tsx

@@ -7,8 +7,8 @@ import {
   genStatusStyle,
   initInputToken,
 } from '../../input/style';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook } from '../../theme/internal';
 import { resetComponent, textEllipsis } from '../../style';
 
 export interface ComponentToken {

components/menu/style/horizontal.tsx

@@ -1,5 +1,5 @@
 import type { MenuToken } from '.';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 
 const getHorizontalStyle: GenerateStyle<MenuToken> = (token) => {
   const {

components/menu/style/index.tsx

@@ -1,7 +1,7 @@
 import { TinyColor } from '@ctrl/tinycolor';
 import { genCollapseMotion, initSlideMotion, initZoomMotion } from '../../style/motion';
-import type { FullToken, GenerateStyle, UseComponentStyleResult } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle, UseComponentStyleResult } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import getHorizontalStyle from './horizontal';
 import getRTLStyle from './rtl';
 import getThemeStyle from './theme';

components/menu/style/rtl.tsx

@@ -1,5 +1,5 @@
 import type { MenuToken } from '.';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 
 const getRTLStyle: GenerateStyle<MenuToken> = ({ componentCls, menuArrowOffset }) => ({
   [`${componentCls}-rtl`]: {

components/menu/style/vertical.tsx

@@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { textEllipsis } from '../../style';
 import type { MenuToken } from '.';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 
 const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = (token) => {
   const {

components/message/style/index.tsx

@@ -1,7 +1,7 @@
 // deps-lint-skip-all
 import { Keyframes } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent } from '../../style';
 
 /** Component only token. Which will handle additional calculation of alias token */

components/modal/style/index.tsx

@@ -1,7 +1,7 @@
 import type React from 'react';
 import { initFadeMotion, initZoomMotion } from '../../style/motion';
-import type { AliasToken, FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { AliasToken, FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
 import { clearFix, genFocusStyle, resetComponent } from '../../style';
 

components/notification/style/index.tsx

@@ -1,6 +1,6 @@
 import { Keyframes } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import genNotificationPlacementStyle from './placement';
 import { resetComponent } from '../../style';
 

components/notification/style/placement.ts

@@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
 import type { NotificationToken } from '.';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 
 const genNotificationPlacementStyle: GenerateStyle<NotificationToken, CSSObject> = (token) => {
   const { componentCls, width, notificationMarginEdge } = token;

components/pagination/style/index.tsx

@@ -5,8 +5,8 @@ import {
   initInputToken,
   type InputToken,
 } from '../../input/style';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { genFocusOutline, genFocusStyle, resetComponent } from '../../style';
 
 interface PaginationToken extends InputToken<FullToken<'Pagination'>> {

components/popconfirm/style/index.tsx

@@ -1,5 +1,5 @@
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook } from '../../theme/internal';
 
 export interface ComponentToken {
   zIndexPopup: number;

components/popover/style/index.tsx

@@ -1,6 +1,6 @@
 import { initZoomMotion } from '../../style/motion';
-import type { FullToken, GenerateStyle, PresetColorType } from '../../theme';
-import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme';
+import type { FullToken, GenerateStyle, PresetColorType } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme/internal';
 import { resetComponent } from '../../style';
 import getArrowStyle from '../../style/placementArrow';
 

components/progress/style/index.tsx

@@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent } from '../../style';
 
 export interface ComponentToken {}

components/radio/style/index.tsx

@@ -1,6 +1,6 @@
 import { Keyframes } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { genFocusOutline, resetComponent } from '../../style';
 
 // ============================== Tokens ==============================

components/rate/style/index.tsx

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent } from '../../style';
 
 export type ComponentToken = {};

components/result/style/index.tsx

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
   imageWidth: number;

components/segmented/style/index.tsx

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent, textEllipsis } from '../../style';
 
 export interface ComponentToken {}

components/select/style/dropdown.tsx

@@ -8,7 +8,7 @@ import {
   slideUpIn,
   slideUpOut,
 } from '../../style/motion';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 import { resetComponent, textEllipsis } from '../../style';
 
 const genItemStyle: GenerateStyle<SelectToken, CSSObject> = (token) => {

components/select/style/index.tsx

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import genDropdownStyle from './dropdown';
 import genMultipleStyle from './multiple';
 import genSingleStyle from './single';

components/select/style/multiple.tsx

@@ -1,6 +1,6 @@
 import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import type { SelectToken } from '.';
-import { mergeToken } from '../../theme';
+import { mergeToken } from '../../theme/internal';
 import { resetIcon } from '../../style';
 
 const FIXED_ITEM_MARGIN = 2;

components/select/style/single.tsx

@@ -1,7 +1,7 @@
 import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import { resetComponent } from '../../style';
 import type { SelectToken } from '.';
-import { mergeToken } from '../../theme';
+import { mergeToken } from '../../theme/internal';
 
 function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
   const { componentCls, inputPaddingHorizontalBase, borderRadius } = token;

components/skeleton/style/index.tsx

@@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export type ComponentToken = {
   color: string;

components/slider/style/index.tsx

@@ -1,8 +1,8 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type * as React from 'react';
 import { TinyColor } from '@ctrl/tinycolor';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent } from '../../style';
 
 // Direction naming standard:

components/space/style/compact.tsx

@@ -1,4 +1,4 @@
-import type { FullToken, GenerateStyle } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
   // Component token here

components/space/style/index.tsx

@@ -1,5 +1,5 @@
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook } from '../../theme/internal';
 import genSpaceCompactStyle from './compact';
 
 /** Component only token. Which will handle additional calculation of alias token */

components/spin/style/index.tsx

@@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent } from '../../style';
 
 export interface ComponentToken {

components/statistic/style/index.tsx

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { resetComponent } from '../../style';
 
 interface StatisticToken extends FullToken<'Statistic'> {

components/steps/style/custom-icon.ts

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { StepsToken } from '.';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 
 const genStepsCustomIconStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
   const { componentCls, stepsIconCustomTop, stepsIconCustomSize, stepsIconCustomFontSize } = token;

components/steps/style/index.tsx

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import genStepsCustomIconStyle from './custom-icon';
 import genStepsLabelPlacementStyle from './label-placement';
 import genStepsNavStyle from './nav';

components/steps/style/inline.ts

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { StepsToken } from '.';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 
 const genStepsInlineStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
   const { componentCls, inlineDotSize, inlineTitleColor, inlineTailColor } = token;

components/steps/style/label-placement.ts

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { StepsToken } from '.';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 
 const genStepsLabelPlacementStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
   const { componentCls, stepsIconSize, lineHeight, stepsSmallIconSize } = token;

components/steps/style/nav.ts

@@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { textEllipsis } from '../../style';
 import type { StepsToken } from '.';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 
 const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
   const {

components/steps/style/progress-dot.ts

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { StepsToken } from '.';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 
 const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
   const {

components/steps/style/progress.ts

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { StepsToken } from '.';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 
 const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
   const { antCls, componentCls } = token;

components/steps/style/rtl.ts

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { StepsToken } from '.';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 
 const genStepsRTLStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
   const { componentCls } = token;

components/steps/style/small.ts

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { StepsToken } from '.';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 
 const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
   const {

components/steps/style/vertical.ts

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { StepsToken } from '.';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 
 const genStepsVerticalStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
   const { componentCls, stepsSmallIconSize, stepsIconSize } = token;

components/style/compact-item-vertical.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable import/prefer-default-export */
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { DerivativeToken } from '../theme';
+import type { DerivativeToken } from '../theme/internal';
 
 function compactItemVerticalBorder(token: DerivativeToken): CSSObject {
   return {

components/style/compact-item.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable import/prefer-default-export */
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { DerivativeToken } from '../theme';
+import type { DerivativeToken } from '../theme/internal';
 
 // handle border collapse
 function compactItemBorder(

components/style/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable import/prefer-default-export */
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { DerivativeToken } from '../theme';
+import type { DerivativeToken } from '../theme/internal';
 
 export { operationUnit } from './operationUnit';
 export { roundedArrow } from './roundedArrow';

components/style/motion/collapse.tsx

@@ -1,4 +1,4 @@
-import type { AliasToken, GenerateStyle } from '../../theme';
+import type { AliasToken, GenerateStyle } from '../../theme/internal';
 import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
 
 const genCollapseMotion: GenerateStyle<TokenWithCommonCls<AliasToken>> = (token) => ({

components/style/motion/fade.tsx

@@ -1,6 +1,6 @@
 import type { CSSInterpolation } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
-import type { AliasToken } from '../../theme';
+import type { AliasToken } from '../../theme/internal';
 import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
 import { initMotion } from './motion';
 

components/style/motion/move.tsx

@@ -1,6 +1,6 @@
 import type { CSSInterpolation } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
-import type { AliasToken } from '../../theme';
+import type { AliasToken } from '../../theme/internal';
 import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
 import { initMotion } from './motion';
 

components/style/motion/slide.tsx

@@ -1,6 +1,6 @@
 import type { CSSInterpolation } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
-import type { AliasToken } from '../../theme';
+import type { AliasToken } from '../../theme/internal';
 import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
 import { initMotion } from './motion';
 

components/style/motion/zoom.tsx

@@ -1,6 +1,6 @@
 import type { CSSInterpolation } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
-import type { AliasToken } from '../../theme';
+import type { AliasToken } from '../../theme/internal';
 import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
 import { initMotion } from './motion';
 

components/style/operationUnit.tsx

@@ -1,5 +1,5 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { DerivativeToken } from '../theme';
+import type { DerivativeToken } from '../theme/internal';
 
 // eslint-disable-next-line import/prefer-default-export
 export const operationUnit = (token: DerivativeToken): CSSObject => ({

components/style/placementArrow.tsx

@@ -1,5 +1,5 @@
 import type { CSSInterpolation } from '@ant-design/cssinjs';
-import type { AliasToken } from '../theme';
+import type { AliasToken } from '../theme/internal';
 import type { TokenWithCommonCls } from '../theme/util/genComponentStyleHook';
 import { roundedArrow } from './roundedArrow';
 

components/switch/style/index.tsx

@@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import { genFocusStyle, resetComponent } from '../../style';
 
 interface SwitchToken extends FullToken<'Switch'> {

components/table/style/bordered.tsx

@@ -1,5 +1,5 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 import type { TableToken } from './index';
 
 const genBorderedStyle: GenerateStyle<TableToken, CSSObject> = (token) => {

components/table/style/ellipsis.tsx

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { textEllipsis } from '../../style';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 import type { TableToken } from './index';
 
 const genEllipsisStyle: GenerateStyle<TableToken, CSSObject> = (token) => {

components/table/style/empty.tsx

@@ -1,5 +1,5 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 import type { TableToken } from './index';
 
 // ========================= Placeholder ==========================

components/table/style/expand.tsx

@@ -1,5 +1,5 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 import type { TableToken } from './index';
 import { operationUnit } from '../../style';
 

components/table/style/filter.tsx

@@ -1,4 +1,4 @@
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 import type { TableToken } from './index';
 import { resetComponent } from '../../style';
 

components/table/style/fixed.tsx

@@ -1,5 +1,5 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 import type { TableToken } from './index';
 
 const genFixedStyle: GenerateStyle<TableToken, CSSObject> = (token) => {

components/table/style/index.tsx

@@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
-import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken } from '../../theme';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import genBorderedStyle from './bordered';
 import genEllipsisStyle from './ellipsis';
 import genEmptyStyle from './empty';

components/table/style/pagination.tsx

@@ -1,5 +1,5 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 import type { TableToken } from './index';
 
 const genPaginationStyle: GenerateStyle<TableToken, CSSObject> = (token) => {

components/table/style/radius.tsx

@@ -1,5 +1,5 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 import type { TableToken } from './index';
 
 const genRadiusStyle: GenerateStyle<TableToken, CSSObject> = (token) => {

components/table/style/rtl.tsx

@@ -1,5 +1,5 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { GenerateStyle } from '../../theme';
+import type { GenerateStyle } from '../../theme/internal';
 import type { TableToken } from './index';
 
 const genStyle: GenerateStyle<TableToken, CSSObject> = (token) => {