@aehrc/smart-forms-renderer 1.0.0-alpha.42.dev9 → 1.0.0-alpha.44

package/lib/components/FormComponents/DecimalItem/DecimalField.js

@@ -12,7 +12,7 @@ function DecimalField(props) {
             htmlInput: { inputMode: 'numeric', pattern: '[0-9]*' },
             input: {
                 readOnly: readOnly && readOnlyVisualStyle === 'readonly',
-                endAdornment: (_jsxs(InputAdornment, Object.assign({ position: 'end' }, { children: [_jsx(FadingCheckIcon, { fadeIn: calcExpUpdated, disabled: readOnly }), _jsx(DisplayUnitText, Object.assign({ readOnly: readOnly }, { children: displayUnit }))] })))
+                endAdornment: (_jsxs(InputAdornment, Object.assign({ position: "end" }, { children: [_jsx(FadingCheckIcon, { fadeIn: calcExpUpdated, disabled: readOnly }), _jsx(DisplayUnitText, Object.assign({ readOnly: readOnly }, { children: displayUnit }))] })))
             }
         }, helperText: feedback, "data-test": "q-item-decimal-field" }));
 }

package/lib/components/FormComponents/DecimalItem/DecimalField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DecimalField.js","sourceRoot":"","sources":["../../../../src/components/FormComponents/DecimalItem/DecimalField.tsx"],"names":[],"mappings":";AAkBA,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAC1D,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAe3D,SAAS,YAAY,CAAC,KAAwB;IAC5C,MAAM,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,aAAa,EACb,WAAW,EACX,WAAW,EACX,QAAQ,EACR,cAAc,EACd,QAAQ,EACR,aAAa,EACd,GAAG,KAAK,CAAC;IAEV,MAAM,mBAAmB,GAAG,uBAAuB,CAAC,GAAG,CAAC,mBAAmB,EAAE,CAAC;IAC9E,MAAM,cAAc,GAAG,uBAAuB,CAAC,GAAG,CAAC,cAAc,EAAE,CAAC;IAEpE,OAAO,CACL,KAAC,iBAAiB,IAChB,EAAE,EAAE,QAAQ,GAAG,GAAG,GAAG,MAAM,EAC3B,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,CAAC,CAAC,QAAQ,EACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EACtD,QAAQ,EAAE,QAAQ,IAAI,mBAAmB,KAAK,UAAU,EACxD,KAAK,EAAE,aAAa,EACpB,WAAW,EAAE,WAAW,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,EACrD,cAAc,EAAE,cAAc,EAC9B,SAAS,QACT,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE;YACT,SAAS,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE;YACtD,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ,IAAI,mBAAmB,KAAK,UAAU;gBACxD,YAAY,EAAE,CACZ,MAAC,cAAc,kBAAC,QAAQ,EAAE,KAAK,iBAC7B,KAAC,eAAe,IAAC,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,QAAQ,GAAI,EAC/D,KAAC,eAAe,kBAAC,QAAQ,EAAE,QAAQ,gBAAG,WAAW,IAAmB,KACrD,CAClB;aACF;SACF,EACD,UAAU,EAAE,QAAQ,eACV,sBAAsB,GAChC,CACH,CAAC;AACJ,CAAC;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"DecimalField.js","sourceRoot":"","sources":["../../../../src/components/FormComponents/DecimalItem/DecimalField.tsx"],"names":[],"mappings":";AAkBA,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAC1D,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAe3D,SAAS,YAAY,CAAC,KAAwB;IAC5C,MAAM,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,aAAa,EACb,WAAW,EACX,WAAW,EACX,QAAQ,EACR,cAAc,EACd,QAAQ,EACR,aAAa,EACd,GAAG,KAAK,CAAC;IAEV,MAAM,mBAAmB,GAAG,uBAAuB,CAAC,GAAG,CAAC,mBAAmB,EAAE,CAAC;IAC9E,MAAM,cAAc,GAAG,uBAAuB,CAAC,GAAG,CAAC,cAAc,EAAE,CAAC;IAEpE,OAAO,CACL,KAAC,iBAAiB,IAChB,EAAE,EAAE,QAAQ,GAAG,GAAG,GAAG,MAAM,EAC3B,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,CAAC,CAAC,QAAQ,EACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EACtD,QAAQ,EAAE,QAAQ,IAAI,mBAAmB,KAAK,UAAU,EACxD,KAAK,EAAE,aAAa,EACpB,WAAW,EAAE,WAAW,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,EACrD,cAAc,EAAE,cAAc,EAC9B,SAAS,QACT,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE;YACT,SAAS,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE;YACtD,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ,IAAI,mBAAmB,KAAK,UAAU;gBACxD,YAAY,EAAE,CACZ,MAAC,cAAc,kBAAC,QAAQ,EAAC,KAAK,iBAC5B,KAAC,eAAe,IAAC,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,QAAQ,GAAI,EAC/D,KAAC,eAAe,kBAAC,QAAQ,EAAE,QAAQ,gBAAG,WAAW,IAAmB,KACrD,CAClB;aACF;SACF,EACD,UAAU,EAAE,QAAQ,eACV,sBAAsB,GAChC,CACH,CAAC;AACJ,CAAC;AAED,eAAe,YAAY,CAAC"}

