@aehrc/smart-forms-renderer 0.4.0 → 0.6.0

package/src/components/FormComponents/{QItemOpenChoice/QItemOpenChoice.tsx → OpenChoiceItems/OpenChoiceItemSwitcher.tsx}

@@ -16,22 +16,22 @@
  */
 
 import React from 'react';
-import { QItemOpenChoiceControl } from '../../../interfaces/choice.enum';
+import { OpenChoiceItemControl } from '../../../interfaces/choice.enum';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import QItemOpenChoiceSelectAnswerOption from './QItemOpenChoiceSelectAnswerOption';
-import QItemOpenChoiceSelectAnswerValueSet from './QItemOpenChoiceSelectAnswerValueSet';
-import QItemOpenChoiceAutocomplete from './QItemOpenChoiceAutocomplete';
+import OpenChoiceSelectAnswerOptionItem from './OpenChoiceSelectAnswerOptionItem';
+import OpenChoiceSelectAnswerValueSetItem from './OpenChoiceSelectAnswerValueSetItem';
+import OpenChoiceAutocompleteItem from './OpenChoiceAutocompleteItem';
 import { getOpenChoiceControlType } from '../../../utils/openChoice';
 import { getChoiceOrientation } from '../../../utils/choice';
-import QItemOpenChoiceCheckboxAnswerOption from './QItemOpenChoiceCheckboxAnswerOption';
-import QItemOpenChoiceRadioAnswerOption from './QItemOpenChoiceRadioAnswerOption';
+import OpenChoiceCheckboxAnswerOptionItem from './OpenChoiceCheckboxAnswerOptionItem';
+import OpenChoiceRadioAnswerOptionItem from './OpenChoiceRadioAnswerOptionItem';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
 
-interface Props
+interface OpenChoiceItemSwitcherProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute {
@@ -39,14 +39,14 @@ interface Props
   qrItem: QuestionnaireResponseItem;
 }
 
