fix: use Theme TS type

.changeset/sweet-otters-arrive.md

@@ -0,0 +1,5 @@
+---
+"@chakra-ui/react": patch
+---
+
+The `extendTheme` function uses the type `Theme` again

packages/react/src/extend-theme.ts

@@ -1,4 +1,4 @@
-import defaultTheme, { ChakraTheme, DefaultChakraTheme } from "@chakra-ui/theme"
+import defaultTheme, { ChakraTheme, Theme } from "@chakra-ui/theme"
 import { isFunction, mergeWith } from "@chakra-ui/utils"
 
 type CloneKey<Target, Key> = Key extends keyof Target ? Target[Key] : unknown
@@ -20,19 +20,19 @@ type DeepThemeExtension<BaseTheme, ThemeType> = {
 }
 
 export type ThemeOverride = Partial<ChakraTheme> &
-  DeepThemeExtension<DefaultChakraTheme, ChakraTheme>
+  DeepThemeExtension<Theme, ChakraTheme>
 
 /**
  * Function to override or customize the Chakra UI theme conveniently
  * @param overrides - Your custom theme object overrides
  * @param baseTheme - theme to customize
  */
 export function extendTheme<
-  BaseTheme extends ChakraTheme = DefaultChakraTheme,
+  BaseTheme extends ChakraTheme = Theme,
   Overrides extends ThemeOverride = ThemeOverride
 >(
   overrides: Overrides,
-  baseTheme: BaseTheme = defaultTheme as BaseTheme,
+  baseTheme: BaseTheme = (defaultTheme as unknown) as BaseTheme,
 ): BaseTheme & Overrides {
   function customizer(
     source: unknown,

packages/react/tests/extend-theme.test.tsx

@@ -237,4 +237,24 @@ describe("extendTheme", () => {
 
     expect((customTheme.breakpoints as any).customFunction).toBeUndefined()
   })
+
+  it("should allow custom breakpoints", () => {
+    const override = {
+      breakpoints: createBreakpoints({
+        sm: "1px",
+        md: "2px",
+        lg: "3px",
+        xl: "4px",
+        phone: "5px",
+      }),
+    }
+
+    const customTheme = extendTheme(override)
+
+    expect(customTheme.breakpoints).toHaveProperty("sm")
+    expect(customTheme.breakpoints).toHaveProperty("md")
+    expect(customTheme.breakpoints).toHaveProperty("lg")
+    expect(customTheme.breakpoints).toHaveProperty("xl")
+    expect(customTheme.breakpoints).toHaveProperty("phone")
+  })
 })