@aehrc/smart-forms-renderer 0.4.0 → 0.6.0

package/src/components/FormComponents/{QItemChoice/QItemChoiceSelectAnswerOption.tsx → ChoiceItems/ChoiceSelectAnswerOptionItem.tsx}

@@ -16,8 +16,11 @@
  */
 
 import React, { Fragment } from 'react';
-import type { SelectChangeEvent } from '@mui/material';
-import { Grid, InputAdornment, MenuItem, Select } from '@mui/material';
+import Grid from '@mui/material/Grid';
+import InputAdornment from '@mui/material/InputAdornment';
+import MenuItem from '@mui/material/MenuItem';
+import type { SelectChangeEvent } from '@mui/material/Select';
+import Select from '@mui/material/Select';
 
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { findInAnswerOptions, getQrChoiceValue } from '../../../utils/choice';
@@ -32,7 +35,7 @@ import type {
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 
-interface Props
+interface ChoiceSelectAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute {
@@ -40,7 +43,7 @@ interface Props
   qrItem: QuestionnaireResponseItem;
 }
 
-function QItemChoiceSelectAnswerOption(props: Props) {
+function ChoiceSelectAnswerOptionItem(props: ChoiceSelectAnswerOptionItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
 
   // Init input value
@@ -109,9 +112,11 @@ function QItemChoiceSelectAnswerOption(props: Props) {
     </Select>
   );
 
-  const renderQItemChoiceSelectAnswerOption = isRepeated ? (
-    <>{choiceSelectAnswerOption}</>
-  ) : (
+  if (isRepeated) {
+    return <>{choiceSelectAnswerOption}</>;
+  }
+
+  return (
     <FullWidthFormComponentBox data-test="q-item-choice-select-answer-option-box">
       <Grid container columnSpacing={6}>
         <Grid item xs={5}>
@@ -124,7 +129,6 @@ function QItemChoiceSelectAnswerOption(props: Props) {
       </Grid>
     </FullWidthFormComponentBox>
   );
-  return <>{renderQItemChoiceSelectAnswerOption}</>;
 }
 
-export default QItemChoiceSelectAnswerOption;
+export default ChoiceSelectAnswerOptionItem;

package/src/components/FormComponents/{QItemChoice/QItemChoiceSelectAnswerValueSet.tsx → ChoiceItems/ChoiceSelectAnswerValueSetItem.tsx}

@@ -17,7 +17,9 @@
 
 import type { SyntheticEvent } from 'react';
 import React, { useEffect, useMemo } 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';
@@ -35,7 +37,7 @@ import { StyledAlert } from '../../Alert.styles';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 
-interface Props
+interface ChoiceSelectAnswerValueSetItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute {
@@ -43,7 +45,7 @@ interface Props
   qrItem: QuestionnaireResponseItem;
 }
 
-function QItemChoiceSelectAnswerValueSet(props: Props) {
+function ChoiceSelectAnswerValueSetItem(props: ChoiceSelectAnswerValueSetItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
 
   // Init input value
@@ -141,9 +143,11 @@ function QItemChoiceSelectAnswerValueSet(props: Props) {
       </StyledAlert>
     );
 
-  const renderQItemChoiceSelectAnswerValueSet = isRepeated ? (
-    <>{choiceSelectAnswerValueSet}</>
-  ) : (
+  if (isRepeated) {
+    return <>{choiceSelectAnswerValueSet}</>;
+  }
+
+  return (
     <FullWidthFormComponentBox data-test="q-item-choice-dropdown-answer-value-set-box">
       <Grid container columnSpacing={6}>
         <Grid item xs={5}>
@@ -156,7 +160,6 @@ function QItemChoiceSelectAnswerValueSet(props: Props) {
       </Grid>
     </FullWidthFormComponentBox>
   );
-  return <>{renderQItemChoiceSelectAnswerValueSet}</>;
 }
 
-export default QItemChoiceSelectAnswerValueSet;
+export default ChoiceSelectAnswerValueSetItem;

package/src/components/FormComponents/DateTimeItem/DateTimeField.tsx

@@ -20,7 +20,7 @@ import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps
 import type { Dayjs } from 'dayjs';
 import { DateTimePicker as MuiDateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 
 interface DateTimeFieldProps extends PropsWithIsTabledAttribute {
   value: Dayjs | null;

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

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

package/src/components/FormComponents/DisplayItem/DisplayInstructions.styles.ts

@@ -15,7 +15,8 @@
  * limitations under the License.
  */
 
-import { Box, styled } from '@mui/material';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
 
 export const DisplayInstructionsWrapper = styled(Box)(({ theme }) => ({
   color: theme.palette.text.secondary,

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

@@ -16,7 +16,7 @@
  */
 
 import React, { memo } from 'react';
-import { Typography } from '@mui/material';
+import Typography from '@mui/material/Typography';
 import { DisplayInstructionsWrapper } from './DisplayInstructions.styles';
 
 interface DisplayInstructionsProps {

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

@@ -21,7 +21,10 @@ import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderPro
 import { createQrGroup, updateQrGroup } from '../../../utils/qrItem';
 import useHidden from '../../../hooks/useHidden';
 import { QGroupContainerBox } from '../../Box.styles';
-import { Divider, Paper, TableContainer, Typography } from '@mui/material';
+import Divider from '@mui/material/Divider';
+import Paper from '@mui/material/Paper';
+import TableContainer from '@mui/material/TableContainer';
+import Typography from '@mui/material/Typography';
 import { mapQItemsIndex } from '../../../utils/mapItem';
 import GridTable from './GridTable';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';

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

@@ -22,7 +22,7 @@ import { createQrGroup, updateQrGroup } from '../../../utils/qrItem';
 import { GridAnswerTableCell, GridTextTableCell } from '../Tables/Table.styles';
 import SingleItem from '../SingleItem/SingleItem';
 import { getQrItemsIndex, mapQItemsIndex } from '../../../utils/mapItem';
-import { Typography } from '@mui/material';
+import Typography from '@mui/material/Typography';
 
 interface GridRowProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
   qItem: QuestionnaireItem;

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

@@ -16,7 +16,11 @@
  */
 
 import React from 'react';
-import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
 import { HeaderTableCell } from '../Tables/Table.styles';
 import GridRow from './GridRow';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';

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

@@ -16,7 +16,8 @@
  */
 
 import React, { memo } from 'react';
-import { Box, Divider } from '@mui/material';
+import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
 import { QGroupHeadingTypography } from '../Typography.styles';
 import type { PropsWithIsRepeatedAttribute } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem } from 'fhir/r4';

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

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

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

@@ -16,7 +16,7 @@
  */
 
 import React from 'react';
-import { Button } from '@mui/material';
+import Button from '@mui/material/Button';
 import Iconify from '../../Iconify/Iconify';
 
 interface NextTabButtonProps {

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

@@ -16,7 +16,7 @@
  */
 
 import React, { memo } from 'react';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import { findNumOfVisibleTabs, getNextVisibleTabIndex } from '../../../utils/tabs';
 import type { Tabs } from '../../../interfaces/tab.interface';
 import useQuestionnaireStore from '../../../stores/useQuestionnaireStore';

package/src/components/FormComponents/IntegerItem/IntegerField.tsx

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

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

@@ -15,7 +15,10 @@
  * limitations under the License.
  */
 
-import { FormGroup, RadioGroup, styled, Typography } from '@mui/material';
+import FormGroup from '@mui/material/FormGroup';
+import RadioGroup from '@mui/material/RadioGroup';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
 
 export const QFormGroup = styled(FormGroup)(() => ({
   marginBottom: 4

package/src/components/FormComponents/ItemParts/{QItemCheckboxSingle.tsx → CheckboxSingle.tsx}

@@ -16,7 +16,8 @@
  */
 
 import React from 'react';
-import { Checkbox, FormControlLabel } from '@mui/material';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
 
 interface Props {
   value: string;
@@ -26,7 +27,7 @@ interface Props {
   onCheckedChange: (value: string) => unknown;
 }
 
-function QItemCheckboxSingle(props: Props) {
+function CheckboxSingle(props: Props) {
   const { value, label, readOnly, isChecked, onCheckedChange } = props;
 
   return (
@@ -41,4 +42,4 @@ function QItemCheckboxSingle(props: Props) {
   );
 }
 
-export default QItemCheckboxSingle;
+export default CheckboxSingle;

package/src/components/FormComponents/ItemParts/{QItemCheckboxSingleWithOpenLabel.tsx → CheckboxSingleWithOpenLabel.tsx}

@@ -17,7 +17,9 @@
 
 import type { ChangeEvent } from 'react';
 import React from 'react';
-import { Box, Checkbox, FormControlLabel } from '@mui/material';
+import Box from '@mui/material/Box';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
 import { StandardTextField } from '../Textfield.styles';
 
 interface Props {
@@ -28,7 +30,7 @@ interface Props {
   onInputChange: (input: string) => unknown;
 }
 
-function QItemCheckboxSingleWithOpenLabel(props: Props) {
+function CheckboxSingleWithOpenLabel(props: Props) {
   const { value, label, isChecked, onCheckedChange, onInputChange } = props;
 
   function handleCheckedChange(event: ChangeEvent<HTMLInputElement>) {
@@ -59,4 +61,4 @@ function QItemCheckboxSingleWithOpenLabel(props: Props) {
   );
 }
 
-export default QItemCheckboxSingleWithOpenLabel;
+export default CheckboxSingleWithOpenLabel;

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

@@ -16,7 +16,7 @@
  */
 
 import React from 'react';
-import { Fade } from '@mui/material';
+import Fade from '@mui/material/Fade';
 import CheckIcon from '@mui/icons-material/Check';
 
 interface FadingCheckIconProps {

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

@@ -17,7 +17,7 @@
 
 import type { ReactNode } from 'react';
 import React from 'react';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import type { QuestionnaireItem } from 'fhir/r4';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from './ItemLabelWrapper';

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

@@ -20,7 +20,7 @@ import type { QuestionnaireItem } from 'fhir/r4';
 import { getMarkdownString, getXHtmlString } from '../../../utils/itemControl';
 import { QItemTypography } from '../Item.styles';
 import parse from 'html-react-parser';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import ReactMarkdown from 'react-markdown';
 
 interface ItemLabelTextProps {

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

@@ -16,7 +16,7 @@
  */
 
 import React from 'react';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import ContextDisplayItem from './ContextDisplayItem';
 import type { QuestionnaireItem } from 'fhir/r4';
 import { getContextDisplays } from '../../../utils/tabs';

package/src/components/FormComponents/ItemParts/{QItemRadioButtonWithOpenLabel.tsx → RadioButtonWithOpenLabel.tsx}

@@ -17,11 +17,11 @@
 
 import type { ChangeEvent } from 'react';
 import React from 'react';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import { StandardTextField } from '../Textfield.styles';
-import QItemChoiceRadioSingle from '../QItemChoice/QItemChoiceRadioSingle';
+import ChoiceRadioSingle from '../ChoiceItems/ChoiceRadioSingle';
 
-interface Props {
+interface RadioButtonWithOpenLabelProps {
   value: string | null;
   label: string;
   readOnly: boolean;
@@ -29,7 +29,7 @@ interface Props {
   onInputChange: (input: string) => unknown;
 }
 
-function QItemRadioButtonWithOpenLabel(props: Props) {
+function RadioButtonWithOpenLabel(props: RadioButtonWithOpenLabelProps) {
   const { value, label, readOnly, isSelected, onInputChange } = props;
   function handleInputChange(event: ChangeEvent<HTMLInputElement>) {
     onInputChange(event.target.value);
@@ -37,7 +37,7 @@ function QItemRadioButtonWithOpenLabel(props: Props) {
 
   return (
     <Box data-test="q-item-radio-open-label-box">
-      <QItemChoiceRadioSingle value={value ?? ''} label={label + ':'} readOnly={readOnly} />
+      <ChoiceRadioSingle value={value ?? ''} label={label + ':'} readOnly={readOnly} />
       <StandardTextField
         disabled={!isSelected}
         value={value}
@@ -51,4 +51,4 @@ function QItemRadioButtonWithOpenLabel(props: Props) {
   );
 }
 
-export default QItemRadioButtonWithOpenLabel;
+export default RadioButtonWithOpenLabel;

package/src/components/FormComponents/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/FormComponents/{QItemOpenChoice/QItemOpenChoiceAutocomplete.tsx → OpenChoiceItems/OpenChoiceAutocompleteItem.tsx}

@@ -17,7 +17,13 @@
 
 import type { ChangeEvent, SyntheticEvent } from 'react';
 import React, { useState } from 'react';
-import { Autocomplete, Box, CircularProgress, Fade, Grid, Tooltip } from '@mui/material';
+import Autocomplete from '@mui/material/Autocomplete';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import Fade from '@mui/material/Fade';
+import Grid from '@mui/material/Grid';
+import Tooltip from '@mui/material/Tooltip';
+
 import type { Coding, QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 
 import { createEmptyQrItem } from '../../../utils/qrItem';
@@ -41,7 +47,7 @@ import { AUTOCOMPLETE_DEBOUNCE_DURATION } from '../../../utils/debounce';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 
-interface QItemOpenChoiceAutocompleteProps
+interface OpenChoiceAutocompleteItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute {
@@ -49,7 +55,7 @@ interface QItemOpenChoiceAutocompleteProps
   qrItem: QuestionnaireResponseItem;
 }
 
-function QItemOpenChoiceAutocomplete(props: QItemOpenChoiceAutocompleteProps) {
+function OpenChoiceAutocompleteItem(props: OpenChoiceAutocompleteItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
   const qrOpenChoice = qrItem ?? createEmptyQrItem(qItem);
 
@@ -186,9 +192,11 @@ function QItemOpenChoiceAutocomplete(props: QItemOpenChoiceAutocompleteProps) {
     </>
   );
 
-  const renderQItemOpenChoiceAutocomplete = isRepeated ? (
-    <>{openChoiceAutocomplete}</>
-  ) : (
+  if (isRepeated) {
+    return <>{openChoiceAutocomplete}</>;
+  }
+
+  return (
     <FullWidthFormComponentBox>
       <Grid container columnSpacing={6}>
         <Grid item xs={5}>
@@ -201,7 +209,6 @@ function QItemOpenChoiceAutocomplete(props: QItemOpenChoiceAutocompleteProps) {
       </Grid>
     </FullWidthFormComponentBox>
   );
-  return <>{renderQItemOpenChoiceAutocomplete}</>;
 }
 
-export default QItemOpenChoiceAutocomplete;
+export default OpenChoiceAutocompleteItem;

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

@@ -16,13 +16,13 @@
  */
 
 import React, { useCallback, useMemo, useState } from 'react';
-import { Grid } from '@mui/material';
-import { CheckBoxOptionType, QItemChoiceOrientation } from '../../../interfaces/choice.enum';
+import Grid from '@mui/material/Grid';
+import { CheckBoxOption, ChoiceItemOrientation } from '../../../interfaces/choice.enum';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { createEmptyQrItem } from '../../../utils/qrItem';
-import QItemCheckboxSingle from '../ItemParts/QItemCheckboxSingle';
+import CheckboxSingle from '../ItemParts/CheckboxSingle';
 import { getOpenLabelText } from '../../../utils/itemControl';
-import QItemCheckboxSingleWithOpenLabel from '../ItemParts/QItemCheckboxSingleWithOpenLabel';
+import CheckboxSingleWithOpenLabel from '../ItemParts/CheckboxSingleWithOpenLabel';
 import { QFormGroup } from '../Item.styles';
 import {
   getOldOpenLabelAnswer,
@@ -39,15 +39,15 @@ import { DEBOUNCE_DURATION } from '../../../utils/debounce';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 
-interface QItemOpenChoiceCheckboxProps
+interface OpenChoiceCheckboxAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
-  orientation: QItemChoiceOrientation;
+  orientation: ChoiceItemOrientation;
 }
 
-function QItemOpenChoiceCheckboxAnswerOption(props: QItemOpenChoiceCheckboxProps) {
+function OpenChoiceCheckboxAnswerOptionItem(props: OpenChoiceCheckboxAnswerOptionItemProps) {
   const { qItem, qrItem, isRepeated, onQrItemChange, orientation } = props;
 
   // Init answers
@@ -85,7 +85,7 @@ function QItemOpenChoiceCheckboxAnswerOption(props: QItemOpenChoiceCheckboxProps
           answers,
           answerOptions,
           qrOpenChoiceCheckbox,
-          CheckBoxOptionType.AnswerOption,
+          CheckBoxOption.AnswerOption,
           isRepeated
         );
       } else if (changedOpenLabelValue !== null) {
@@ -95,7 +95,7 @@ function QItemOpenChoiceCheckboxAnswerOption(props: QItemOpenChoiceCheckboxProps
           answers,
           answerOptions,
           qrOpenChoiceCheckbox,
-          CheckBoxOptionType.AnswerOption,
+          CheckBoxOption.AnswerOption,
           isRepeated
         );
       }
@@ -116,11 +116,11 @@ function QItemOpenChoiceCheckboxAnswerOption(props: QItemOpenChoiceCheckboxProps
   ); // Dependencies are tested, debounce is causing eslint to not recognise dependencies
 
   const openChoiceCheckbox = (
-    <QFormGroup row={orientation === QItemChoiceOrientation.Horizontal}>
+    <QFormGroup row={orientation === ChoiceItemOrientation.Horizontal}>
       {qItem.answerOption?.map((option) => {
         if (option['valueCoding']) {
           return (
-            <QItemCheckboxSingle
+            <CheckboxSingle
               key={option.valueCoding.code ?? ''}
               value={option.valueCoding.code ?? ''}
               label={option.valueCoding.display ?? `${option.valueCoding.code}`}
@@ -133,7 +133,7 @@ function QItemOpenChoiceCheckboxAnswerOption(props: QItemOpenChoiceCheckboxProps
           );
         } else if (option['valueString']) {
           return (
-            <QItemCheckboxSingle
+            <CheckboxSingle
               key={option.valueString}
               value={option.valueString}
               label={option.valueString}
@@ -144,7 +144,7 @@ function QItemOpenChoiceCheckboxAnswerOption(props: QItemOpenChoiceCheckboxProps
           );
         } else if (option['valueInteger']) {
           return (
-            <QItemCheckboxSingle
+            <CheckboxSingle
               key={option.valueInteger}
               value={option.valueInteger.toString()}
               label={option.valueInteger.toString()}
@@ -159,7 +159,7 @@ function QItemOpenChoiceCheckboxAnswerOption(props: QItemOpenChoiceCheckboxProps
       })}
 
       {openLabelText ? (
-        <QItemCheckboxSingleWithOpenLabel
+        <CheckboxSingleWithOpenLabel
           value={openLabelValue}
           label={openLabelText}
           isChecked={openLabelChecked}
@@ -191,4 +191,4 @@ function QItemOpenChoiceCheckboxAnswerOption(props: QItemOpenChoiceCheckboxProps
   );
 }
 
-export default QItemOpenChoiceCheckboxAnswerOption;
+export default OpenChoiceCheckboxAnswerOptionItem;