-function QItemOpenChoice(props: Props) {
+function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
   const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
   const orientation = getChoiceOrientation(qItem);
 
   switch (getOpenChoiceControlType(qItem)) {
-    case QItemOpenChoiceControl.Checkbox:
+    case OpenChoiceItemControl.Checkbox:
       return (
-        <QItemOpenChoiceCheckboxAnswerOption
+        <OpenChoiceCheckboxAnswerOptionItem
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={qItem['repeats'] ?? false}
@@ -54,9 +54,9 @@ function QItemOpenChoice(props: Props) {
           orientation={orientation}
         />
       );
-    case QItemOpenChoiceControl.Radio:
+    case OpenChoiceItemControl.Radio:
       return (
-        <QItemOpenChoiceRadioAnswerOption
+        <OpenChoiceRadioAnswerOptionItem
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={qItem['repeats'] ?? false}
@@ -64,9 +64,9 @@ function QItemOpenChoice(props: Props) {
           orientation={orientation}
         />
       );
-    case QItemOpenChoiceControl.Autocomplete:
+    case OpenChoiceItemControl.Autocomplete:
       return (
-        <QItemOpenChoiceAutocomplete
+        <OpenChoiceAutocompleteItem
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}
@@ -74,10 +74,10 @@ function QItemOpenChoice(props: Props) {
           onQrItemChange={onQrItemChange}
         />
       );
-    case QItemOpenChoiceControl.Select:
+    case OpenChoiceItemControl.Select:
       if (qItem.answerValueSet) {
         return (
-          <QItemOpenChoiceSelectAnswerValueSet
+          <OpenChoiceSelectAnswerValueSetItem
             qItem={qItem}
             qrItem={qrItem}
             isRepeated={isRepeated}
@@ -87,7 +87,7 @@ function QItemOpenChoice(props: Props) {
         );
       } else {
         return (
-          <QItemOpenChoiceSelectAnswerOption
+          <OpenChoiceSelectAnswerOptionItem
             qItem={qItem}
             qrItem={qrItem}
             isRepeated={isRepeated}
@@ -101,4 +101,4 @@ function QItemOpenChoice(props: Props) {
   }
 }
 
-export default QItemOpenChoice;
+export default OpenChoiceItemSwitcher;

package/src/components/FormComponents/{QItemOpenChoice/QItemOpenChoiceRadioAnswerOption.tsx → OpenChoiceItems/OpenChoiceRadioAnswerOptionItem.tsx}

@@ -17,17 +17,17 @@
 
 import type { ChangeEvent } from 'react';
 import React, { useState } from 'react';
-import { Grid } from '@mui/material';
-import { QItemChoiceOrientation } from '../../../interfaces/choice.enum';
+import Grid from '@mui/material/Grid';
+import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import { getOpenLabelText } from '../../../utils/itemControl';
 import { QRadioGroup } from '../Item.styles';
 import { getOldOpenLabelAnswer } from '../../../utils/openChoice';
 import { FullWidthFormComponentBox } from '../../Box.styles';
-import QItemChoiceRadioSingle from '../QItemChoice/QItemChoiceRadioSingle';
+import ChoiceRadioSingle from '../ChoiceItems/ChoiceRadioSingle';
 import { findInAnswerOptions, getQrChoiceValue } from '../../../utils/choice';
-import QItemRadioButtonWithOpenLabel from '../ItemParts/QItemRadioButtonWithOpenLabel';
+import RadioButtonWithOpenLabel from '../ItemParts/RadioButtonWithOpenLabel';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import type {
   PropsWithIsRepeatedAttribute,
@@ -36,15 +36,15 @@ import type {
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 
-interface QItemOpenChoiceRadioProps
+interface OpenChoiceRadioAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
-  orientation: QItemChoiceOrientation;
+  orientation: ChoiceItemOrientation;
 }
 
-function QItemOpenChoiceRadioAnswerOption(props: QItemOpenChoiceRadioProps) {
+function OpenChoiceRadioAnswerOptionItem(props: OpenChoiceRadioAnswerOptionItemProps) {
   const { qItem, qrItem, onQrItemChange, orientation } = props;
 
   // Init answers
@@ -121,7 +121,7 @@ function QItemOpenChoiceRadioAnswerOption(props: QItemOpenChoiceRadioProps) {
 
   const openChoiceRadio = (
     <QRadioGroup
-      row={orientation === QItemChoiceOrientation.Horizontal}
+      row={orientation === ChoiceItemOrientation.Horizontal}
       name={qItem.text}
       id={qItem.id}
       onChange={(e: ChangeEvent<HTMLInputElement>) => handleValueChange(e.target.value, null)}
@@ -130,7 +130,7 @@ function QItemOpenChoiceRadioAnswerOption(props: QItemOpenChoiceRadioProps) {
       {qItem.answerOption?.map((option) => {
         if (option['valueCoding']) {
           return (
-            <QItemChoiceRadioSingle
+            <ChoiceRadioSingle
               key={option.valueCoding.code ?? ''}
               value={option.valueCoding.code ?? ''}
               label={option.valueCoding.display ?? `${option.valueCoding.code}`}
@@ -139,7 +139,7 @@ function QItemOpenChoiceRadioAnswerOption(props: QItemOpenChoiceRadioProps) {
           );
         } else if (option['valueString']) {
           return (
-            <QItemChoiceRadioSingle
+            <ChoiceRadioSingle
               key={option.valueString}
               value={option.valueString}
               label={option.valueString}
@@ -148,7 +148,7 @@ function QItemOpenChoiceRadioAnswerOption(props: QItemOpenChoiceRadioProps) {
           );
         } else if (option['valueInteger']) {
           return (
-            <QItemChoiceRadioSingle
+            <ChoiceRadioSingle
               key={option.valueInteger}
               value={option.valueInteger.toString()}
               label={option.valueInteger.toString()}
@@ -161,7 +161,7 @@ function QItemOpenChoiceRadioAnswerOption(props: QItemOpenChoiceRadioProps) {
       })}
 
       {openLabelText ? (
-        <QItemRadioButtonWithOpenLabel
+        <RadioButtonWithOpenLabel
           value={openLabelValue}
           label={openLabelText}
           readOnly={readOnly}
@@ -187,4 +187,4 @@ function QItemOpenChoiceRadioAnswerOption(props: QItemOpenChoiceRadioProps) {
   );
 }
 
-export default QItemOpenChoiceRadioAnswerOption;
+export default OpenChoiceRadioAnswerOptionItem;

package/src/components/FormComponents/{QItemOpenChoice/QItemOpenChoiceSelectAnswerOption.tsx → OpenChoiceItems/OpenChoiceSelectAnswerOptionItem.tsx}

@@ -17,8 +17,8 @@
 
 import type { SyntheticEvent } from 'react';
 import React from 'react';
-import { Autocomplete, Grid } from '@mui/material';
-
+import Autocomplete from '@mui/material/Autocomplete';
+import Grid from '@mui/material/Grid';
 import type {
   QuestionnaireItem,
   QuestionnaireItemAnswerOption,
@@ -37,7 +37,7 @@ import type {
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 
-interface Props
+interface OpenChoiceSelectAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute {
@@ -45,7 +45,7 @@ interface Props
   qrItem: QuestionnaireResponseItem;
 }
 
-function QItemOpenChoiceSelectAnswerOption(props: Props) {
+function OpenChoiceSelectAnswerOptionItem(props: OpenChoiceSelectAnswerOptionItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
 
   // Get additional rendering extensions
@@ -128,9 +128,12 @@ function QItemOpenChoiceSelectAnswerOption(props: Props) {
       )}
     />
   );
-  const renderQItemOpenChoiceAutocomplete = isRepeated ? (
-    <>{openOpenChoiceSelectAnswerOption}</>
-  ) : (
+
+  if (isRepeated) {
+    return <>{openOpenChoiceSelectAnswerOption}</>;
+  }
+
+  return (
     <FullWidthFormComponentBox data-test="q-item-open-choice-select-answer-option-box">
       <Grid container columnSpacing={6}>
         <Grid item xs={5}>
@@ -143,7 +146,6 @@ function QItemOpenChoiceSelectAnswerOption(props: Props) {
       </Grid>
     </FullWidthFormComponentBox>
   );
-  return <>{renderQItemOpenChoiceAutocomplete}</>;
 }
 
-export default QItemOpenChoiceSelectAnswerOption;
+export default OpenChoiceSelectAnswerOptionItem;

package/src/components/FormComponents/{QItemOpenChoice/QItemOpenChoiceSelectAnswerValueSet.tsx → OpenChoiceItems/OpenChoiceSelectAnswerValueSetItem.tsx}

@@ -17,8 +17,9 @@
 
 import type { SyntheticEvent } from 'react';
 import React from 'react';
-import { Autocomplete, Grid, Typography } from '@mui/material';
-
+import Autocomplete from '@mui/material/Autocomplete';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
 import type { Coding, QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import { StandardTextField } from '../Textfield.styles';
@@ -33,7 +34,7 @@ import type {
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 
-interface Props
+interface OpenChoiceSelectAnswerValueSetItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute {
@@ -41,7 +42,7 @@ interface Props
   qrItem: QuestionnaireResponseItem;
 }
 
-function QItemOpenChoiceSelectAnswerValueSet(props: Props) {
+function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSetItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
 
   // Init input value
@@ -117,9 +118,11 @@ function QItemOpenChoiceSelectAnswerValueSet(props: Props) {
     </>
   );
 
-  const renderQItemOpenChoiceSelectAnswerValueSet = isRepeated ? (
-    <>{openChoiceSelectAnswerValueSet}</>
-  ) : (
+  if (isRepeated) {
+    return <>{openChoiceSelectAnswerValueSet}</>;
+  }
+
+  return (
     <FullWidthFormComponentBox>
       <Grid container columnSpacing={6}>
         <Grid item xs={5}>
@@ -132,7 +135,6 @@ function QItemOpenChoiceSelectAnswerValueSet(props: Props) {
       </Grid>
     </FullWidthFormComponentBox>
   );
-  return <>{renderQItemOpenChoiceSelectAnswerValueSet}</>;
 }
 
-export default QItemOpenChoiceSelectAnswerValueSet;
+export default OpenChoiceSelectAnswerValueSetItem;

package/src/components/FormComponents/RepeatGroup/AddItemButton.tsx

@@ -16,7 +16,8 @@
  */
 
 import React from 'react';
-import { Box, Button } from '@mui/material';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
 import AddIcon from '@mui/icons-material/Add';
 import type { RepeatGroupSingle } from '../../../interfaces/repeatGroup.interface';
 

package/src/components/FormComponents/RepeatGroup/DeleteItemButton.tsx

@@ -17,7 +17,7 @@
 
 import React from 'react';
 import { RepeatDeleteTooltip } from '../RepeatItem/RepeatItem.styles';
-import { IconButton } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
 import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
 import type { QuestionnaireResponseItem } from 'fhir/r4';
 

package/src/components/FormComponents/RepeatGroup/RepeatGroup.tsx

@@ -20,7 +20,10 @@ import type { PropsWithQrRepeatGroupChangeHandler } from '../../../interfaces/re
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import useInitialiseRepeatGroups from '../../../hooks/useInitialiseRepeatGroups';
 import { QGroupContainerBox } from '../../Box.styles';
-import { Card, Collapse, Divider } from '@mui/material';
+import Card from '@mui/material/Card';
+import Collapse from '@mui/material/Collapse';
+import Divider from '@mui/material/Divider';
+
 import { QGroupHeadingTypography } from '../Typography.styles';
 import { TransitionGroup } from 'react-transition-group';
 import { createEmptyQrItem } from '../../../utils/qrItem';

package/src/components/FormComponents/RepeatGroup/RepeatGroupItem.tsx

@@ -17,7 +17,7 @@
 
 import React from 'react';
 import { RepeatGroupContainerStack } from '../RepeatItem/RepeatItem.styles';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import GroupItem from '../GroupItem/GroupItem';
 import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';

package/src/components/FormComponents/RepeatItem/AddItemButton.tsx

@@ -16,7 +16,8 @@
  */
 
 import React from 'react';
-import { Box, Button } from '@mui/material';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
 import AddIcon from '@mui/icons-material/Add';
 import type { RepeatAnswer } from '../../../interfaces/repeatItem.interface';
 

package/src/components/FormComponents/RepeatItem/DeleteItemButton.tsx

@@ -17,7 +17,7 @@
 
 import React from 'react';
 import { RepeatDeleteTooltip } from './RepeatItem.styles';
-import { IconButton } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
 import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
 import type { QuestionnaireResponseItemAnswer } from 'fhir/r4';
 

package/src/components/FormComponents/RepeatItem/RepeatField.tsx

@@ -16,7 +16,7 @@
  */
 
 import React from 'react';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import { RepeatItemContainerStack } from './RepeatItem.styles';
 import SingleItem from '../SingleItem/SingleItem';
 import type {

package/src/components/FormComponents/RepeatItem/RepeatItem.styles.tsx

@@ -15,7 +15,9 @@
  * limitations under the License.
  */
 
-import { Stack, styled, Tooltip } from '@mui/material';
+import Stack from '@mui/material/Stack';
+import { styled } from '@mui/material/styles';
+import Tooltip from '@mui/material/Tooltip';
 
 export const RepeatDeleteTooltip = styled(Tooltip)(() => ({
   marginLeft: 8

package/src/components/FormComponents/RepeatItem/RepeatItem.tsx

@@ -25,7 +25,7 @@ import { FullWidthFormComponentBox } from '../../Box.styles';
 import AddItemButton from './AddItemButton';
 import { TransitionGroup } from 'react-transition-group';
 import RepeatField from './RepeatField';
-import { Collapse } from '@mui/material';
+import Collapse from '@mui/material/Collapse';
 import useInitialiseRepeatAnswers from '../../../hooks/useInitialiseRepeatAnswers';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 

package/src/components/FormComponents/SingleItem/SingleItemSwitcher.tsx

@@ -16,10 +16,10 @@
  */
 
 import React from 'react';
-import QItemChoice from '../QItemChoice/QItemChoice';
+import ChoiceItemSwitcher from '../ChoiceItems/ChoiceItemSwitcher';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import QItemOpenChoice from '../QItemOpenChoice/QItemOpenChoice';
-import { Typography } from '@mui/material';
+import OpenChoiceItemSwitcher from '../OpenChoiceItems/OpenChoiceItemSwitcher';
+import Typography from '@mui/material/Typography';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
@@ -131,7 +131,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
       );
     case 'choice':
       return (
-        <QItemChoice
+        <ChoiceItemSwitcher
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}
@@ -141,7 +141,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
       );
     case 'open-choice':
       return (
-        <QItemOpenChoice
+        <OpenChoiceItemSwitcher
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}

package/src/components/FormComponents/StringItem/StringField.tsx

@@ -17,7 +17,7 @@
 
 import React from 'react';
 import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
-import { InputAdornment } from '@mui/material';
+import InputAdornment from '@mui/material/InputAdornment';
 import { StandardTextField } from '../Textfield.styles';
 import FadingCheckIcon from '../ItemParts/FadingCheckIcon';
 

package/src/components/FormComponents/Tables/DeleteRowButton.tsx

@@ -17,7 +17,9 @@
 
 import React from 'react';
 import { DeleteButtonTableCell } from './Table.styles';
-import { IconButton, Tooltip } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+
 import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
 import type { QuestionnaireResponseItem } from 'fhir/r4';
 

package/src/components/FormComponents/Tables/QItemGroupTable.tsx

@@ -18,19 +18,18 @@
 import React, { useMemo, useState } from 'react';
 
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import {
-  Button,
-  Divider,
-  Paper,
-  Stack,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Typography
-} from '@mui/material';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Typography from '@mui/material/Typography';
+
 import AddIcon from '@mui/icons-material/Add';
 import QItemGroupTableRow from './QItemGroupTableRow';
 import { HeaderTableCell } from './Table.styles';

package/src/components/FormComponents/Tables/Table.styles.tsx

@@ -15,7 +15,8 @@
  * limitations under the License.
  */
 
-import { styled, TableCell } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import TableCell from '@mui/material/TableCell';
 
 export const HeaderTableCell = styled(TableCell)(() => ({
   fontSize: 13,

package/src/components/FormComponents/Textfield.styles.ts

@@ -15,7 +15,8 @@
  * limitations under the License.
  */
 
-import { styled, TextField } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import TextField from '@mui/material/TextField';
 
 // Always use this accompanied by the TextField prop fullWidth
 export const StandardTextField = styled(TextField, {

package/src/components/FormComponents/Typography.styles.ts

@@ -15,7 +15,8 @@
  * limitations under the License.
  */
 
-import { styled, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
 
 export const QGroupHeadingTypography = styled(Typography, {
   shouldForwardProp: (prop) => prop !== 'isTabHeading'

package/src/components/FormComponents/UrlItem/UrlField.tsx

@@ -17,7 +17,7 @@
 
 import React from 'react';
 import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
-import { InputAdornment } from '@mui/material';
+import InputAdornment from '@mui/material/InputAdornment';
 import { StandardTextField } from '../Textfield.styles';
 
 interface UrlFieldProps extends PropsWithIsTabledAttribute {

package/src/components/Iconify/Iconify.tsx

@@ -17,8 +17,8 @@
 
 import React, { forwardRef, memo } from 'react';
 import { Icon } from '@iconify/react';
-import type { SxProps, Theme } from '@mui/material';
-import { Box } from '@mui/material';
+import type { SxProps, Theme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
 
 interface IconifyProps {
   icon: string;

package/src/components/Lists.styles.ts

@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
-import { List, styled } from '@mui/material';
-import { alpha } from '@mui/material/styles';
+import List from '@mui/material/List';
+import { alpha, styled } from '@mui/material/styles';
 
 export const PrimarySelectableList = styled(List)(({ theme }) => ({
   '&& .Mui-selected': {

package/src/components/{FormRenderer → Renderer}/BaseRenderer.tsx

@@ -16,8 +16,9 @@
  */
 
 import React from 'react';
-import { Container, Fade } from '@mui/material';
-import FormTopLevelItem from '../FormRenderer/FormTopLevelItem';
+import Container from '@mui/material/Container';
+import Fade from '@mui/material/Fade';
+import FormTopLevelItem from './FormTopLevelItem';
 import type { QuestionnaireResponse, QuestionnaireResponseItem } from 'fhir/r4';
 import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
 import useQuestionnaireResponseStore from '../../stores/useQuestionnaireResponseStore';

package/src/components/{FormRenderer → Renderer}/FormBodyCollapsible.tsx

@@ -16,7 +16,7 @@
  */
 
 import React, { useMemo } from 'react';
-import { Stack } from '@mui/material';
+import Stack from '@mui/material/Stack';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
 import { updateQrGroup } from '../../utils/qrItem';

package/src/components/{FormRenderer → Renderer}/FormBodySingleCollapsible.tsx

@@ -17,14 +17,12 @@
 
 import type { ReactNode } from 'react';
 import React, { memo } from 'react';
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  Box,
-  Tooltip,
-  Typography
-} from '@mui/material';
+import Accordion from '@mui/material/Accordion';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import Box from '@mui/material/Box';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { getContextDisplays } from '../../utils/tabs';
 import type { QuestionnaireItem } from 'fhir/r4';

package/src/components/{FormRenderer → Renderer}/FormBodyTabbed.tsx

@@ -16,7 +16,7 @@
  */
 
 import React, { useMemo } from 'react';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { TabContext, TabPanel } from '@mui/lab';
 import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';

package/src/components/{FormRenderer → Renderer}/FormTitle.tsx

@@ -20,7 +20,7 @@ import type { Questionnaire } from 'fhir/r4';
 import parse from 'html-react-parser';
 import { getXHtmlStringFromQuestionnaire } from '../../utils/qItem';
 import { FormTitleWrapper } from '../Box.styles';
-import { Typography } from '@mui/material';
+import Typography from '@mui/material/Typography';
 
 interface FormTitleProps {
   questionnaire: Questionnaire;