fixes typescript errors, removes 'sx' prop from TextInput

Author: mperrotti

packages/react/src/Breadcrumbs/Breadcrumbs.dev.stories.module.css

@@ -0,0 +1,10 @@
+.EditableTextInput {
+  min-width: 120px;
+  max-width: 180px;
+  font-size: inherit;
+  border: var(--borderWidth-thin) dashed var(--borderColor-muted);
+}
+
+.EditableTextInput:focus {
+  border: var(--borderWidth-thin) solid var(--borderColor-accent-emphasis);
+}

packages/react/src/Breadcrumbs/Breadcrumbs.dev.stories.tsx

@@ -1,6 +1,7 @@
 import {useState} from 'react'
 import Breadcrumbs from '.'
 import TextInput from '../TextInput'
+import classes from './Breadcrumbs.dev.stories.module.css'
 
 export default {
   title: 'Components/Breadcrumbs/Dev',
@@ -146,15 +147,7 @@ export const WithEditableNameInput = () => (
       <TextInput
         defaultValue="Untitled Document"
         size="small"
-        sx={{
-          minWidth: '120px',
-          maxWidth: '180px',
-          fontSize: 'inherit',
-          border: '1px dashed var(--borderColor-muted)',
-          '&:focus': {
-            border: '1px solid var(--borderColor-accent-emphasis)',
-          },
-        }}
+        className={classes.EditableTextInput}
         aria-label="Edit document name"
       />
     </Breadcrumbs.Item>

packages/react/src/TextInput/TextInput.tsx

@@ -46,7 +46,6 @@ export type TextInputNonPassthroughProps = {
     | 'contrast'
     | 'disabled'
     | 'monospace'
-    | 'sx'
     | 'width'
     | 'maxWidth'
     | 'minWidth'
@@ -75,7 +74,6 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       loaderText = 'Loading',
       monospace,
       validationStatus,
-      sx: sxProp,
       size: sizeProp,
       onFocus,
       onBlur,
@@ -137,7 +135,6 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
         contrast={contrast}
         disabled={disabled}
         monospace={monospace}
-        sx={sxProp}
         size={sizeProp}
         width={widthProp}
         minWidth={minWidthProp}

packages/react/src/internal/components/TextInputWrapper.tsx

@@ -1,6 +1,5 @@
 import React, {type ComponentProps} from 'react'
 import {type ResponsiveValue} from 'styled-system'
-import type {SxProp} from '../../sx'
 import type {FormValidationStatus} from '../../utils/types/FormValidationStatus'
 import {clsx} from 'clsx'
 
@@ -30,7 +29,7 @@ type StyledTextInputBaseWrapperProps = {
   minWidth?: string | number | ResponsiveValue<string | number>
   /** @deprecated Update `max-width` using CSS modules or style. */
   maxWidth?: string | number | ResponsiveValue<string | number>
-} & SxProp
+}
 
 type StyledTextInputWrapperProps = {
   hasLeadingVisual?: boolean