fix

packages/fuselage/src/components/Card/Card.stories.tsx

@@ -1,11 +1,10 @@
-import { Button } from '@rocket.chat/fuselage';
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
 import { Card, CardBody, CardCol, CardTitle } from '.';
 import { Avatar } from '../Avatar';
 import { Badge } from '../Badge';
-import { IconButton } from '../Button';
+import { Button, IconButton } from '../Button';
 import { Icon } from '../Icon';
 import { Tag } from '../Tag';
 import CardControls from './CardControls';

packages/fuselage/src/components/Card/CardBody.tsx

@@ -1,17 +1,19 @@
-import { Box } from '@rocket.chat/fuselage';
-import type { FC, CSSProperties, ComponentProps } from 'react';
+import type { CSSProperties, ComponentProps } from 'react';
 import React from 'react';
 
+import Box from '../Box/Box';
+
 type CardBodyProps = {
   flexDirection?: CSSProperties['flexDirection'];
   height?: ComponentProps<typeof Box>['height'];
+  children: React.ReactNode;
 };
 
-const CardBody: FC<CardBodyProps> = ({
+const CardBody = ({
   children,
   flexDirection = 'row',
   height,
-}) => (
+}: CardBodyProps) => (
   <Box
     fontScale='c1'
     display='flex'

packages/fuselage/src/components/Card/CardCol.tsx

@@ -1,7 +1,8 @@
-import { Box } from '@rocket.chat/fuselage';
 import type { AllHTMLAttributes, ReactNode } from 'react';
 import React from 'react';
 
+import Box from '../Box/Box';
+
 const CardCol = ({
   children,
   ...props

packages/fuselage/src/components/Card/CardDivider.tsx

@@ -1,6 +1,7 @@
-import { Divider } from '@rocket.chat/fuselage';
 import React from 'react';
 
+import { Divider } from '../Divider';
+
 const CardDivider = () => (
   <Divider width='x1' mi={24} mb='none' alignSelf='stretch' />
 );

packages/fuselage/src/components/Card/CardHeader.tsx

@@ -1,8 +1,11 @@
-import { Box } from '@rocket.chat/fuselage';
-import type { ReactNode } from 'react';
+import type { AllHTMLAttributes, ReactNode } from 'react';
 import React from 'react';
 
-const CardHeader = ({ children }: { children: ReactNode }) => (
+import Box from '../Box/Box';
+
+const CardHeader = ({
+  children,
+}: { children: ReactNode } & Omit<AllHTMLAttributes<HTMLElement>, 'is'>) => (
   <Box color='default' display='flex' alignItems='center' rcx-card__header>
     {children}
   </Box>

packages/fuselage/src/components/Card/CardHorizontal.tsx

@@ -1,8 +1,9 @@
-import { Box } from '@rocket.chat/fuselage';
 import { useBreakpoints } from '@rocket.chat/fuselage-hooks';
 import type { AllHTMLAttributes } from 'react';
 import React from 'react';
 
+import Box from '../Box/Box';
+
 const CardHorizontal = (props: Omit<AllHTMLAttributes<HTMLElement>, 'is'>) => {
   const breakpoints = useBreakpoints();
   const isMobile = !breakpoints.includes('sm');

packages/fuselage/src/components/Card/CardTitle.tsx

@@ -1,7 +1,7 @@
-import { Box } from '@rocket.chat/fuselage';
 import type { AllHTMLAttributes, ReactNode } from 'react';
 import React from 'react';
 
+import Box from '../Box/Box';
 import { LabelInfo } from '../Label/LabelInfo';
 
 const CardTitle = ({

packages/fuselage/src/components/Card/CardVertical.tsx

@@ -1,9 +1,9 @@
-import { Box } from '@rocket.chat/fuselage';
 import { useBreakpoints } from '@rocket.chat/fuselage-hooks';
 import type { AllHTMLAttributes } from 'react';
 import React from 'react';
 
 import './Card.styles.scss';
+import Box from '../Box/Box';
 
 const CardVertical = (props: Omit<AllHTMLAttributes<HTMLElement>, 'is'>) => {
   const breakpoints = useBreakpoints();

packages/fuselage/src/components/Card/index.ts

@@ -6,3 +6,5 @@ export { default as CardTitle } from './CardTitle';
 export { default as CardControls } from './CardControls';
 export { default as CardContent } from './CardRow';
 export { default as CardHeader } from './CardHeader';
+export { default as CardVertical } from './CardVertical';
+export { default as CardHorizontal } from './CardHorizontal';

packages/fuselage/src/components/CardGroup/CardGroup.tsx

@@ -1,4 +1,3 @@
-// import type { ComponentProps } from 'react';
 import type { ReactNode } from 'react';
 import React from 'react';
 

packages/fuselage/src/components/index.ts

@@ -10,6 +10,8 @@ export { useArrayLikeClassNameProp } from '../hooks/useArrayLikeClassNameProp';
 export { default as Button, ActionButton, IconButton } from './Button';
 export * from './ButtonGroup';
 export * from './Callout';
+export * from './Card';
+export * from './CardGroup';
 export * from './CheckBox';
 export * from './Chevron';
 export { default as CodeSnippet } from './CodeSnippet';