fix(striker-ui): isolate styled OutlinedInput

striker-ui/components/Files/FileInfo.tsx

@@ -8,8 +8,6 @@ import {
   inputLabelClasses,
   MenuItem,
   menuItemClasses,
-  OutlinedInput,
-  outlinedInputClasses,
   Select,
   selectClasses,
   styled,
@@ -27,10 +25,11 @@ import {
   GREY,
   RED,
   TEXT,
-  UNSELECTED,
 } from '../../lib/consts/DEFAULT_THEME';
 import { UPLOAD_FILE_TYPES_ARRAY } from '../../lib/consts/UPLOAD_FILE_TYPES';
 
+import OutlinedInput from '../OutlinedInput';
+
 type FileInfoProps = Pick<FileDetailMetadata, 'fileName' | 'fileLocations'> &
   Partial<Pick<FileDetailMetadata, 'fileType'>> & {
     isReadonly?: boolean;
@@ -53,32 +52,6 @@ const StyledInputLabel = styled(InputLabel)({
   },
 });
 
-const StyledOutlinedInput = styled(OutlinedInput)({
-  color: GREY,
-
-  [`& .${outlinedInputClasses.notchedOutline}`]: {
-    borderColor: UNSELECTED,
-  },
-
-  '&:hover': {
-    [`& .${outlinedInputClasses.notchedOutline}`]: {
-      borderColor: GREY,
-    },
-  },
-
-  [`&.${outlinedInputClasses.focused}`]: {
-    color: TEXT,
-
-    [`& .${outlinedInputClasses.notchedOutline}`]: {
-      borderColor: GREY,
-
-      '& legend': {
-        paddingRight: '1.2em',
-      },
-    },
-  },
-});
-
 const StyledSelect = styled(Select)({
   [`& .${selectClasses.icon}`]: {
     color: GREY,
@@ -134,7 +107,7 @@ const FileInfo = (
         <StyledInputLabel htmlFor={fileNameElementId} variant="outlined">
           {fileNameElementLabel}
         </StyledInputLabel>
-        <StyledOutlinedInput
+        <OutlinedInput
           defaultValue={fileName}
           disabled={isReadonly}
           id={fileNameElementId}
@@ -153,7 +126,7 @@ const FileInfo = (
             defaultValue={fileType}
             disabled={isReadonly}
             id={fileTypeElementId}
-            input={<StyledOutlinedInput label={fileTypeElementLabel} />}
+            input={<OutlinedInput label={fileTypeElementLabel} />}
             onChange={({ target: { value } }) =>
               onChange?.call(null, { fileType: value as FileType })
             }

striker-ui/components/OutlinedInput/OutlinedInput.tsx

@@ -0,0 +1,35 @@
+import {
+  OutlinedInput as MUIOutlinedInput,
+  outlinedInputClasses as muiOutlinedInputClasses,
+  styled,
+} from '@mui/material';
+
+import { GREY, TEXT, UNSELECTED } from '../../lib/consts/DEFAULT_THEME';
+
+const OutlinedInput = styled(MUIOutlinedInput)({
+  color: GREY,
+
+  [`& .${muiOutlinedInputClasses.notchedOutline}`]: {
+    borderColor: UNSELECTED,
+  },
+
+  '&:hover': {
+    [`& .${muiOutlinedInputClasses.notchedOutline}`]: {
+      borderColor: GREY,
+    },
+  },
+
+  [`&.${muiOutlinedInputClasses.focused}`]: {
+    color: TEXT,
+
+    [`& .${muiOutlinedInputClasses.notchedOutline}`]: {
+      borderColor: GREY,
+
+      '& legend': {
+        paddingRight: '1.2em',
+      },
+    },
+  },
+});
+
+export default OutlinedInput;

striker-ui/components/OutlinedInput/index.tsx

@@ -0,0 +1,3 @@
+import OutlinedInput from './OutlinedInput';
+
+export default OutlinedInput;