package/lib/components/FormComponents/ItemParts/DisplayUnitText.js

@@ -5,7 +5,7 @@ function DisplayUnitText(props) {
     const { readOnly, children } = props;
     const readOnlyVisualStyle = useRendererStylingStore.use.readOnlyVisualStyle();
     const readOnlyTextColor = readOnlyVisualStyle === 'disabled' ? 'text.disabled' : 'text.secondary';
-    return (_jsx(Typography, Object.assign({ color: readOnly ? readOnlyTextColor : 'text.secondary' }, { children: children })));
+    return (_jsx(Typography, Object.assign({ sx: { m: 0 }, color: readOnly ? readOnlyTextColor : 'text.secondary' }, { children: children })));
 }
 export default DisplayUnitText;
 //# sourceMappingURL=DisplayUnitText.js.map

package/lib/components/FormComponents/ItemParts/DisplayUnitText.js.map

@@ -1 +1 @@
-{"version":3,"file":"DisplayUnitText.js","sourceRoot":"","sources":["../../../../src/components/FormComponents/ItemParts/DisplayUnitText.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAO1D,SAAS,eAAe,CAAC,KAA2B;IAClD,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAErC,MAAM,mBAAmB,GAAG,uBAAuB,CAAC,GAAG,CAAC,mBAAmB,EAAE,CAAC;IAE9E,MAAM,iBAAiB,GAAG,mBAAmB,KAAK,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAElG,OAAO,CACL,KAAC,UAAU,kBAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,gBAAG,QAAQ,IAAc,CAC5F,CAAC;AACJ,CAAC;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"DisplayUnitText.js","sourceRoot":"","sources":["../../../../src/components/FormComponents/ItemParts/DisplayUnitText.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAO1D,SAAS,eAAe,CAAC,KAA2B;IAClD,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAErC,MAAM,mBAAmB,GAAG,uBAAuB,CAAC,GAAG,CAAC,mBAAmB,EAAE,CAAC;IAE9E,MAAM,iBAAiB,GAAG,mBAAmB,KAAK,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAElG,OAAO,CACL,KAAC,UAAU,kBACT,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EACZ,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,gBACrD,QAAQ,IACE,CACd,CAAC;AACJ,CAAC;AAED,eAAe,eAAe,CAAC"}

package/lib/components/FormComponents/QuantityItem/QuantityComparatorField.js

@@ -11,11 +11,7 @@ function QuantityComparatorField(props) {
     if (hideQuantityComparatorField) {
         return null;
     }
-    return (_jsxs(Box, { children: [_jsx(Autocomplete, { id: itemType + '-' + linkId + '-comparator', value: valueSelect !== null && valueSelect !== void 0 ? valueSelect : null, options: options, onChange: (_, newValue) => onChange(newValue), autoHighlight: true, sx: { width: 88 }, disabled: readOnly && readOnlyVisualStyle === 'disabled', readOnly: readOnly && readOnlyVisualStyle === 'readonly', size: "small", renderInput: (params) => (_jsx(MuiTextField, Object.assign({ sx: { width: 88 } }, params, { slotProps: {
-                        input: {
-                            readOnly: readOnly && readOnlyVisualStyle === 'readonly'
-                        }
-                    } }))) }), _jsx(Typography, Object.assign({ variant: "caption", color: "text.secondary" }, { children: "(optional)" }))] }));
+    return (_jsxs(Box, { children: [_jsx(Autocomplete, { id: itemType + '-' + linkId + '-comparator', value: valueSelect !== null && valueSelect !== void 0 ? valueSelect : null, options: options, onChange: (_, newValue) => onChange(newValue), autoHighlight: true, sx: { width: 88 }, disabled: readOnly && readOnlyVisualStyle === 'disabled', readOnly: readOnly && readOnlyVisualStyle === 'readonly', size: "small", renderInput: (params) => _jsx(MuiTextField, Object.assign({ sx: { width: 88 } }, params)) }), _jsx(Typography, Object.assign({ variant: "caption", color: "text.secondary" }, { children: "(optional)" }))] }));
 }
 export default QuantityComparatorField;
 //# sourceMappingURL=QuantityComparatorField.js.map

package/lib/components/FormComponents/QuantityItem/QuantityComparatorField.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuantityComparatorField.js","sourceRoot":"","sources":["../../../../src/components/FormComponents/QuantityItem/QuantityComparatorField.tsx"],"names":[],"mappings":";AACA,OAAO,YAAY,MAAM,4BAA4B,CAAC;AAEtD,OAAO,YAAY,MAAM,0BAA0B,CAAC;AACpD,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAW1D,SAAS,uBAAuB,CAAC,KAAmC;IAClE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE7E,MAAM,mBAAmB,GAAG,uBAAuB,CAAC,GAAG,CAAC,mBAAmB,EAAE,CAAC;IAC9E,MAAM,2BAA2B,GAAG,uBAAuB,CAAC,GAAG,CAAC,2BAA2B,EAAE,CAAC;IAC9F,IAAI,2BAA2B,EAAE;QAC/B,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,MAAC,GAAG,eACF,KAAC,YAAY,IACX,EAAE,EAAE,QAAQ,GAAG,GAAG,GAAG,MAAM,GAAG,aAAa,EAC3C,KAAK,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,IAAI,EAC1B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,QAAkC,CAAC,EACvE,aAAa,QACb,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EACjB,QAAQ,EAAE,QAAQ,IAAI,mBAAmB,KAAK,UAAU,EACxD,QAAQ,EAAE,QAAQ,IAAI,mBAAmB,KAAK,UAAU,EACxD,IAAI,EAAC,OAAO,EACZ,WAAW,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,KAAC,YAAY,kBACX,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,IACb,MAAM,IACV,SAAS,EAAE;wBACT,KAAK,EAAE;4BACL,QAAQ,EAAE,QAAQ,IAAI,mBAAmB,KAAK,UAAU;yBACzD;qBACF,IACD,CACH,GACD,EACF,KAAC,UAAU,kBAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,gBAAgB,gCAEvC,IACT,CACP,CAAC;AACJ,CAAC;AAED,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"QuantityComparatorField.js","sourceRoot":"","sources":["../../../../src/components/FormComponents/QuantityItem/QuantityComparatorField.tsx"],"names":[],"mappings":";AACA,OAAO,YAAY,MAAM,4BAA4B,CAAC;AAEtD,OAAO,YAAY,MAAM,0BAA0B,CAAC;AACpD,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAW1D,SAAS,uBAAuB,CAAC,KAAmC;IAClE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE7E,MAAM,mBAAmB,GAAG,uBAAuB,CAAC,GAAG,CAAC,mBAAmB,EAAE,CAAC;IAC9E,MAAM,2BAA2B,GAAG,uBAAuB,CAAC,GAAG,CAAC,2BAA2B,EAAE,CAAC;IAC9F,IAAI,2BAA2B,EAAE;QAC/B,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,MAAC,GAAG,eACF,KAAC,YAAY,IACX,EAAE,EAAE,QAAQ,GAAG,GAAG,GAAG,MAAM,GAAG,aAAa,EAC3C,KAAK,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,IAAI,EAC1B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,QAAkC,CAAC,EACvE,aAAa,QACb,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EACjB,QAAQ,EAAE,QAAQ,IAAI,mBAAmB,KAAK,UAAU,EACxD,QAAQ,EAAE,QAAQ,IAAI,mBAAmB,KAAK,UAAU,EACxD,IAAI,EAAC,OAAO,EACZ,WAAW,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,KAAC,YAAY,kBAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,IAAM,MAAM,EAAI,GACxE,EACF,KAAC,UAAU,kBAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,gBAAgB,gCAEvC,IACT,CACP,CAAC;AACJ,CAAC;AAED,eAAe,uBAAuB,CAAC"}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@aehrc/smart-forms-renderer",
-  "version": "1.0.0-alpha.42.dev9",
+  "version": "1.0.0-alpha.44",
   "description": "FHIR Structured Data Captured (SDC) rendering engine for Smart Forms",
   "main": "lib/index.js",
   "scripts": {
-    "compile": "tsup src/index.ts --format cjs,esm --dts --clean --sourcemap",
-    "watch": "tsup src/index.ts --format cjs,esm --dts --clean --sourcemap --watch",
+    "compile": "tsc",
+    "watch": "tsc -w",
     "build": "npm run compile",
     "test": "jest",
     "test:watch": "jest --watch",

package/src/components/FormComponents/AttachmentItem/AttachmentField.tsx

@@ -61,7 +61,7 @@ function AttachmentField(props: AttachmentFieldProps) {
   return (
     <>
       <Stack rowGap={1} id={itemType + '-' + linkId}>
-        <Typography color={readOnly ? readOnlyTextColor : 'text.primary'}>
+        <Typography component="div" color={readOnly ? readOnlyTextColor : 'text.primary'}>
           An attachment must either have a file or a URL, or both.
         </Typography>
         <Box>
@@ -82,7 +82,10 @@ function AttachmentField(props: AttachmentFieldProps) {
         />
 
         <Box>
-          <Typography variant="body2" color={readOnly ? readOnlyTextColor : 'text.primary'}>
+          <Typography
+            component="div"
+            variant="body2"
+            color={readOnly ? readOnlyTextColor : 'text.primary'}>
             File name (optional)
           </Typography>
           <StandardTextField
@@ -104,7 +107,7 @@ function AttachmentField(props: AttachmentFieldProps) {
         </Box>
 
         {uploadedFile && url ? (
-          <Typography color={readOnly ? readOnlyTextColor : 'text.primary'}>
+          <Typography component="div" color={readOnly ? readOnlyTextColor : 'text.primary'}>
             Ensure that the attached file and URL has the same content.
           </Typography>
         ) : null}

package/src/components/FormComponents/AttachmentItem/AttachmentFileDropBox.tsx

@@ -61,12 +61,18 @@ function AttachmentFileDropBox(props: AttachmentFileDropBoxProps) {
       textFieldWidth={textFieldWidth}
       isTabled={isTabled}>
       <Box p={1.5}>
-        <Typography color={readOnly ? readOnlyTextColor : 'text.primary'}>{boxMessage}</Typography>
+        <Typography component="div" color={readOnly ? readOnlyTextColor : 'text.primary'}>
+          {boxMessage}
+        </Typography>
 
         {file ? (
           <Box pt={1}>
-            <Typography fontSize={10}>Size: {getFileSize(file.size.toString() ?? '0')}</Typography>
-            <Typography fontSize={10}>Type: {file.type}</Typography>
+            <Typography component="div" fontSize={10}>
+              Size: {getFileSize(file.size.toString() ?? '0')}
+            </Typography>
+            <Typography component="div" fontSize={10}>
+              Type: {file.type}
+            </Typography>
           </Box>
         ) : null}
       </Box>

package/src/components/FormComponents/AttachmentItem/AttachmentUrlField.tsx

@@ -45,7 +45,10 @@ function AttachmentUrlField(props: AttachmentUrlFieldProps) {
 
   return (
     <Box>
-      <Typography variant="body2" color={readOnly ? 'text.secondary' : 'text.primary'}>
+      <Typography
+        component="div"
+        variant="body2"
+        color={readOnly ? 'text.secondary' : 'text.primary'}>
         URL
       </Typography>
       <Stack direction="row" alignItems="center">

package/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerValueSetFields.tsx

@@ -67,7 +67,7 @@ function ChoiceCheckboxAnswerValueSetFields(props: ChoiceCheckboxAnswerValueSetF
     return (
       <StyledAlert color="error">
         <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
-        <Typography>
+        <Typography component="div">
           There was an error fetching options from the terminology server for{' '}
           {terminologyError.answerValueSet}
         </Typography>

package/src/components/FormComponents/ChoiceItems/ChoiceItemSwitcher.tsx

@@ -165,7 +165,7 @@ function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
       }
     default:
       return (
-        <Typography>
+        <Typography component="div">
           Something has went wrong when parsing item {qItem.linkId} - {qItem.text}
         </Typography>
       );

package/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerValueSetFields.tsx

@@ -110,7 +110,7 @@ function ChoiceRadioAnswerValueSetFields(props: ChoiceRadioAnswerValueSetFieldsP
     return (
       <StyledAlert color="error">
         <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
-        <Typography>
+        <Typography component="div">
           There was an error fetching options from the terminology server for{' '}
           {terminologyError.answerValueSet}
         </Typography>
@@ -121,7 +121,9 @@ function ChoiceRadioAnswerValueSetFields(props: ChoiceRadioAnswerValueSetFieldsP
   return (
     <StyledAlert color="error">
       <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
-      <Typography>Unable to fetch options from the questionnaire or launch context</Typography>
+      <Typography component="div">
+        Unable to fetch options from the questionnaire or launch context
+      </Typography>
     </StyledAlert>
   );
 }

package/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerValueSetFields.tsx

@@ -113,7 +113,7 @@ function ChoiceSelectAnswerValueSetFields(props: ChoiceSelectAnswerValueSetField
     return (
       <StyledAlert color="error">
         <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
-        <Typography>
+        <Typography component="div">
           There was an error fetching options from the terminology server for{' '}
           {terminologyError.answerValueSet}
         </Typography>
@@ -124,7 +124,9 @@ function ChoiceSelectAnswerValueSetFields(props: ChoiceSelectAnswerValueSetField
   return (
     <StyledAlert color="error">
       <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
-      <Typography>Unable to fetch options from the questionnaire or launch context</Typography>
+      <Typography component="div">
+        Unable to fetch options from the questionnaire or launch context
+      </Typography>
     </StyledAlert>
   );
 }

package/src/components/FormComponents/DateTimeItems/CustomDateTimeItem/CustomTimeField.tsx

@@ -110,7 +110,7 @@ function CustomTimeField(props: CustomTimeFieldProps) {
             <MenuItem value="PM">PM</MenuItem>
           </Select>
         </Box>
-        <Typography variant="caption" color="error" sx={{ ml: 1.75, mt: -0.5 }}>
+        <Typography component="span" variant="caption" color="error" sx={{ ml: 1.75, mt: -0.5 }}>
           {isTabled ? '' : feedback}
         </Typography>
       </>

package/src/components/FormComponents/DecimalItem/DecimalField.tsx

@@ -72,7 +72,7 @@ function DecimalField(props: DecimalFieldProps) {
         input: {
           readOnly: readOnly && readOnlyVisualStyle === 'readonly',
           endAdornment: (
-            <InputAdornment position={'end'}>
+            <InputAdornment position="end">
               <FadingCheckIcon fadeIn={calcExpUpdated} disabled={readOnly} />
               <DisplayUnitText readOnly={readOnly}>{displayUnit}</DisplayUnitText>
             </InputAdornment>

package/src/components/FormComponents/DisplayItem/DisplayInstructions.tsx

@@ -30,7 +30,10 @@ const DisplayInstructions = memo(function DisplayInstructions(props: DisplayInst
 
   return children ? (
     <DisplayInstructionsWrapper>
-      <Typography variant="caption" color={readOnly ? 'text.secondary' : 'text.primary'}>
+      <Typography
+        component="span"
+        variant="caption"
+        color={readOnly ? 'text.secondary' : 'text.primary'}>
         <>{children}</>
       </Typography>
     </DisplayInstructionsWrapper>

package/src/components/FormComponents/GridGroup/GridRow.tsx

@@ -64,7 +64,9 @@ function GridRow(props: GridRowProps) {
   return (
     <>
       <GridTextTableCell>
-        <Typography fontWeight="bold">{qItem.text}</Typography>
+        <Typography component="span" fontWeight="bold">
+          {qItem.text}
+        </Typography>
       </GridTextTableCell>
       {rowQItems.map((cellQItem, index) => {
         const cellQrItem = qrItemsByIndex[index];

package/src/components/FormComponents/GroupItem/PageButtonWrapper.tsx

@@ -68,7 +68,7 @@ const PageButtonsWrapper = memo(function PageButtonsWrapper(props: PageButtonsWr
   return (
     <Box display="flex" mt={3} gap={2} alignItems="center">
       <Box flexGrow={1} />
-      <Typography color="text.secondary">
+      <Typography component="span" color="text.secondary">
         Page {`${currentPageIndex + 1} / ${numOfVisiblePages}`}
       </Typography>
       <PreviousPageButton

package/src/components/FormComponents/ItemParts/DisplayUnitText.tsx

@@ -15,7 +15,9 @@ function DisplayUnitText(props: DisplayUnitTextProps) {
   const readOnlyTextColor = readOnlyVisualStyle === 'disabled' ? 'text.disabled' : 'text.secondary';
 
   return (
-    <Typography color={readOnly ? readOnlyTextColor : 'text.secondary'}>{children}</Typography>
+    <Typography component="span" color={readOnly ? readOnlyTextColor : 'text.secondary'}>
+      {children}
+    </Typography>
   );
 }
 

package/src/components/FormComponents/ItemParts/FlyoverHoverCard.tsx

@@ -58,7 +58,9 @@ function FlyoverHoverCard(props: FlyoverHoverCardProps) {
       >
         {childrenIsString ? (
           <Box sx={{ p: 2, maxWidth: 550, bgcolor: 'background.paper', boxShadow: 8 }}>
-            <Typography variant="body2">{children}</Typography>
+            <Typography component="span" variant="body2">
+              {children}
+            </Typography>
           </Box>
         ) : (
           <Box>{children}</Box>

package/src/components/FormComponents/ItemParts/RequiredAsterisk.tsx

@@ -32,7 +32,7 @@ function RequiredAsterisk(props: RequiredAsteriskProps) {
   const readOnlyTextColor = readOnlyVisualStyle === 'disabled' ? 'text.disabled' : 'text.secondary';
 
   return (
-    <Typography color={readOnly ? readOnlyTextColor : 'red'} {...rest}>
+    <Typography component="span" color={readOnly ? readOnlyTextColor : 'red'} {...rest}>
       {children}
     </Typography>
   );

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceCheckboxAnswerValueSetFields.tsx

@@ -97,7 +97,7 @@ function OpenChoiceCheckboxAnswerValueSetFields(props: OpenChoiceCheckboxFieldsP
     return (
       <StyledAlert color="error">
         <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
-        <Typography>
+        <Typography component="div">
           There was an error fetching options from the terminology server for{' '}
           {terminologyError.answerValueSet}
         </Typography>

package/src/components/FormComponents/QuantityItem/QuantityComparatorField.tsx

@@ -37,17 +37,7 @@ function QuantityComparatorField(props: QuantityComparatorFieldProps) {
         disabled={readOnly && readOnlyVisualStyle === 'disabled'}
         readOnly={readOnly && readOnlyVisualStyle === 'readonly'}
         size="small"
-        renderInput={(params) => (
-          <MuiTextField
-            sx={{ width: 88 }}
-            {...params}
-            slotProps={{
-              input: {
-                readOnly: readOnly && readOnlyVisualStyle === 'readonly'
-              }
-            }}
-          />
-        )}
+        renderInput={(params) => <MuiTextField sx={{ width: 88 }} {...params} />}
       />
       <Typography variant="caption" color="text.secondary">
         (optional)

package/src/components/Tabs/FormBodySingleTab.tsx

@@ -57,7 +57,7 @@ const FormBodySingleTab = memo(function FormBodySingleTab(props: FormBodySingleT
         <ListItemText
           primary={
             <Box display="flex" alignItems="center" justifyContent="space-between">
-              <Typography fontWeight={600} fontSize="0.8125rem">
+              <Typography component="span" fontWeight={600} fontSize="0.8125rem">
                 {tabLabel}
               </Typography>
               <Box display="flex" minHeight={24} minWidth={24} ml={1}>