Add transient props to Box, Flex and Typography

packages/strapi-design-system/src/Box/Box.tsx

@@ -128,11 +128,57 @@ const transientProps: Partial<Record<keyof BoxProps, boolean>> = {
   cursor: true,
   height: true,
   width: true,
+  borderColor: true,
+  hiddenS: true,
+  hiddenXS: true,
+  margin: true,
+  marginLeft: true,
+  marginBottom: true,
+  marginRight: true,
+  marginTop: true,
+  padding: true,
+  paddingLeft: true,
+  paddingRight: true,
+  paddingTop: true,
+  paddingBottom: true,
+  shadow: true,
+  zIndex: true,
+  overflow: true,
+  transition: true,
+  transform: true,
+  animation: true,
+  pointerEvents: true,
+  display: true,
+  position: true,
+  top: true,
+  left: true,
+  bottom: true,
+  right: true,
+  hasRadius: true,
+  borderStyle: true,
+  borderWidth: true,
+  shrink: true,
+  grow: true,
+  basis: true,
+  flex: true,
+  textAlign: true,
+  textTransform: true,
+  lineHeight: true,
+  _hover: true,
+  background: true,
+  fontSize: true,
+  maxWidth: true,
+  minWidth: true,
+  maxHeight: true,
+  minHeight: true,
+  borderRadius: true,
+  as: true,
+  forwardedAs: true,
 };
 
-export const Box = styled.div.withConfig<BoxProps>({
-  shouldForwardProp: (prop, defPropValFN) => !transientProps[prop as keyof BoxProps] && defPropValFN(prop),
-})`
+export const Box = styled.div.withConfig({
+  shouldForwardProp: (prop) => !transientProps[prop as keyof BoxProps],
+})<BoxProps>`
   // Font
   font-size: ${({ fontSize, theme }) => extractStyleFromTheme(theme.fontSizes, fontSize, fontSize)};
 

packages/strapi-design-system/src/Flex/Flex.tsx

@@ -8,6 +8,11 @@ import handleResponsiveValues, { ResponsiveValue } from '../helpers/handleRespon
  */
 const transientProps: Partial<Record<keyof FlexProps, boolean>> = {
   direction: true,
+  gap: true,
+  inline: true,
+  alignItems: true,
+  justifyContent: true,
+  wrap: true,
 };
 
 export type FlexProps<TElement extends keyof JSX.IntrinsicElements = 'div'> = BoxProps<TElement> & {
@@ -22,9 +27,9 @@ export type FlexProps<TElement extends keyof JSX.IntrinsicElements = 'div'> = Bo
   wrap?: CSSProperties['flexWrap'];
 };
 
-export const Flex = styled(Box).withConfig<FlexProps>({
-  shouldForwardProp: (prop, defPropValFN) => !transientProps[prop as keyof FlexProps] && defPropValFN(prop),
-})`
+export const Flex = styled(Box).withConfig({
+  shouldForwardProp: (prop) => !transientProps[prop as keyof FlexProps],
+})<FlexProps>`
   align-items: ${({ alignItems = 'center' }) => alignItems};
   display: ${({ display = 'flex', inline }) => (inline ? 'inline-flex' : display)};
   flex-direction: ${({ direction = 'row' }) => direction};

packages/strapi-design-system/src/Pagination/components.tsx

@@ -24,9 +24,9 @@ const transientProps = {
   active: true,
 };
 
-const LinkWrapper = styled(BaseLink).withConfig<PaginationLinkProps>({
-  shouldForwardProp: (prop, defPropValFN) => !transientProps[prop] && defPropValFN(prop),
-})`
+const LinkWrapper = styled(BaseLink).withConfig({
+  shouldForwardProp: (prop) => !transientProps[prop],
+})<PaginationLinkProps>`
   padding: ${({ theme }) => theme.spaces[3]};
   border-radius: ${({ theme }) => theme.borderRadius};
   box-shadow: ${({ active, theme }) => (active ? theme.shadows.filterShadow : undefined)};

packages/strapi-design-system/src/Typography/Typography.tsx

@@ -10,6 +10,13 @@ import { DefaultThemeOrCSSProp } from '../types';
 const transientProps: Partial<Record<keyof TypographyProps, boolean>> = {
   fontSize: true,
   fontWeight: true,
+  lineHeight: true,
+  textAlign: true,
+  textColor: true,
+  textDecoration: true,
+  textTransform: true,
+  ellipsis: true,
+  variant: true,
 };
 
 export type TypographyProps<TElement extends keyof JSX.IntrinsicElements = 'span'> =
@@ -28,9 +35,9 @@ export type TypographyProps<TElement extends keyof JSX.IntrinsicElements = 'span
     variant?: (typeof TEXT_VARIANTS)[number];
   };
 
-export const Typography = styled.span.withConfig<TypographyProps>({
-  shouldForwardProp: (prop, defPropValFN) => !transientProps[prop as keyof TypographyProps] && defPropValFN(prop),
-})`
+export const Typography = styled.span.withConfig({
+  shouldForwardProp: (prop) => !transientProps[prop],
+})<TypographyProps>`
   ${variantStyle}
   ${ellipsisStyle}