Reduce bundle size

packages/smart-forms-renderer/src/components/Alert.styles.ts

@@ -16,7 +16,8 @@
  */
 
 import { alpha, styled } from '@mui/material/styles';
-import { Box, ListItemIcon } from '@mui/material';
+import Box from '@mui/material/Box';
+import ListItemIcon from '@mui/material/ListItemIcon';
 
 export const StyledAlert = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'color'

packages/smart-forms-renderer/src/components/BackToTopButton/BackToTopButton.tsx

@@ -17,7 +17,9 @@
 
 import type { ReactElement } from 'react';
 import React from 'react';
-import { Box, Fade, useScrollTrigger } from '@mui/material';
+import Box from '@mui/material/Box';
+import Fade from '@mui/material/Fade';
+import useScrollTrigger from '@mui/material/useScrollTrigger';
 
 interface Props {
   children: ReactElement;

packages/smart-forms-renderer/src/components/Box.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 QGroupContainerBox = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'cardElevation' && prop !== 'isRepeated'

packages/smart-forms-renderer/src/components/FormComponents/BooleanItem/BooleanField.tsx

@@ -16,7 +16,8 @@
  */
 
 import React, { memo } from 'react';
-import { Checkbox, FormControlLabel } from '@mui/material';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
 
 interface BooleanFieldProps {
   checked: boolean;

packages/smart-forms-renderer/src/components/FormComponents/BooleanItem/BooleanItem.tsx

@@ -27,7 +27,7 @@ import { createEmptyQrItem } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import BooleanField from './BooleanField';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 
 interface BooleanItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,

packages/smart-forms-renderer/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;

packages/smart-forms-renderer/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';

packages/smart-forms-renderer/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,

packages/smart-forms-renderer/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 {

packages/smart-forms-renderer/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';

packages/smart-forms-renderer/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;

packages/smart-forms-renderer/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';

packages/smart-forms-renderer/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';

packages/smart-forms-renderer/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'

packages/smart-forms-renderer/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 {

packages/smart-forms-renderer/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';

packages/smart-forms-renderer/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';

packages/smart-forms-renderer/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

packages/smart-forms-renderer/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 {

packages/smart-forms-renderer/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';

packages/smart-forms-renderer/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 {

packages/smart-forms-renderer/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';

packages/smart-forms-renderer/src/components/FormComponents/ItemParts/QItemCheckboxSingle.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;

packages/smart-forms-renderer/src/components/FormComponents/ItemParts/QItemCheckboxSingleWithOpenLabel.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 {

packages/smart-forms-renderer/src/components/FormComponents/ItemParts/QItemRadioButtonWithOpenLabel.tsx

@@ -17,7 +17,7 @@
 
 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';
 

packages/smart-forms-renderer/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': {

packages/smart-forms-renderer/src/components/FormComponents/QItemChoice/QItemChoiceCheckboxAnswerOption.tsx

@@ -16,7 +16,7 @@
  */
 
 import React from 'react';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import { QItemChoiceOrientation } from '../../../interfaces/choice.enum';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import QItemChoiceCheckboxSingle from '../ItemParts/QItemCheckboxSingle';

packages/smart-forms-renderer/src/components/FormComponents/QItemChoice/QItemChoiceCheckboxAnswerValueSet.tsx

@@ -16,7 +16,8 @@
  */
 
 import React from 'react';
-import { Grid, Typography } from '@mui/material';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
 
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { createEmptyQrItem } from '../../../utils/qrItem';

packages/smart-forms-renderer/src/components/FormComponents/QItemChoice/QItemChoiceRadioAnswerOption.tsx

@@ -17,7 +17,7 @@
 
 import type { ChangeEvent } from 'react';
 import React from 'react';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import { QItemChoiceOrientation } from '../../../interfaces/choice.enum';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { findInAnswerOptions, getQrChoiceValue } from '../../../utils/choice';

packages/smart-forms-renderer/src/components/FormComponents/QItemChoice/QItemChoiceRadioAnswerValueSet.tsx

@@ -17,7 +17,8 @@
 
 import type { ChangeEvent } from 'react';
 import React from 'react';
-import { Grid, Typography } from '@mui/material';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
 import { QItemChoiceOrientation } from '../../../interfaces/choice.enum';
 import type { Coding, QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { findInAnswerValueSetCodings } from '../../../utils/choice';

packages/smart-forms-renderer/src/components/FormComponents/QItemChoice/QItemChoiceRadioSingle.tsx

@@ -16,7 +16,8 @@
  */
 
 import React from 'react';
-import { FormControlLabel, Radio } from '@mui/material';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Radio from '@mui/material/Radio';
 
 interface Props {
   value: string;

packages/smart-forms-renderer/src/components/FormComponents/QItemChoice/QItemChoiceSelectAnswerOption.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';

packages/smart-forms-renderer/src/components/FormComponents/QItemChoice/QItemChoiceSelectAnswerValueSet.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';

packages/smart-forms-renderer/src/components/FormComponents/QItemOpenChoice/QItemOpenChoiceAutocomplete.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';

packages/smart-forms-renderer/src/components/FormComponents/QItemOpenChoice/QItemOpenChoiceCheckboxAnswerOption.tsx

@@ -16,7 +16,7 @@
  */
 
 import React, { useCallback, useMemo, useState } from 'react';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import { CheckBoxOptionType, QItemChoiceOrientation } from '../../../interfaces/choice.enum';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { createEmptyQrItem } from '../../../utils/qrItem';

packages/smart-forms-renderer/src/components/FormComponents/QItemOpenChoice/QItemOpenChoiceRadioAnswerOption.tsx

@@ -17,7 +17,7 @@
 
 import type { ChangeEvent } from 'react';
 import React, { useState } from 'react';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import { QItemChoiceOrientation } from '../../../interfaces/choice.enum';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { createEmptyQrItem } from '../../../utils/qrItem';

packages/smart-forms-renderer/src/components/FormComponents/QItemOpenChoice/QItemOpenChoiceSelectAnswerOption.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,

packages/smart-forms-renderer/src/components/FormComponents/QItemOpenChoice/QItemOpenChoiceSelectAnswerValueSet.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';

packages/smart-forms-renderer/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';