rms styled-system and styled-components usage from Truncate

Author: mperrotti

packages/react/src/Truncate/Truncate.docs.json

@@ -41,11 +41,6 @@
       "name": "as",
       "type": "React.ElementType",
       "defaultValue": "'div'"
-    },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
     }
   ],
   "subcomponents": []

packages/react/src/Truncate/Truncate.module.css

@@ -1,4 +1,6 @@
 .Truncate {
+  --truncate-max-width: ;
+
   display: inherit;
   overflow: hidden;
   text-overflow: ellipsis;

packages/react/src/Truncate/Truncate.tsx

@@ -1,7 +1,5 @@
 import React from 'react'
 import {clsx} from 'clsx'
-import type {MaxWidthProps} from 'styled-system'
-import type {SxProp} from '../sx'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 import classes from './Truncate.module.css'
@@ -10,11 +8,11 @@ type TruncateProps = React.HTMLAttributes<HTMLElement> & {
   title: string
   inline?: boolean
   expandable?: boolean
-} & MaxWidthProps &
-  SxProp
+  maxWidth?: number
+}
 
 const Truncate = React.forwardRef(function Truncate(
-  {as, children, className, title, inline, expandable, maxWidth = 125, style, sx, ...rest},
+  {as, children, className, title, inline, expandable, maxWidth = 125, style, ...rest},
   ref,
 ) {
   return (
@@ -33,7 +31,6 @@ const Truncate = React.forwardRef(function Truncate(
             typeof maxWidth === 'number' ? `${maxWidth}px` : typeof maxWidth === 'string' ? maxWidth : undefined,
         } as React.CSSProperties
       }
-      sx={sx}
     >
       {children}
     </BoxWithFallback>