@refinedev/antd 5.37.2 → 5.37.3-alpha.0

package/dist/interfaces/field.d.ts

@@ -1,4 +1,4 @@
-export declare type FieldProps<T> = {
+export type FieldProps<T> = {
     value: T;
 };
 //# sourceMappingURL=field.d.ts.map

package/dist/interfaces/field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../src/interfaces/field.ts"],"names":[],"mappings":"AAAA,oBAAY,UAAU,CAAC,CAAC,IAAI;IACxB,KAAK,EAAE,CAAC,CAAC;CACZ,CAAC"}
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../src/interfaces/field.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI;IACxB,KAAK,EAAE,CAAC,CAAC;CACZ,CAAC"}

package/dist/interfaces/index.d.ts

@@ -1,5 +1,5 @@
 import { IResourceItem } from "@refinedev/core";
-export declare type BaseRecord = {
+export type BaseRecord = {
     id?: string;
     [key: string]: any;
 };
@@ -7,10 +7,10 @@ export interface Option {
     label: string;
     value: string;
 }
-export declare type ITreeMenu = IMenuItem & {
+export type ITreeMenu = IMenuItem & {
     children: ITreeMenu[];
 };
-export declare type IMenuItem = IResourceItem & {
+export type IMenuItem = IResourceItem & {
     key: string;
     route: string;
 };

package/dist/interfaces/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/interfaces/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,oBAAY,UAAU,GAAG;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB,CAAC;AACF,MAAM,WAAW,MAAM;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,oBAAY,SAAS,GAAG,SAAS,GAAG;IAChC,QAAQ,EAAE,SAAS,EAAE,CAAC;CACzB,CAAC;AAEF,oBAAY,SAAS,GAAG,aAAa,GAAG;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/interfaces/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,MAAM,UAAU,GAAG;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB,CAAC;AACF,MAAM,WAAW,MAAM;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG;IAChC,QAAQ,EAAE,SAAS,EAAE,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinedev/antd",
-  "version": "5.37.2",
+  "version": "5.37.3-alpha.0",
   "description": "refine is a React-based framework for building internal tools, rapidly. It ships with Ant Design System, an enterprise-level UI toolkit.",
   "private": false,
   "sideEffects": [
@@ -28,7 +28,7 @@
   "devDependencies": {
     "@refinedev/cli": "^2.16.22",
     "@refinedev/ui-tests": "^1.14.1",
-    "@refinedev/core": "^4.46.2",
+    "@refinedev/core": "^4.46.3-alpha.0",
     "@esbuild-plugins/node-resolve": "^0.1.4",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",

package/src/components/autoSaveIndicator/index.tsx

@@ -68,8 +68,7 @@ const Message = ({
     icon: React.ReactNode;
 }) => {
     const translate = useTranslate();
-    const { useToken } = theme;
-    const { token } = useToken();
+    const { token } = theme.useToken();
 
     return (
         <Typography.Text

package/src/components/fields/date/index.tsx

@@ -21,13 +21,11 @@ export const DateField: React.FC<DateFieldProps> = ({
 
     const defaultLocale = dayjs.locale();
 
-    const { Text } = Typography;
-
     return (
-        <Text {...rest}>
+        <Typography.Text {...rest}>
             {dayjs(value)
                 .locale(locales || defaultLocale)
                 .format(dateFormat)}
-        </Text>
+        </Typography.Text>
     );
 };

package/src/components/fields/email/index.tsx

@@ -1,8 +1,6 @@
 import React from "react";
 import { Typography } from "antd";
 
-const { Link } = Typography;
-
 import { EmailFieldProps } from "../types";
 
 /**
@@ -13,8 +11,8 @@ import { EmailFieldProps } from "../types";
  */
 export const EmailField: React.FC<EmailFieldProps> = ({ value, ...rest }) => {
     return (
-        <Link href={`mailto:${value}`} {...rest}>
+        <Typography.Link href={`mailto:${value}`} {...rest}>
             {value}
-        </Link>
+        </Typography.Link>
     );
 };

package/src/components/fields/number/index.tsx

@@ -1,8 +1,6 @@
 import React from "react";
 import { Typography } from "antd";
 
-const { Text } = Typography;
-
 function toLocaleStringSupportsOptions() {
     return !!(
         typeof Intl == "object" &&
@@ -27,10 +25,10 @@ export const NumberField: React.FC<NumberFieldProps> = ({
     const number = Number(value);
 
     return (
-        <Text {...rest}>
+        <Typography.Text {...rest}>
             {toLocaleStringSupportsOptions()
                 ? number.toLocaleString(locale, options)
                 : number}
-        </Text>
+        </Typography.Text>
     );
 };

package/src/components/fields/text/index.tsx

@@ -1,8 +1,6 @@
 import React from "react";
 import { Typography } from "antd";
 
-const { Text } = Typography;
-
 import { TextFieldProps } from "../types";
 
 /**
@@ -11,5 +9,5 @@ import { TextFieldProps } from "../types";
  * @see {@link https://refine.dev/docs/api-reference/antd/components/fields/text} for more details.
  */
 export const TextField: React.FC<TextFieldProps> = ({ value, ...rest }) => {
-    return <Text {...rest}>{value}</Text>;
+    return <Typography.Text {...rest}>{value}</Typography.Text>;
 };

package/src/components/fields/url/index.tsx

@@ -1,8 +1,6 @@
 import React from "react";
 import { Typography } from "antd";
 
-const { Link } = Typography;
-
 import { UrlFieldProps } from "../types";
 
 /**
@@ -17,8 +15,8 @@ export const UrlField: React.FC<UrlFieldProps> = ({
     ...rest
 }) => {
     return (
-        <Link href={value} {...rest}>
+        <Typography.Link href={value} {...rest}>
             {children ?? value}
-        </Link>
+        </Typography.Link>
     );
 };

package/src/components/layout/header/index.tsx

@@ -2,7 +2,6 @@ import { useActiveAuthProvider, useGetIdentity } from "@refinedev/core";
 import { Avatar, Layout as AntdLayout, Space, Typography } from "antd";
 import React from "react";
 import { RefineLayoutHeaderProps } from "../types";
-const { Text } = Typography;
 
 export const Header: React.FC<RefineLayoutHeaderProps> = () => {
     const authProvider = useActiveAuthProvider();
@@ -24,9 +23,9 @@ export const Header: React.FC<RefineLayoutHeaderProps> = () => {
         >
             <Space style={{ marginLeft: "8px" }}>
                 {user?.name && (
-                    <Text style={{ color: "white" }} strong>
+                    <Typography.Text style={{ color: "white" }} strong>
                         {user.name}
-                    </Text>
+                    </Typography.Text>
                 )}
                 {user?.avatar && <Avatar src={user?.avatar} alt={user?.name} />}
             </Space>

package/src/components/layout/sider/index.tsx

@@ -28,8 +28,6 @@ import { Title as DefaultTitle } from "@components";
 import { drawerButtonStyles } from "./styles";
 import { RefineLayoutSiderProps } from "../types";
 
-const { SubMenu } = Menu;
-
 export const Sider: React.FC<RefineLayoutSiderProps> = ({
     Title: TitleFromProps,
     render,
@@ -82,13 +80,13 @@ export const Sider: React.FC<RefineLayoutSiderProps> = ({
                             resource: item,
                         }}
                     >
-                        <SubMenu
+                        <Menu.SubMenu
                             key={item.key}
                             icon={icon ?? <UnorderedListOutlined />}
                             title={label}
                         >
                             {renderTreeView(children, selectedKey)}
-                        </SubMenu>
+                        </Menu.SubMenu>
                     </CanAccess>
                 );
             }

package/src/components/pageHeader/index.tsx

@@ -2,7 +2,7 @@ import React, { FC } from "react";
 import {
     PageHeader as AntdPageHeader,
     PageHeaderProps as AntdPageHeaderProps,
-} from "@ant-design/pro-layout";
+} from "@ant-design/pro-layout/es";
 import { Button, Typography } from "antd";
 import { ArrowLeftOutlined } from "@ant-design/icons";
 import { RefinePageHeaderClassNames } from "@refinedev/ui-types";

package/src/components/pages/auth/components/forgotPassword/index.tsx

@@ -40,9 +40,6 @@ type ResetPassworProps = ForgotPasswordPageProps<
     FormProps
 >;
 
-const { Text, Title } = Typography;
-const { useToken } = theme;
-
 /**
  * **refine** has forgot password page form which is served on `/forgot-password` route when the `authProvider` configuration is provided.
  *
@@ -56,7 +53,7 @@ export const ForgotPasswordPage: React.FC<ResetPassworProps> = ({
     formProps,
     title,
 }) => {
-    const { token } = useToken();
+    const { token } = theme.useToken();
     const [form] = Form.useForm<ForgotPasswordFormTypes>();
     const translate = useTranslate();
     const routerType = useRouterType();
@@ -83,7 +80,7 @@ export const ForgotPasswordPage: React.FC<ResetPassworProps> = ({
         );
 
     const CardTitle = (
-        <Title
+        <Typography.Title
             level={3}
             style={{
                 color: token.colorPrimaryTextHover,
@@ -91,7 +88,7 @@ export const ForgotPasswordPage: React.FC<ResetPassworProps> = ({
             }}
         >
             {translate("pages.forgotPassword.title", "Forgot your password?")}
-        </Title>
+        </Typography.Title>
     );
     const CardContent = (
         <Card
@@ -144,7 +141,7 @@ export const ForgotPasswordPage: React.FC<ResetPassworProps> = ({
                     }}
                 >
                     {loginLink ?? (
-                        <Text
+                        <Typography.Text
                             style={{
                                 fontSize: 12,
                                 marginLeft: "auto",
@@ -163,7 +160,7 @@ export const ForgotPasswordPage: React.FC<ResetPassworProps> = ({
                             >
                                 {translate("pages.login.signin", "Sign in")}
                             </ActiveLink>
-                        </Text>
+                        </Typography.Text>
                     )}
                 </div>
                 <Form.Item

package/src/components/pages/auth/components/login/index.tsx

@@ -33,9 +33,6 @@ import {
 } from "../styles";
 import { ThemedTitleV2 } from "@components";
 
-const { Text, Title } = Typography;
-const { useToken } = theme;
-
 type LoginProps = LoginPageProps<LayoutProps, CardProps, FormProps>;
 /**
  * **refine** has a default login page form which is served on `/login` route when the `authProvider` configuration is provided.
@@ -54,7 +51,7 @@ export const LoginPage: React.FC<LoginProps> = ({
     title,
     hideForm,
 }) => {
-    const { token } = useToken();
+    const { token } = theme.useToken();
     const [form] = Form.useForm<LoginFormTypes>();
     const translate = useTranslate();
     const routerType = useRouterType();
@@ -83,7 +80,7 @@ export const LoginPage: React.FC<LoginProps> = ({
         );
 
     const CardTitle = (
-        <Title
+        <Typography.Title
             level={3}
             style={{
                 color: token.colorPrimaryTextHover,
@@ -91,7 +88,7 @@ export const LoginPage: React.FC<LoginProps> = ({
             }}
         >
             {translate("pages.login.title", "Sign in to your account")}
-        </Title>
+        </Typography.Title>
     );
 
     const renderProviders = () => {
@@ -124,13 +121,13 @@ export const LoginPage: React.FC<LoginProps> = ({
                     })}
                     {!hideForm && (
                         <Divider>
-                            <Text
+                            <Typography.Text
                                 style={{
                                     color: token.colorTextLabel,
                                 }}
                             >
                                 {translate("pages.login.divider", "or")}
-                            </Text>
+                            </Typography.Text>
                         </Divider>
                     )}
                 </>
@@ -262,7 +259,7 @@ export const LoginPage: React.FC<LoginProps> = ({
                         marginTop: hideForm ? 16 : 8,
                     }}
                 >
-                    <Text style={{ fontSize: 12 }}>
+                    <Typography.Text style={{ fontSize: 12 }}>
                         {translate(
                             "pages.login.buttons.noAccount",
                             "Don’t have an account?",
@@ -276,7 +273,7 @@ export const LoginPage: React.FC<LoginProps> = ({
                         >
                             {translate("pages.login.signup", "Sign up")}
                         </ActiveLink>
-                    </Text>
+                    </Typography.Text>
                 </div>
             )}
         </Card>

package/src/components/pages/auth/components/register/index.tsx

@@ -32,9 +32,6 @@ import {
 } from "../styles";
 import { ThemedTitleV2 } from "@components";
 
-const { Text, Title } = Typography;
-const { useToken } = theme;
-
 type RegisterProps = RegisterPageProps<LayoutProps, CardProps, FormProps>;
 /**
  * **refine** has register page form which is served on `/register` route when the `authProvider` configuration is provided.
@@ -51,7 +48,7 @@ export const RegisterPage: React.FC<RegisterProps> = ({
     title,
     hideForm,
 }) => {
-    const { token } = useToken();
+    const { token } = theme.useToken();
     const [form] = Form.useForm<RegisterFormTypes>();
     const translate = useTranslate();
     const routerType = useRouterType();
@@ -80,7 +77,7 @@ export const RegisterPage: React.FC<RegisterProps> = ({
         );
 
     const CardTitle = (
-        <Title
+        <Typography.Title
             level={3}
             style={{
                 color: token.colorPrimaryTextHover,
@@ -88,7 +85,7 @@ export const RegisterPage: React.FC<RegisterProps> = ({
             }}
         >
             {translate("pages.register.title", "Sign up for your account")}
-        </Title>
+        </Typography.Title>
     );
 
     const renderProviders = () => {
@@ -121,13 +118,13 @@ export const RegisterPage: React.FC<RegisterProps> = ({
                     })}
                     {!hideForm && (
                         <Divider>
-                            <Text
+                            <Typography.Text
                                 style={{
                                     color: token.colorTextLabel,
                                 }}
                             >
                                 {translate("pages.login.divider", "or")}
-                            </Text>
+                            </Typography.Text>
                         </Divider>
                     )}
                 </>
@@ -200,7 +197,7 @@ export const RegisterPage: React.FC<RegisterProps> = ({
                         }}
                     >
                         {loginLink ?? (
-                            <Text
+                            <Typography.Text
                                 style={{
                                     fontSize: 12,
                                     marginLeft: "auto",
@@ -219,7 +216,7 @@ export const RegisterPage: React.FC<RegisterProps> = ({
                                 >
                                     {translate("pages.login.signin", "Sign in")}
                                 </ActiveLink>
-                            </Text>
+                            </Typography.Text>
                         )}
                     </div>
                     <Form.Item
@@ -248,7 +245,7 @@ export const RegisterPage: React.FC<RegisterProps> = ({
                         marginTop: hideForm ? 16 : 8,
                     }}
                 >
-                    <Text
+                    <Typography.Text
                         style={{
                             fontSize: 12,
                         }}
@@ -266,7 +263,7 @@ export const RegisterPage: React.FC<RegisterProps> = ({
                         >
                             {translate("pages.login.signin", "Sign in")}
                         </ActiveLink>
-                    </Text>
+                    </Typography.Text>
                 </div>
             )}
         </Card>

package/src/components/pages/auth/components/updatePassword/index.tsx

@@ -29,9 +29,6 @@ import {
 } from "../styles";
 import { ThemedTitleV2 } from "@components";
 
-const { Title } = Typography;
-const { useToken } = theme;
-
 type UpdatePasswordProps = UpdatePasswordPageProps<
     LayoutProps,
     CardProps,
@@ -50,7 +47,7 @@ export const UpdatePasswordPage: React.FC<UpdatePasswordProps> = ({
     formProps,
     title,
 }) => {
-    const { token } = useToken();
+    const { token } = theme.useToken();
     const [form] = Form.useForm<UpdatePasswordFormTypes>();
     const translate = useTranslate();
     const authProvider = useActiveAuthProvider();
@@ -74,7 +71,7 @@ export const UpdatePasswordPage: React.FC<UpdatePasswordProps> = ({
         );
 
     const CardTitle = (
-        <Title
+        <Typography.Title
             level={3}
             style={{
                 color: token.colorPrimaryTextHover,
@@ -82,7 +79,7 @@ export const UpdatePasswordPage: React.FC<UpdatePasswordProps> = ({
             }}
         >
             {translate("pages.updatePassword.title", "Set New Password")}
-        </Title>
+        </Typography.Title>
     );
 
     const CardContent = (

package/src/components/pages/error/index.tsx

@@ -5,8 +5,6 @@ import { Button, Result, Typography, Space, Tooltip } from "antd";
 import { InfoCircleOutlined } from "@ant-design/icons";
 import { useNavigation, useTranslate } from "@refinedev/core";
 
-const { Text } = Typography;
-
 /**
  * When the app is navigated to a non-existent route, refine shows a default error page.
  * A custom error component can be used for this error page.
@@ -46,12 +44,12 @@ export const ErrorComponent: React.FC<RefineErrorPageProps> = () => {
             extra={
                 <Space direction="vertical" size="large">
                     <Space>
-                        <Text>
+                        <Typography.Text>
                             {translate(
                                 "pages.error.404",
                                 "Sorry, the page you visited does not exist.",
                             )}
-                        </Text>
+                        </Typography.Text>
                         {errorMessage && (
                             <Tooltip title={errorMessage}>
                                 <InfoCircleOutlined data-testid="error-component-tooltip" />

package/src/components/pages/login/index.tsx

@@ -20,7 +20,6 @@ import {
     imageContainer,
 } from "./styles";
 
-const { Text, Title } = Typography;
 export interface ILoginForm {
     username: string;
     password: string;
@@ -43,9 +42,9 @@ export const LoginPage: React.FC<LoginPageProps> = () => {
     });
 
     const CardTitle = (
-        <Title level={3} style={titleStyles}>
+        <Typography.Title level={3} style={titleStyles}>
             {translate("pages.login.title", "Sign in your account")}
-        </Title>
+        </Typography.Title>
     );
 
     return (
@@ -150,7 +149,7 @@ export const LoginPage: React.FC<LoginPageProps> = () => {
                                 </Button>
                             </Form>
                             <div style={{ marginTop: 8 }}>
-                                <Text style={{ fontSize: 12 }}>
+                                <Typography.Text style={{ fontSize: 12 }}>
                                     {translate(
                                         "pages.login.noAccount",
                                         "Don’t have an account?",
@@ -161,7 +160,7 @@ export const LoginPage: React.FC<LoginPageProps> = () => {
                                             "Sign up",
                                         )}
                                     </a>
-                                </Text>
+                                </Typography.Text>
                             </div>
                         </Card>
                     </div>

package/src/components/pages/ready/index.tsx

@@ -33,8 +33,6 @@ const styles: { [key: string]: React.CSSProperties } = {
     },
 };
 
-const { Title } = Typography;
-
 /**
  * **refine** shows a default ready page on root route when no `resources` is passed to the `<Refine>` component as a property.
  *
@@ -49,7 +47,9 @@ export const ReadyPage: React.FC<RefineReadyPageProps> = () => {
                     src="https://refine.ams3.cdn.digitaloceanspaces.com/logo/refine.svg"
                     alt="Refine Logo"
                 />
-                <Title style={styles.title}>Welcome on board</Title>
+                <Typography.Title style={styles.title}>
+                    Welcome on board
+                </Typography.Title>
                 <p style={styles.p1}>Your configuration is completed.</p>
                 <p style={styles.p2}>
                     Now you can get started by adding your resources to the{" "}

package/src/components/table/components/filterDropdown/index.tsx

@@ -83,6 +83,8 @@ export const FilterDropdown: React.FC<FilterDropdownProps> = (props) => {
     const childrenWithProps = React.Children.map(children, (child) => {
         if (React.isValidElement(child)) {
             return React.cloneElement(child, {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
                 onChange,
                 value: mappedValue(value),
             });

package/src/components/themedLayout/header/index.tsx

@@ -3,14 +3,11 @@ import { Layout as AntdLayout, Typography, Avatar, Space, theme } from "antd";
 import { useActiveAuthProvider, useGetIdentity } from "@refinedev/core";
 import { RefineThemedLayoutHeaderProps } from "../types";
 
-const { Text } = Typography;
-const { useToken } = theme;
-
 /**
  * @deprecated It is recommended to use the improved `ThemedLayoutV2`. Review migration guidelines. https://refine.dev/docs/api-reference/antd/components/antd-themed-layout/#migrate-themedlayout-to-themedlayoutv2
  */
 export const ThemedHeader: React.FC<RefineThemedLayoutHeaderProps> = () => {
-    const { token } = useToken();
+    const { token } = theme.useToken();
 
     const authProvider = useActiveAuthProvider();
     const { data: user } = useGetIdentity({
@@ -36,7 +33,9 @@ export const ThemedHeader: React.FC<RefineThemedLayoutHeaderProps> = () => {
         >
             <Space>
                 <Space size="middle">
-                    {user?.name && <Text strong>{user.name}</Text>}
+                    {user?.name && (
+                        <Typography.Text strong>{user.name}</Typography.Text>
+                    )}
                     {user?.avatar && (
                         <Avatar src={user?.avatar} alt={user?.name} />
                     )}

package/src/components/themedLayout/sider/index.tsx

@@ -29,9 +29,6 @@ import { drawerButtonStyles } from "./styles";
 import { RefineThemedLayoutSiderProps } from "../types";
 import { ThemedTitle } from "@components";
 
-const { SubMenu } = Menu;
-const { useToken } = theme;
-
 /**
  * @deprecated It is recommended to use the improved `ThemedLayoutV2`. Review migration guidelines. https://refine.dev/docs/api-reference/antd/components/antd-themed-layout/#migrate-themedlayout-to-themedlayoutv2
  */
@@ -40,7 +37,7 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
     render,
     meta,
 }) => {
-    const { token } = useToken();
+    const { token } = theme.useToken();
 
     const [collapsed, setCollapsed] = useState<boolean>(false);
     const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
@@ -89,13 +86,13 @@ export const ThemedSider: React.FC<RefineThemedLayoutSiderProps> = ({
                             resource: item,
                         }}
                     >
-                        <SubMenu
+                        <Menu.SubMenu
                             key={item.key}
                             icon={icon ?? <UnorderedListOutlined />}
                             title={label}
                         >
                             {renderTreeView(children, selectedKey)}
-                        </SubMenu>
+                        </Menu.SubMenu>
                     </CanAccess>
                 );
             }

package/src/components/themedLayout/title/index.tsx

@@ -3,8 +3,6 @@ import { useRouterContext, useRouterType, useLink } from "@refinedev/core";
 import { Typography, theme, Space } from "antd";
 import { RefineLayoutThemedTitleProps } from "../types";
 
-const { useToken } = theme;
-
 const defaultText = "refine Project";
 
 const defaultIcon = (
@@ -38,7 +36,7 @@ export const ThemedTitle: React.FC<RefineLayoutThemedTitleProps> = ({
     text = defaultText,
     wrapperStyles,
 }) => {
-    const { token } = useToken();
+    const { token } = theme.useToken();
     const routerType = useRouterType();
     const Link = useLink();
     const { Link: LegacyLink } = useRouterContext();