fix: update Box styled-system props and their types

BREAKING CHANGE removes boxSizing properties from the supported styled-system 
props on the Box component.

package.json

@@ -121,7 +121,6 @@
     "react-color": "^2.18.1",
     "react-dom": "17.0.2",
     "react-router-dom": "^5.2.0",
-    "react-select": "^5.8.0",
     "react-test-renderer": "^16.10",
     "rollup": "^2.7.3",
     "rollup-plugin-babel": "^4.4.0",
@@ -163,6 +162,7 @@
     "react-resize-detector": "^9.1.0",
     "react-windowed-select": "2.0.5",
     "smoothscroll-polyfill": "^0.4.4",
+    "react-select": "^5.8.0",
     "styled-system": "^5.1.4",
     "@types/styled-system": "5.1.22"
   },

src/Box/Box.tsx

@@ -1,115 +1,18 @@
+import { ComponentPropsWithRef } from "react";
 import styled from "styled-components";
 import { motion, MotionProps } from "framer-motion";
-import {
-  color,
-  space,
-  layout,
-  border,
-  boxShadow,
-  textAlign,
-  order,
-  flexbox,
-  flexGrow,
-  position,
-  background,
-  overflow,
-  ColorProps,
-  SpaceProps,
-  LayoutProps,
-  BoxShadowProps,
-  TextAlignProps,
-  OrderProps,
-  FlexGrowProps,
-  PositionProps,
-  BorderProps,
-  FlexboxProps,
-  BackgroundProps,
-  OverflowProps,
-  typography,
-} from "styled-system";
-import { TypographyProps } from "styled-system";
-import { transition, TransitionProps } from "../StyledProps/transition";
-import { transform, TransformProps } from "../StyledProps/transform";
-import { CursorProps, cursor } from "../StyledProps/cursor";
-import { VisibilityProps, visibility } from "../StyledProps/visibility";
-import { ThemeType } from "../theme.type";
+import { addStyledProps, StyledProps } from "../StyledProps";
 
-type SharedBoxProps = ColorProps &
-  SpaceProps &
-  LayoutProps &
-  BoxShadowProps &
-  TextAlignProps &
-  OrderProps &
-  FlexGrowProps &
-  PositionProps &
-  BorderProps &
-  FlexboxProps &
-  BackgroundProps &
-  TransformProps &
-  CursorProps &
-  VisibilityProps &
-  OverflowProps &
-  TypographyProps & {
-    boxSizing?: string;
-  };
+export interface BoxProps extends StyledProps, ComponentPropsWithRef<"div"> {
+  as?: React.ElementType;
+}
 
-type CssArg = {
-  theme: ThemeType;
-};
-export type BoxProps = SharedBoxProps &
-  TransitionProps &
-  React.ComponentPropsWithRef<"div"> & {
-    as?: string;
-    css?: (props: CssArg) => any;
-  };
+const Box = styled.div<BoxProps>(addStyledProps);
 
-const Box: React.FC<BoxProps> = styled.div(
-  color,
-  space,
-  layout,
-  border,
-  boxShadow,
-  textAlign,
-  order,
-  flexbox,
-  flexGrow,
-  position,
-  background,
-  transform,
-  cursor,
-  overflow,
-  transition,
-  visibility,
-  typography
-);
+export interface AnimatedBoxProps
+  extends MotionProps,
+    Omit<BoxProps, "onAnimationStart" | "onDrag" | "onDragStart" | "onDragEnd" | "style" | "transition"> {}
 
-export type AnimatedBoxProps = SharedBoxProps &
-  MotionProps & {
-    role?: string;
-    ref?: any;
-    onClick?: (event: React.MouseEvent<any>) => void;
-    onMouseEnter?: (event: React.MouseEvent<any>) => void;
-    onMouseOut?: (event: React.MouseEvent<any>) => void;
-    onMouseDown?: (event: React.MouseEvent<any>) => void;
-  };
-
-export const AnimatedBox: React.FC<AnimatedBoxProps> = styled(motion.div)(
-  color,
-  space,
-  layout,
-  border,
-  boxShadow,
-  textAlign,
-  order,
-  flexbox,
-  flexGrow,
-  position,
-  background,
-  transform,
-  cursor,
-  overflow,
-  visibility,
-  typography
-);
+export const AnimatedBox = styled(motion.div)<AnimatedBoxProps>(addStyledProps);
 
 export default Box;

src/Breadcrumbs/Breadcrumbs.tsx

@@ -19,7 +19,7 @@ const insertSeparators = (items: JSX.Element[]) => {
 
 type BreadcrumbsProps = Omit<FlexProps, "size"> & { size?: ComponentSize };
 
-const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ size, children, ...props }) => {
+const Breadcrumbs = ({ size, children, ...props }: BreadcrumbsProps) => {
   const componentSize = useComponentSize(size);
 
   const allItems = React.Children.map(children, (child, index) => {

src/Card/CardSet.tsx

@@ -5,7 +5,7 @@ import { Box } from "../Box";
 import { BoxProps } from "../Box/Box";
 import Card from "./Card";
 
-const UnstyledCardSet: React.FC<BoxProps> = ({ children = [], ...props }) => <Box {...props}>{children}</Box>;
+const UnstyledCardSet = ({ children = [], ...props }: BoxProps) => <Box {...props}>{children}</Box>;
 
 const CardSet = styled(UnstyledCardSet)(space, ({ theme }) => ({
   [`${Card}`]: {

src/Divider/Divider.tsx

@@ -2,9 +2,7 @@ import React from "react";
 import { Box } from "../Box";
 import { BoxProps } from "../Box/Box";
 
-type DividerProps = BoxProps;
-
-const Divider = ({ borderColor = "lightGrey", ...props }: DividerProps) => (
+const Divider = ({ borderColor = "lightGrey", ...props }: BoxProps) => (
   <Box as="hr" borderTop="1px solid" borderColor={borderColor} {...props} />
 );
 

src/Flex/Flex.tsx

@@ -1,6 +1,6 @@
-import React, { CSSProperties } from "react";
+import { CSSProperties } from "react";
 import styled from "styled-components";
-import { flexbox, system } from "styled-system";
+import { system } from "styled-system";
 import { Box } from "../Box";
 import { BoxProps } from "../Box/Box";
 
@@ -10,7 +10,7 @@ export type FlexProps = BoxProps & {
   columnGap?: CSSProperties["columnGap"];
 };
 
-const Flex: React.FC<FlexProps> = styled(Box)(
+const Flex = styled(Box)<FlexProps>(
   {
     display: "flex",
   },
@@ -27,8 +27,7 @@ const Flex: React.FC<FlexProps> = styled(Box)(
       property: "columnGap",
       scale: "space",
     },
-  }),
-  flexbox
+  })
 );
 
 export default Flex;