@bitrise/bitkit 9.12.0-alpha-button-release.3 → 9.12.1-alpha-chakra.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.12.0-alpha-button-release.3",
+  "version": "9.12.1-alpha-chakra.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -76,6 +76,7 @@
     "@types/cheerio": "^0.22.31",
     "@types/clipboard": "^2.0.1",
     "@types/enzyme": "^3.10.12",
+    "@types/fscreen": "^1.0.1",
     "@types/jest": "^27.5.0",
     "@types/lodash.sample": "^4.2.7",
     "@types/lodash.shuffle": "^4.2.7",

package/src/Components/Box/Box.tsx

@@ -1,12 +1,12 @@
-import React, { forwardRef } from 'react';
-import { Box as ChakraBox, BoxProps } from '@chakra-ui/react';
+import React from 'react';
+import { Box as ChakraBox, BoxProps, forwardRef } from '@chakra-ui/react';
 
 /**
  * Box is the most abstract component on top of which all other components are built. By default, it renders a div element.
  *
  * And this is our CSS-in-JS component, you can use this with style props.
  */
-const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
+const Box = forwardRef<BoxProps, 'div'>((props, ref) => {
   return <ChakraBox {...props} ref={ref} />;
 });
 

package/src/Components/Button/Button.tsx

@@ -1,9 +1,9 @@
-import React, { HTMLAttributeAnchorTarget, forwardRef } from 'react';
-import { Button as ChakraButton, ButtonProps as ChackraButtonProps } from '@chakra-ui/react';
+import React, { HTMLAttributeAnchorTarget } from 'react';
+import { Button as ChakraButton, ButtonProps as ChakraButtonProps, forwardRef } from '@chakra-ui/react';
 import Icon from '../../Old/Icon/Icon';
 import { TypeIconName } from '../../Old/Icon/tsx';
 
