feat(vue-layout): update Box Circle and Square type definitions

Author: koca

packages/layout/src/box.ts

@@ -10,7 +10,13 @@ import { computed, defineComponent, h, PropType } from '@vue/runtime-core'
 
 export interface BoxProps extends HTMLChakraProps<'div'> {}
 
-const CBoxImpl = defineComponent({
+/**
+ * Box is the most abstract component on top of which other chakra
+ * components are built. It renders a `div` element by default.
+ *
+ * @see Docs https://vue.chakra-ui.com/docs/layout/box
+ */
+export const CBox: ComponentWithProps<DeepPartial<BoxProps>> = defineComponent({
   props: {
     as: {
       type: [String, Object] as PropType<DOMElements>,
@@ -31,14 +37,6 @@ const CBoxImpl = defineComponent({
   },
 })
 
-/**
- * Box is the most abstract component on top of which other chakra
- * components are built. It renders a `div` element by default.
- *
- * @see Docs https://vue.chakra-ui.com/docs/layout/box
- */
-export const CBox = CBoxImpl as ComponentWithProps<DeepPartial<BoxProps>>
-
 /**
  * As a constraint, you can't pass size related props
  * Only `size` would be allowed
@@ -56,7 +54,9 @@ export interface SquareProps extends Omit<BoxProps, Omitted> {
   centerContent?: boolean
 }
 
-const CSquareImpl = defineComponent({
+export const CSquare: ComponentWithProps<
+  DeepPartial<SquareProps>
+> = defineComponent({
   props: {
     size: [Object, String, Number] as PropType<SquareProps['size']>,
     centerContent: {
@@ -89,11 +89,9 @@ const CSquareImpl = defineComponent({
   },
 })
 
-export const CSquare = CSquareImpl as ComponentWithProps<
+export const CCircle: ComponentWithProps<
   DeepPartial<SquareProps>
->
-
-const CCircleImpl = defineComponent({
+> = defineComponent({
   setup(_, { slots, attrs }) {
     return () => {
       return h(
@@ -108,7 +106,3 @@ const CCircleImpl = defineComponent({
     }
   },
 })
-
-export const CCircle = CCircleImpl as ComponentWithProps<
-  DeepPartial<SquareProps>
->