diff --git a/striker-ui/components/FormSummary.tsx b/striker-ui/components/FormSummary.tsx
index c7c752ec..dfaf552d 100644
--- a/striker-ui/components/FormSummary.tsx
+++ b/striker-ui/components/FormSummary.tsx
@@ -1,9 +1,10 @@
import {
+ Box,
List as MUIList,
ListItem as MUIListItem,
capitalize,
} from '@mui/material';
-import { FC, ReactElement, createElement } from 'react';
+import { FC, ReactElement } from 'react';
import FlexBox from './FlexBox';
import { BodyText, MonoText, SensitiveText } from './Text';
@@ -15,13 +16,24 @@ const capEntryLabel: CapFormEntryLabel = (value) => {
return capitalize(lcased);
};
-const renderEntryValueWithPassword: RenderFormValueFunction = ({
- entry,
- key,
-}) => {
- const textElement = /passw/i.test(key) ? SensitiveText : MonoText;
+const renderEntryValueWithMono: RenderFormValueFunction = ({ entry }) => (
+ {String(entry)}
+);
- return createElement(textElement, { monospaced: true }, String(entry));
+const renderEntryValueWithPassword: RenderFormValueFunction = (args) => {
+ const { entry, key } = args;
+
+ return /passw/i.test(key) ? (
+
+ {String(entry)}
+
+ ) : (
+ renderEntryValueWithMono(args)
+ );
};
const buildEntryList = ({
@@ -109,7 +121,9 @@ const FormSummary = ({
renderEntry = ({ depth, entry, getLabel, key, nest, renderValue }) => (
{getLabel({ cap: capEntryLabel, depth, entry, key })}
- {!nest && renderValue({ depth, entry, key })}
+
+ {!nest && renderValue({ depth, entry, key })}
+
),
// Prop(s) that rely on other(s).
@@ -120,11 +134,9 @@ const FormSummary = ({
return none;
}
- return hasPassword ? (
- renderEntryValueWithPassword(args)
- ) : (
- {String(entry)}
- );
+ return hasPassword
+ ? renderEntryValueWithPassword(args)
+ : renderEntryValueWithMono(args);
},
}: FormSummaryProps): ReturnType>> =>
buildEntryList({