-export interface ButtonProps extends ChackraButtonProps {
+export interface ButtonProps extends ChakraButtonProps {
   as?: 'a' | 'button';
   href?: string;
   isDanger?: boolean;
@@ -17,9 +17,9 @@ export interface ButtonProps extends ChackraButtonProps {
 /**
  * The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
  */
-const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+const Button = forwardRef<ButtonProps, 'button'>((props, ref) => {
   const { as, isDanger, leftIconName, rightIconName, size, variant, ...rest } = props;
-  const properties: ChackraButtonProps = {
+  const properties: ChakraButtonProps = {
     as,
     size,
     variant: isDanger ? `${variant}--danger` : variant,

package/src/Components/Card/Card.stories.tsx

@@ -1,18 +1,35 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { sortObjectByKey } from '../../utils/storyUtils';
+import Divider from '../Divider/Divider';
 import Card from './Card';
+import CardContent from './CardContent';
 
 export default {
   title: 'Components/Card',
   component: Card,
+  subcomponents: { CardContent },
 } as ComponentMeta<typeof Card>;
 
-const Template: ComponentStory<typeof Card> = (props) => <Card {...props} />;
-
-export const WithProps = Template.bind({});
+export const WithProps: ComponentStory<typeof Card> = (props) => (
+  <Card {...props}>
+    <CardContent>The quick brown fox jumps over the lazy dog.</CardContent>
+  </Card>
+);
 
 WithProps.args = sortObjectByKey({
   ...Card.defaultProps,
-  children: 'The quick brown fox jumps over the lazy dog.',
+  className: '',
+});
+
+export const DividedContent: ComponentStory<typeof Card> = (props) => (
+  <Card {...props}>
+    <CardContent>The quick brown fox jumps over the lazy dog.</CardContent>
+    <Divider />
+    <CardContent>The quick brown fox jumps over the lazy dog.</CardContent>
+  </Card>
+);
+
+DividedContent.args = sortObjectByKey({
+  ...Card.defaultProps,
   className: '',
 });

package/src/Components/Card/Card.tsx

@@ -1,26 +1,33 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
+import { forwardRef, HTMLChakraProps } from '@chakra-ui/react';
 import { Radii } from '../../Foundations/Radii/Radii';
 import { Shadows } from '../../Foundations/Shadows/Shadows';
-import { Sizes } from '../../Foundations/Sizes/Sizes';
 import Box, { BoxProps } from '../Box/Box';
 
 export interface CardProps extends BoxProps {
   borderRadius?: keyof Radii;
   boxShadow?: keyof Shadows;
-  padding?: keyof Sizes;
 }
 
 /**
- * Basic container element with default box shadow, border radius and padding.
+ * Basic container element with default box shadow and border radius. Use with `CardContent` to add padding.
  */
-const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {
-  return <Box {...props} ref={ref} />;
+const Card = forwardRef<CardProps, 'div'>((props, ref) => {
+  const properties = {
+    display: 'block',
+    width: '100%',
+    ...props,
+  } as BoxProps;
+  if (props.as === 'button' && !(props as HTMLChakraProps<'button'>).type) {
+    (properties as HTMLChakraProps<'button'>).type = 'button';
+  }
+  return <Box {...properties} ref={ref} />;
 });
 
 Card.defaultProps = {
+  as: 'div',
   borderRadius: '12',
   boxShadow: 'medium',
-  padding: '24',
 } as CardProps;
 
 export default Card;

package/src/Components/Card/CardContent.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Sizes } from '../../Foundations/Sizes/Sizes';
+import Box, { BoxProps } from '../Box/Box';
+
+export interface CardContentProps extends BoxProps {
+  padding?: keyof Sizes;
+}
+
+/**
+ * Basic container element with default box shadow, border radius and padding.
+ */
+const CardContent = (props: CardContentProps) => {
+  return <Box {...props} />;
+};
+
+CardContent.defaultProps = {
+  padding: '24',
+} as CardContentProps;
+
+export default CardContent;

package/src/Components/IconButton/IconButton.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from 'react';
-import { IconButton as ChakraIconButton, IconButtonProps } from '@chakra-ui/react';
+import React from 'react';
+import { IconButton as ChakraIconButton, IconButtonProps, forwardRef } from '@chakra-ui/react';
 import Icon from '../../Old/Icon/Icon';
 import { TypeIconName } from '../../Old/Icon/tsx';
 
@@ -19,7 +19,7 @@ export interface Props extends IconButtonProps {
  * TODO:
  * - Change to Chakra powered Icon component
  */
-const IconButton = forwardRef<HTMLButtonElement, Props>((props, ref) => {
+const IconButton = forwardRef<Props, 'button'>((props, ref) => {
   const { iconName, isDanger, variant, ...rest } = props;
   const properties: IconButtonProps = {
     icon: <Icon name={iconName} />,

package/src/Components/Link/Link.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from 'react';
-import { Link as ChakraLink, LinkProps as ChakraLinkProps } from '@chakra-ui/react';
+import React from 'react';
+import { Link as ChakraLink, LinkProps as ChakraLinkProps, forwardRef } from '@chakra-ui/react';
 import { TextSizes } from '../../Foundations/Typography/Typography';
 
 export interface LinkProps extends ChakraLinkProps {
@@ -12,7 +12,7 @@ export interface LinkProps extends ChakraLinkProps {
 /**
  * Links are accessible elements used primarily for navigation.
  */
-const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
+const Link = forwardRef<LinkProps, 'a'>((props, ref) => {
   const { as, isUnderlined, ...rest } = props;
   const properties: ChakraLinkProps = { as, ...rest };
   if (isUnderlined) {

package/src/Components/Text/Text.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from 'react';
-import { Text as ChakraText, TextProps as ChakraTextProps } from '@chakra-ui/react';
+import React from 'react';
+import { Text as ChakraText, TextProps as ChakraTextProps, forwardRef } from '@chakra-ui/react';
 import { TextSizes } from '../../Foundations/Typography/Typography';
 
 type TextTags =
@@ -58,7 +58,7 @@ export interface TextProps extends ChakraTextProps {
 /**
  * `Text` component is the used to render text and paragraphs within an interface. It renders a `<p>` tag by default.
  */
-const Text = forwardRef<HTMLParagraphElement, TextProps>((props, ref) => {
+const Text = forwardRef<TextProps, 'p'>((props, ref) => {
   const { color, fontWeight, size, textTransform } = props;
   const properties: ChakraTextProps = { ...props };
   if (size === '1' && (!textTransform || textTransform === 'none')) {

package/src/Foundations/Colors/DesignTokens.tsx

@@ -34,7 +34,7 @@ const DesignTokens = () => {
           plugin called “Theemo”.
         </Text>
       </Box>
-      <Card sx={{ marginBottom: '96' }}>
+      <Card marginBottom="96">
         <VStack align="flex-start" as="ul" spacing="32">
           {Object.keys(TOKENS).map((token: string) => (
             <HStack as="li" key={token} spacing="32">

package/src/Foundations/Colors/Palette.tsx

@@ -76,7 +76,7 @@ const Palette = () => (
     <Text as="h2" size="8">
       Full palette
     </Text>
-    <Card sx={{ marginTop: '24' }}>
+    <Card marginTop="24">
       <HStack spacing="0" sx={{ alignItems: 'flex-start', marginBottom: '16' }}>
         <VStack spacing="0">
           <InfoHeader

package/src/Foundations/Typography/Typography.examples.tsx

@@ -31,7 +31,7 @@ export const FontSizes = () => (
     <Text sx={{ marginTop: '8' }}>
       <strong>Text transform:</strong> None, UPPERCASE
     </Text>
-    <Card sx={{ marginTop: '24' }}>
+    <Card marginTop="24">
       <VStack as="ol" spacing={24} sx={style}>
         <Text as="li" size="1">
           {typography.fontSizes[1]} / {typography.lineHeights[1]} / Normal / Uppercase

package/src/index.ts

@@ -1,8 +1,276 @@
-export * from './old';
+import './Old/variables.css';
+
+import * as variables from './Old/variables';
+import * as hooks from './Old/hooks';
+
+export { variables };
+export { hooks };
+
+export type { Props as AddonBeamProps } from './Old/AddonBeam/AddonBeam';
+export { default as AddonBeam } from './Old/AddonBeam/AddonBeam';
+
+export type { Props as AddonBeamLinkProps } from './Old/AddonBeam/AddonBeamLink';
+export { default as AddonBeamLink } from './Old/AddonBeam/AddonBeamLink';
+
+export type { Props as AddonFooterProps } from './Old/AddonFooter/AddonFooter';
+export { default as AddonFooter } from './Old/AddonFooter/AddonFooter';
+
+export type { Props as AppearProps } from './Old/Appear/Appear';
+export type { TypeAppearAnimationName } from './Old/Appear/Appear';
+export { default as Appear } from './Old/Appear/Appear';
+
+export type { Props as AppLayoutProps } from './Old/AppLayout/AppLayout';
+export { default as AppLayout } from './Old/AppLayout/AppLayout';
+
+export type { Props as AppLayoutBodyProps } from './Old/AppLayout/AppLayoutBody';
+export { default as AppLayoutBody } from './Old/AppLayout/AppLayoutBody';
+
+export type { Props as AppLayoutHeaderProps } from './Old/AppLayout/AppLayoutHeader';
+export { default as AppLayoutHeader } from './Old/AppLayout/AppLayoutHeader';
+
+export type { Props as AppLayoutMainProps } from './Old/AppLayout/AppLayoutMain';
+export { default as AppLayoutMain } from './Old/AppLayout/AppLayoutMain';
+
+export type { Props as AppLayoutSidebarProps } from './Old/AppLayout/AppLayoutSidebar';
+export { default as AppLayoutSidebar } from './Old/AppLayout/AppLayoutSidebar';
+
+export type { Props as AvatarProps } from './Old/Avatar/Avatar';
+export { default as Avatar } from './Old/Avatar/Avatar';
+
+export type { Props as BadgeProps } from './Old/Badge/Badge';
+export { default as Badge } from './Old/Badge/Badge';
+
+export type { Props as BaseProps } from './Old/Base/Base';
+export type { TypeBorderRadius } from './Old/Base/Base';
+export type { TypeColors } from './Old/Base/Base';
+export type { TypeSizes } from './Old/Base/Base';
+export { default as Base } from './Old/Base/Base';
+
+export type { Props as BoundsProps } from './Old/Bounds/Bounds';
+export { default as Bounds } from './Old/Bounds/Bounds';
+
+export type { Props as ButtonProps } from './Old/Button/Button';
+export { default as Button } from './Old/Button/Button';
+
+export type { Props as ButtonsProps } from './Old/Button/Buttons';
+export { default as Buttons } from './Old/Button/Buttons';
+
+export type { Props as CheckboxProps } from './Old/Checkbox/Checkbox';
+export { default as Checkbox } from './Old/Checkbox/Checkbox';
+
+export type { Props as ColorButtonProps } from './Old/Button/ColorButton';
+export { default as ColorButton } from './Old/Button/ColorButton';
+
+export type { Props as DatePickerProps } from './Old/DatePicker/DatePicker';
+export { default as DatePicker } from './Old/DatePicker/DatePicker';
+
+export type { Props as DotProps } from './Old/Dot/Dot';
+export { default as Dot } from './Old/Dot/Dot';
+
+export type { Props as DropdownProps } from './Old/Dropdown/Dropdown';
+export { default as Dropdown } from './Old/Dropdown/Dropdown';
+
+export type { Props as DropdownButtonProps } from './Old/Dropdown/DropdownButton';
+export { default as DropdownButton } from './Old/Dropdown/DropdownButton';
+
+export type { Props as DropdownMenusProps } from './Old/Dropdown/DropdownMenus';
+export { default as DropdownMenus } from './Old/Dropdown/DropdownMenus';
+
+export type { Props as DropdownMenuProps } from './Old/Dropdown/DropdownMenu';
+export { default as DropdownMenu } from './Old/Dropdown/DropdownMenu';
+
+export type { Props as DropdownMenuItemProps } from './Old/Dropdown/DropdownMenuItem';
+export { default as DropdownMenuItem } from './Old/Dropdown/DropdownMenuItem';
+
+export type { Props as DropdownMenuItemGroupProps } from './Old/Dropdown/DropdownMenuItemGroup';
+export { default as DropdownMenuItemGroup } from './Old/Dropdown/DropdownMenuItemGroup';
+
+export type { Props as ExpandProps } from './Old/Expand/Expand';
+export { default as Expand } from './Old/Expand/Expand';
+
+export type { Props as ExternalLinkProps } from './Old/ExternalLink/ExternalLink';
+export { default as ExternalLink } from './Old/ExternalLink/ExternalLink';
+
+export type { Props as FlexProps } from './Old/Flex/Flex';
+export { default as Flex } from './Old/Flex/Flex';
+
+export type { Props as GridProps } from './Old/Grid/Grid';
+export { default as Grid } from './Old/Grid/Grid';
+
+export type { Props as HamburgerProps } from './Old/Hamburger/Hamburger';
+export { default as Hamburger } from './Old/Hamburger/Hamburger';
+
+export type { Props as IconProps } from './Old/Icon/Icon';
+export type { TypeIconName } from './Old/Icon/Icon';
+export { default as Icon } from './Old/Icon/Icon';
+
+export type { Props as ImageProps } from './Old/Image/Image';
+export { default as Image } from './Old/Image/Image';
+
+export type { Props as InputProps } from './Old/Input/Input';
+export { default as Input } from './Old/Input/Input';
+
+export type { Props as InputContainerProps } from './Old/Input/InputContainer';
+export { default as InputContainer } from './Old/Input/InputContainer';
+
+export type { Props as InputContentProps } from './Old/Input/InputContent';
+export { default as InputContent } from './Old/Input/InputContent';
+
+export type { Props as InputInlineHelpProps } from './Old/Input/InputInlineHelp';
+export { default as InputInlineHelp } from './Old/Input/InputInlineHelp';
+
+export type { Props as InputLabelProps } from './Old/Input/InputLabel';
+export { default as InputLabel } from './Old/Input/InputLabel';
 
 export type { LinkProps } from './Components/Link/Link';
 export { default as Link } from './Components/Link/Link';
 
+export type { Props as ListProps } from './Old/List/List';
+export { default as List } from './Old/List/List';
+
+export type { Props as ListItemProps } from './Old/List/ListItem';
+export { default as ListItem } from './Old/List/ListItem';
+
+export type { Props as LogoProps } from './Old/Logo/Logo';
+export { default as Logo } from './Old/Logo/Logo';
+
+export type { Props as ModalProps } from './Old/Modal/Modal';
+export { default as Modal } from './Old/Modal/Modal';
+
+export type { Props as ModalBodyProps } from './Old/Modal/ModalBody';
+export { default as ModalBody } from './Old/Modal/ModalBody';
+
+export type { Props as ModalHeaderProps } from './Old/Modal/ModalHeader';
+// eslint-disable-next-line import/no-cycle
+export { default as ModalHeader } from './Old/Modal/ModalHeader';
+
+export type { Props as ModalHeaderProgressProps } from './Old/Modal/ModalHeaderProgress';
+export { default as ModalHeaderProgress } from './Old/Modal/ModalHeaderProgress';
+
+export type { Props as ModalTitleProps } from './Old/Modal/ModalTitle';
+export { default as ModalTitle } from './Old/Modal/ModalTitle';
+
+export type { Props as NotificationProps } from './Old/Notification/Notification';
+export { default as Notification } from './Old/Notification/Notification';
+
+export type { Props as PlacementProps } from './Old/Placement/Placement';
+export { default as Placement } from './Old/Placement/Placement';
+
+export type { Props as PlacementAreaProps } from './Old/Placement/PlacementArea';
+export { default as PlacementArea } from './Old/Placement/PlacementArea';
+
+export type { Props as PlacementArrowProps } from './Old/Placement/PlacementArrow';
+export { default as PlacementArrow } from './Old/Placement/PlacementArrow';
+
+export type { Props as PlacementManagerProps } from './Old/Placement/PlacementManager';
+export { default as PlacementManager } from './Old/Placement/PlacementManager';
+
+export type { Props as PlacementReferenceProps } from './Old/Placement/PlacementReference';
+export { default as PlacementReference } from './Old/Placement/PlacementReference';
+
+export type { Props as PortalProps } from './Old/Portal/Portal';
+export { default as Portal } from './Old/Portal/Portal';
+
+export type { Props as ProgressBarProps } from './Old/Progress/ProgressBar';
+export { default as ProgressBar } from './Old/Progress/ProgressBar';
+
+export type { Props as ProgressButtonProps } from './Old/Progress/ProgressButton';
+export { default as ProgressButton } from './Old/Progress/ProgressButton';
+
+export type { Props as ProgressBitbotProps } from './Old/Progress/ProgressBitbot';
+export { default as ProgressBitbot } from './Old/Progress/ProgressBitbot';
+
+export type { Props as ProgressColorButtonProps } from './Old/Progress/ProgressColorButton';
+export { default as ProgressColorButton } from './Old/Progress/ProgressColorButton';
+
+export type { Props as ProgressSpinnerProps } from './Old/Progress/ProgressSpinner';
+export { default as ProgressSpinner } from './Old/Progress/ProgressSpinner';
+
+export type { Props as RadioButtonProps } from './Old/RadioButton/RadioButton';
+export { default as RadioButton } from './Old/RadioButton/RadioButton';
+
+export type { Props as RibbonProps } from './Old/Ribbon/Ribbon';
+export { default as Ribbon } from './Old/Ribbon/Ribbon';
+
+export type { Props as SidebarProps } from './Old/Sidebar/Sidebar';
+export { default as Sidebar } from './Old/Sidebar/Sidebar';
+
+export type { Props as SidebarHeaderProps } from './Old/Sidebar/SidebarHeader';
+export { default as SidebarHeader } from './Old/Sidebar/SidebarHeader';
+
+export type { Props as SidebarMenuProps } from './Old/Sidebar/SidebarMenu';
+export { default as SidebarMenu } from './Old/Sidebar/SidebarMenu';
+
+export type { Props as SidebarMenuItemProps } from './Old/Sidebar/SidebarMenuItem';
+export { default as SidebarMenuItem } from './Old/Sidebar/SidebarMenuItem';
+
+export type { Props as SidebarSubMenuProps } from './Old/Sidebar/SidebarSubMenu';
+export { default as SidebarSubMenu } from './Old/Sidebar/SidebarSubMenu';
+
+export type { Props as SidebarSubMenuItemProps } from './Old/Sidebar/SidebarSubMenuItem';
+export { default as SidebarSubMenuItem } from './Old/Sidebar/SidebarSubMenuItem';
+
+export type { Props as SkeletonProps } from './Old/Skeleton/Skeleton';
+export { default as Skeleton } from './Old/Skeleton/Skeleton';
+
+export type { Props as SkeletonBoxProps } from './Old/Skeleton/SkeletonBox';
+export { default as SkeletonBox } from './Old/Skeleton/SkeletonBox';
+
+export type { Props as Status404Props } from './Old/Status/Status404';
+export { default as Status404 } from './Old/Status/Status404';
+
+export type { Props as Status500Props } from './Old/Status/Status500';
+export { default as Status500 } from './Old/Status/Status500';
+
+export type { Props as TableProps } from './Old/Table/Table';
+export { default as Table } from './Old/Table/Table';
+
+export type { Props as TableBodyProps } from './Old/Table/TableBody';
+export { default as TableBody } from './Old/Table/TableBody';
+
+export type { Props as TableCellProps } from './Old/Table/TableCell';
+export { default as TableCell } from './Old/Table/TableCell';
+
+export type { Props as TableHeaderProps } from './Old/Table/TableHeader';
+export { default as TableHeader } from './Old/Table/TableHeader';
+
+export type { Props as TableHeaderCellProps } from './Old/Table/TableHeaderCell';
+export type { TypeTableSort } from './Old/Table/TableHeaderCell';
+export { default as TableHeaderCell } from './Old/Table/TableHeaderCell';
+
+export type { Props as TableHeaderRowProps } from './Old/Table/TableHeaderRow';
+export { default as TableHeaderRow } from './Old/Table/TableHeaderRow';
+
+export type { Props as TableRowProps } from './Old/Table/TableRow';
+export { default as TableRow } from './Old/Table/TableRow';
+
+export type { Props as TabProps } from './Old/Tabs/Tab';
+export { default as Tab } from './Old/Tabs/Tab';
+
+export type { Props as TabsProps } from './Old/Tabs/Tabs';
+export { default as Tabs } from './Old/Tabs/Tabs';
+
+export type { Props as TextProps } from './Old/Text/Text';
+export type { TypeTextLetterSpacing } from './Old/Text/Text';
+export type { TypeTextSize } from './Old/Text/Text';
+export type { TypeTextWeight } from './Old/Text/Text';
+export { default as Text } from './Old/Text/Text';
+
+export type { Props as TextareaProps } from './Old/Textarea/Textarea';
+export { default as Textarea } from './Old/Textarea/Textarea';
+
+export type { Props as ToggleProps } from './Old/Toggle/Toggle';
+export { default as Toggle } from './Old/Toggle/Toggle';
+
+export type { Props as TooltipProps } from './Old/Tooltip/Tooltip';
+export { default as Tooltip } from './Old/Tooltip/Tooltip';
+
+export type { Props as VisibilityProps } from './Old/Visibility/Visibility';
+export { default as Visibility } from './Old/Visibility/Visibility';
+
+export type { Props as VisibilityContainerProps } from './Old/Visibility/VisibilityContainer';
+export { default as VisibilityContainer } from './Old/Visibility/VisibilityContainer';
+
 export { default as Provider } from './Components/Provider/Provider';
 export { default as theme } from './theme';
 
@@ -15,8 +283,8 @@ export { default as OverflowMenuItem } from './Components/OverflowMenu/OverflowM
 export type { DividerProps } from './Components/Divider/Divider';
 export { default as Divider } from './Components/Divider/Divider';
 
-export type { ButtonProps } from './Components/Button/Button';
-export { default as Button } from './Components/Button/Button';
+export type { CardProps } from './Components/Card/Card';
+export { default as Card } from './Components/Card/Card';
 
-export type { ButtonGroupProps } from './Components/ButtonGroup/ButtonGroup';
-export { default as ButtonGroup } from './Components/ButtonGroup/ButtonGroup';
+export type { CardContentProps } from './Components/Card/CardContent';
+export { default as CardContent } from './Components/Card/CardContent';