@elice/material-video-assessment 1.260930.0 → 1.261005.0

package/cjs/components/material-video-assessment/step/preparation/StepPreparation.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
 var mediaKit = require('@elice/media-kit');
-var material = require('@mui/material');
 var dayjs = require('dayjs');
 var MaterialVideoAssessmentContext = require('../../context/MaterialVideoAssessmentContext.js');
 
@@ -40,9 +40,9 @@ var StepPreparation = function StepPreparation(_ref) {
   //
   //
   //
-  return jsxRuntime.jsxs(material.Stack, {
-    gap: "1.5rem",
+  return jsxRuntime.jsxs(edsMaterial.Stack, {
     sx: {
+      gap: '1.5rem',
       width: '100%',
       padding: '1.5rem',
       borderRadius: '1.25rem',
@@ -53,21 +53,23 @@ var StepPreparation = function StepPreparation(_ref) {
         return "1px solid ".concat(theme.palette.divider);
       }
     },
-    children: [jsxRuntime.jsx(material.Typography, {
+    children: [jsxRuntime.jsx(edsMaterial.Typography, {
       variant: "h6",
       children: intl$1.formatMessage({
         id: 'video_assessment.preparation.title'
       })
-    }), jsxRuntime.jsxs(material.Stack, {
-      gap: "1.5rem",
-      children: [jsxRuntime.jsx(mediaKit.MediaDevicePermissionAlert, {}), jsxRuntime.jsxs(material.Stack, {
+    }), jsxRuntime.jsxs(edsMaterial.Stack, {
+      sx: {
+        gap: '1.5rem'
+      },
+      children: [jsxRuntime.jsx(mediaKit.MediaDevicePermissionAlert, {}), jsxRuntime.jsxs(edsMaterial.Stack, {
         direction: "row",
-        gap: "2.5rem",
-        alignItems: "center",
         sx: {
+          gap: '2.5rem',
+          alignItems: 'center',
           width: '100%'
         },
-        children: [jsxRuntime.jsx(material.Box, {
+        children: [jsxRuntime.jsx(edsMaterial.Box, {
           sx: {
             flex: 1,
             aspectRatio: '8 / 5',
@@ -90,14 +92,14 @@ var StepPreparation = function StepPreparation(_ref) {
               objectFit: 'cover'
             }
           })
-        }), jsxRuntime.jsxs(material.Stack, {
-          gap: "1rem",
+        }), jsxRuntime.jsxs(edsMaterial.Stack, {
           sx: {
+            gap: '1rem',
             flex: 1,
             justifyContent: 'center'
           },
-          children: [jsxRuntime.jsxs(material.FormControl, {
-            children: [jsxRuntime.jsx(material.FormLabel, {
+          children: [jsxRuntime.jsxs(edsMaterial.FormControl, {
+            children: [jsxRuntime.jsx(edsMaterial.FormLabel, {
               children: intl$1.formatMessage({
                 id: 'video_assessment.preparation.device_label.camera'
               })
@@ -105,8 +107,8 @@ var StepPreparation = function StepPreparation(_ref) {
               fullWidth: true,
               kind: "videoinput"
             })]
-          }), jsxRuntime.jsxs(material.FormControl, {
-            children: [jsxRuntime.jsx(material.FormLabel, {
+          }), jsxRuntime.jsxs(edsMaterial.FormControl, {
+            children: [jsxRuntime.jsx(edsMaterial.FormLabel, {
               children: intl$1.formatMessage({
                 id: 'video_assessment.preparation.device_label.audio'
               })
@@ -117,51 +119,59 @@ var StepPreparation = function StepPreparation(_ref) {
           })]
         })]
       })]
-    }), jsxRuntime.jsxs(material.Stack, {
-      gap: "0.75rem",
+    }), jsxRuntime.jsxs(edsMaterial.Stack, {
+      divider: jsxRuntime.jsx(edsMaterial.Divider, {}),
       sx: {
+        gap: '0.75rem',
         padding: '1rem',
         borderRadius: '0.75rem',
         backgroundColor: function backgroundColor(theme) {
           return theme.palette.background.neutral;
         }
       },
-      divider: jsxRuntime.jsx(material.Divider, {}),
       children: [hasTimeLimit ? jsxRuntime.jsx(jsxRuntime.Fragment, {
-        children: jsxRuntime.jsxs(material.Stack, {
-          children: [jsxRuntime.jsx(material.Typography, {
+        children: jsxRuntime.jsxs(edsMaterial.Stack, {
+          children: [jsxRuntime.jsx(edsMaterial.Typography, {
             variant: "body2",
-            color: "text.secondary",
+            sx: {
+              color: 'text.secondary'
+            },
             children: intl$1.formatMessage({
               id: 'video_assessment.preparation.timer_label'
             })
-          }), jsxRuntime.jsx(material.Typography, {
+          }), jsxRuntime.jsx(edsMaterial.Typography, {
             variant: "h5",
-            fontWeight: 600,
+            sx: {
+              fontWeight: 600
+            },
             children: dayjs__default.default().startOf('day').add(timeLimitSeconds, 'second').format('mm:ss')
           })]
         })
-      }) : null, jsxRuntime.jsx(material.Box, {
+      }) : null, jsxRuntime.jsx(edsMaterial.Box, {
         component: "ul",
         sx: {
           margin: 0,
           paddingLeft: '1.3125rem'
         },
         children: bulletIntlIds.map(function (id) {
-          return jsxRuntime.jsx(material.Typography, {
+          return jsxRuntime.jsx(edsMaterial.Typography, {
             component: "li",
             variant: "body2",
-            color: "text.secondary",
+            sx: {
+              color: 'text.secondary'
+            },
             children: intl$1.formatMessage({
               id: id
             })
           }, id);
         })
       })]
-    }), jsxRuntime.jsx(material.Stack, {
+    }), jsxRuntime.jsx(edsMaterial.Stack, {
       direction: "row",
-      justifyContent: "flex-end",
-      children: jsxRuntime.jsx(material.Button, {
+      sx: {
+        justifyContent: 'flex-end'
+      },
+      children: jsxRuntime.jsx(edsMaterial.Button, {
         variant: "contained",
         disabled: !isReady,
         onClick: onNext,

package/cjs/components/material-video-assessment/step/recording/StepRecording.js

@@ -4,13 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
 var jsxRuntime = require('react/jsx-runtime');
+var edsKit = require('@elice/eds-kit');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
 var mediaKit = require('@elice/media-kit');
-var muiElements = require('@elice/mui-elements');
 var proRegularSvgIcons = require('@fortawesome/pro-regular-svg-icons');
 var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
-var lab = require('@mui/lab');
-var material = require('@mui/material');
 var dayjs = require('dayjs');
 var MaterialVideoAssessmentContext = require('../../context/MaterialVideoAssessmentContext.js');
 
@@ -49,9 +48,9 @@ var StepRecording = function StepRecording(_ref) {
   //
   //
   //
-  return jsxRuntime.jsxs(material.Stack, {
-    gap: "1.5rem",
+  return jsxRuntime.jsxs(edsMaterial.Stack, {
     sx: {
+      gap: '1.5rem',
       width: '100%',
       padding: '1.5rem',
       borderRadius: '1.25rem',
@@ -62,33 +61,37 @@ var StepRecording = function StepRecording(_ref) {
         return "1px solid ".concat(theme.palette.divider);
       }
     },
-    children: [errorReason ? jsxRuntime.jsx(material.Alert, {
+    children: [errorReason ? jsxRuntime.jsx(edsMaterial.Alert, {
       severity: "error",
       children: intl$1.formatMessage({
         id: "video_assessment.recording.error.".concat(errorReason)
       })
-    }) : null, jsxRuntime.jsxs(material.Stack, {
-      gap: "0.5rem",
+    }) : null, jsxRuntime.jsxs(edsMaterial.Stack, {
       sx: {
+        gap: '0.5rem',
         width: '100%'
       },
-      children: [jsxRuntime.jsx(material.Typography, {
+      children: [jsxRuntime.jsx(edsMaterial.Typography, {
         variant: "h6",
-        fontWeight: 600,
+        sx: {
+          fontWeight: 600
+        },
         children: intl$1.formatMessage({
           id: 'video_assessment.recording.prompt'
         }, {
           prompt: (_d = materialVideoAssessment === null || materialVideoAssessment === void 0 ? void 0 : materialVideoAssessment.prompt) !== null && _d !== void 0 ? _d : '',
           q: function q(chunks) {
-            return jsxRuntime.jsx(material.Typography, {
+            return jsxRuntime.jsx(edsMaterial.Typography, {
               component: "span",
               variant: "inherit",
-              color: "primary.main",
+              sx: {
+                color: 'primary.main'
+              },
               children: chunks
             });
           }
         })
-      }), (materialVideoAssessment === null || materialVideoAssessment === void 0 ? void 0 : materialVideoAssessment.promptDescription) ? jsxRuntime.jsx(material.Typography, {
+      }), (materialVideoAssessment === null || materialVideoAssessment === void 0 ? void 0 : materialVideoAssessment.promptDescription) ? jsxRuntime.jsx(edsMaterial.Typography, {
         variant: "body1",
         sx: {
           whiteSpace: 'pre-wrap',
@@ -96,14 +99,14 @@ var StepRecording = function StepRecording(_ref) {
         },
         children: materialVideoAssessment.promptDescription
       }) : null]
-    }), jsxRuntime.jsxs(material.Stack, {
+    }), jsxRuntime.jsxs(edsMaterial.Stack, {
       direction: "row",
-      gap: "2.5rem",
-      alignItems: "center",
       sx: {
+        gap: '2.5rem',
+        alignItems: 'center',
         width: '100%'
       },
-      children: [jsxRuntime.jsxs(material.Box, {
+      children: [jsxRuntime.jsxs(edsMaterial.Box, {
         sx: {
           position: 'relative',
           flex: 1,
@@ -126,10 +129,10 @@ var StepRecording = function StepRecording(_ref) {
             height: '100%',
             objectFit: 'cover'
           }
-        }), recorder.isRecording ? jsxRuntime.jsx(muiElements.Tag, {
+        }), recorder.isRecording ? jsxRuntime.jsx(edsKit.Tag, {
           color: "error",
           variant: "filled",
-          icon: jsxRuntime.jsx(muiElements.EliceIcon, {
+          icon: jsxRuntime.jsx(edsKit.FaIcon, {
             icon: proSolidSvgIcons.faCircle,
             sx: {
               transform: 'scale(0.75)'
@@ -144,49 +147,55 @@ var StepRecording = function StepRecording(_ref) {
             bottom: '0.75rem'
           }
         }) : null]
-      }), jsxRuntime.jsxs(material.Stack, {
-        gap: "0.75rem",
+      }), jsxRuntime.jsxs(edsMaterial.Stack, {
         sx: {
+          gap: '0.75rem',
           flex: 1,
           alignSelf: 'stretch',
           justifyContent: 'center'
         },
-        children: [jsxRuntime.jsxs(material.Stack, {
-          gap: "0.25rem",
-          children: [jsxRuntime.jsx(material.Typography, {
+        children: [jsxRuntime.jsxs(edsMaterial.Stack, {
+          sx: {
+            gap: '0.25rem'
+          },
+          children: [jsxRuntime.jsx(edsMaterial.Typography, {
             variant: "body1",
-            color: "text.secondary",
+            color: "textSecondary",
             children: intl$1.formatMessage({
               id: showCountdown ? 'video_assessment.recording.timer_label_with_limit' : 'video_assessment.recording.timer_label_no_limit'
             })
-          }), jsxRuntime.jsxs(material.Stack, {
+          }), jsxRuntime.jsxs(edsMaterial.Stack, {
             direction: "row",
-            gap: "0.25rem",
-            alignItems: "center",
-            children: [jsxRuntime.jsx(muiElements.EliceIcon, {
+            sx: {
+              gap: '0.25rem',
+              alignItems: 'center'
+            },
+            children: [jsxRuntime.jsx(edsKit.FaIcon, {
               "aria-hidden": true,
               icon: proRegularSvgIcons.faClock,
               sx: {
                 fontSize: '1.5rem',
                 color: accentColor
               }
-            }), jsxRuntime.jsx(material.Typography, {
+            }), jsxRuntime.jsx(edsMaterial.Typography, {
               "aria-live": "polite",
               variant: "h5",
-              fontWeight: 600,
               color: accentColor,
+              sx: {
+                fontWeight: 600
+              },
               children: showCountdown ? intl$1.formatMessage({
                 id: 'video_assessment.recording.timer_value_with_total'
               }, {
                 remaining: formatMmSs(remainingSec),
                 total: formatMmSs(totalSec),
                 dim: function dim(chunks) {
-                  return jsxRuntime.jsx(material.Typography, {
+                  return jsxRuntime.jsx(edsMaterial.Typography, {
                     component: "span",
-                    color: "text.tertiary",
-                    fontWeight: 500,
+                    color: "textTertiary",
                     variant: "inherit",
                     sx: {
+                      fontWeight: 500,
                       opacity: 0.7
                     },
                     children: chunks
@@ -195,7 +204,7 @@ var StepRecording = function StepRecording(_ref) {
               }) : formatMmSs(elapsedSec)
             })]
           })]
-        }), showCountdown ? jsxRuntime.jsx(material.LinearProgress, {
+        }), showCountdown ? jsxRuntime.jsx(edsMaterial.LinearProgress, {
           variant: "determinate",
           value: progressValue,
           color: timer.isImminent ? 'warning' : 'primary',
@@ -203,12 +212,12 @@ var StepRecording = function StepRecording(_ref) {
             width: '100%',
             height: '0.25rem',
             borderRadius: '6.1875rem'
-          }, "& .".concat(material.linearProgressClasses.bar), {
+          }, "& .".concat(edsMaterial.linearProgressClasses.bar), {
             transition: 'transform 1s linear'
           })
-        }) : null, jsxRuntime.jsx(material.Typography, {
+        }) : null, jsxRuntime.jsx(edsMaterial.Typography, {
           variant: "body2",
-          color: "text.tertiary",
+          color: "textTertiary",
           sx: {
             opacity: 0.7,
             lineHeight: 1.4
@@ -216,20 +225,24 @@ var StepRecording = function StepRecording(_ref) {
           children: intl$1.formatMessage({
             id: showCountdown ? 'video_assessment.recording.help_text_with_limit' : 'video_assessment.recording.help_text_no_limit'
           })
-        }), timer.isExceeded ? jsxRuntime.jsx(material.Typography, {
+        }), timer.isExceeded ? jsxRuntime.jsx(edsMaterial.Typography, {
           variant: "caption",
-          color: "warning.main",
           role: "status",
           "aria-live": "polite",
+          sx: {
+            color: 'warning.main'
+          },
           children: intl$1.formatMessage({
             id: 'video_assessment.recording.recommendation_exceeded'
           })
         }) : null]
       })]
-    }), jsxRuntime.jsx(material.Stack, {
+    }), jsxRuntime.jsx(edsMaterial.Stack, {
       direction: "row",
-      justifyContent: "flex-end",
-      children: jsxRuntime.jsx(lab.LoadingButton, {
+      sx: {
+        justifyContent: 'flex-end'
+      },
+      children: jsxRuntime.jsx(edsMaterial.Button, {
         loading: isSubmitting,
         variant: "contained",
         onClick: function onClick() {

package/cjs/components/material-video-assessment/step/submitted/StepSubmitted.d.ts

@@ -1,5 +1,5 @@
 import 'dayjs/locale/ko';
-import type { ButtonProps } from '@mui/material';
+import type { ButtonProps } from '@elice/eds-material';
 import type React from 'react';
 interface StepSubmittedProps {
     userId: number;

package/cjs/components/material-video-assessment/step/submitted/StepSubmitted.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var edsKit = require('@elice/eds-kit');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
-var muiElements = require('@elice/mui-elements');
 var proRegularSvgIcons = require('@fortawesome/pro-regular-svg-icons');
-var material = require('@mui/material');
 var dayjs = require('dayjs');
 require('dayjs/locale/ko');
 var StepSubmittedDetailRow = require('./StepSubmittedDetailRow.js');
@@ -51,9 +51,9 @@ var StepSubmitted = function StepSubmitted(_ref) {
   //
   //
   //
-  return jsxRuntime.jsxs(material.Stack, {
-    gap: "1.5rem",
+  return jsxRuntime.jsxs(edsMaterial.Stack, {
     sx: {
+      gap: '1.5rem',
       width: '100%',
       padding: '1.5rem',
       borderRadius: '1.25rem',
@@ -64,28 +64,32 @@ var StepSubmitted = function StepSubmitted(_ref) {
         return "1px solid ".concat(theme.palette.divider);
       }
     },
-    children: [jsxRuntime.jsxs(material.Stack, {
-      gap: "0.5rem",
+    children: [jsxRuntime.jsxs(edsMaterial.Stack, {
       sx: {
+        gap: '0.5rem',
         width: '100%'
       },
-      children: [jsxRuntime.jsx(material.Typography, {
+      children: [jsxRuntime.jsx(edsMaterial.Typography, {
         variant: "h6",
-        fontWeight: 600,
+        sx: {
+          fontWeight: 600
+        },
         children: intl$1.formatMessage({
           id: 'video_assessment.submitted.prompt'
         }, {
           prompt: (_h = materialVideoAssessment === null || materialVideoAssessment === void 0 ? void 0 : materialVideoAssessment.prompt) !== null && _h !== void 0 ? _h : '',
           q: function q(chunks) {
-            return jsxRuntime.jsx(material.Typography, {
+            return jsxRuntime.jsx(edsMaterial.Typography, {
               component: "span",
               variant: "inherit",
-              color: "primary.main",
+              sx: {
+                color: 'primary.main'
+              },
               children: chunks
             });
           }
         })
-      }), (materialVideoAssessment === null || materialVideoAssessment === void 0 ? void 0 : materialVideoAssessment.promptDescription) ? jsxRuntime.jsx(material.Typography, {
+      }), (materialVideoAssessment === null || materialVideoAssessment === void 0 ? void 0 : materialVideoAssessment.promptDescription) ? jsxRuntime.jsx(edsMaterial.Typography, {
         variant: "body1",
         sx: {
           whiteSpace: 'pre-wrap',
@@ -93,12 +97,12 @@ var StepSubmitted = function StepSubmitted(_ref) {
         },
         children: materialVideoAssessment.promptDescription
       }) : null]
-    }), jsxRuntime.jsxs(material.Stack, {
-      gap: "1.5rem",
+    }), jsxRuntime.jsxs(edsMaterial.Stack, {
       sx: {
+        gap: '1.5rem',
         width: '100%'
       },
-      children: [jsxRuntime.jsx(material.Box, {
+      children: [jsxRuntime.jsx(edsMaterial.Box, {
         sx: {
           width: '100%',
           maxWidth: '25rem',
@@ -122,11 +126,11 @@ var StepSubmitted = function StepSubmitted(_ref) {
             objectFit: 'cover'
           }
         })) : null
-      }), jsxRuntime.jsx(material.Table, {
+      }), jsxRuntime.jsx(edsMaterial.Table, {
         sx: {
           width: '100%'
         },
-        children: jsxRuntime.jsxs(material.TableBody, {
+        children: jsxRuntime.jsxs(edsMaterial.TableBody, {
           children: [hideScore ? null : jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [jsxRuntime.jsx(StepSubmittedDetailRow.default, {
               label: intl$1.formatMessage({
@@ -160,21 +164,23 @@ var StepSubmitted = function StepSubmitted(_ref) {
           })]
         })
       })]
-    }), jsxRuntime.jsxs(material.Stack, {
+    }), jsxRuntime.jsxs(edsMaterial.Stack, {
       direction: "row",
-      gap: "0.5rem",
-      justifyContent: "flex-end",
-      children: [(materialVideoAssessment === null || materialVideoAssessment === void 0 ? void 0 : materialVideoAssessment.isResubmitEnabled) ? jsxRuntime.jsx(material.Button, {
+      sx: {
+        gap: '0.5rem',
+        justifyContent: 'flex-end'
+      },
+      children: [(materialVideoAssessment === null || materialVideoAssessment === void 0 ? void 0 : materialVideoAssessment.isResubmitEnabled) ? jsxRuntime.jsx(edsMaterial.Button, {
         variant: "text",
         color: "inherit",
-        startIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
+        startIcon: jsxRuntime.jsx(edsKit.FaIcon, {
           icon: proRegularSvgIcons.faArrowRotateRight
         }),
         onClick: onReset,
         children: intl$1.formatMessage({
           id: 'video_assessment.submitted.retry'
         })
-      }) : null, nextButtonProps ? jsxRuntime.jsx(material.Button, Object.assign({
+      }) : null, nextButtonProps ? jsxRuntime.jsx(edsMaterial.Button, Object.assign({
         variant: "contained"
       }, nextButtonProps, {
         children: (_q = nextButtonProps.children) !== null && _q !== void 0 ? _q : intl$1.formatMessage({

package/cjs/components/material-video-assessment/step/submitted/StepSubmittedDetailRow.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var material = require('@mui/material');
+var edsMaterial = require('@elice/eds-material');
 
 //
 //
@@ -11,8 +11,8 @@ var material = require('@mui/material');
 var StepSubmittedDetailRow = function StepSubmittedDetailRow(_ref) {
   var label = _ref.label,
     value = _ref.value;
-  return jsxRuntime.jsxs(material.TableRow, {
-    children: [jsxRuntime.jsx(material.TableCell, {
+  return jsxRuntime.jsxs(edsMaterial.TableRow, {
+    children: [jsxRuntime.jsx(edsMaterial.TableCell, {
       sx: {
         width: '10rem',
         padding: '1rem',
@@ -24,18 +24,18 @@ var StepSubmittedDetailRow = function StepSubmittedDetailRow(_ref) {
         },
         fontWeight: 500
       },
-      children: jsxRuntime.jsx(material.Typography, {
+      children: jsxRuntime.jsx(edsMaterial.Typography, {
         variant: "body2",
         children: label
       })
-    }), jsxRuntime.jsx(material.TableCell, {
+    }), jsxRuntime.jsx(edsMaterial.TableCell, {
       sx: {
         padding: '1rem'
       },
-      children: typeof value === 'string' ? jsxRuntime.jsx(material.Typography, {
+      children: typeof value === 'string' ? jsxRuntime.jsx(edsMaterial.Typography, {
         variant: "body2",
-        color: "text.secondary",
         sx: {
+          color: 'text.secondary',
           whiteSpace: 'pre-wrap'
         },
         children: value

package/cjs/components/material-video-assessment/step/submitted/StepSubmittedScore.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var edsKit = require('@elice/eds-kit');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
-var muiElements = require('@elice/mui-elements');
-var material = require('@mui/material');
 
 //
 //
@@ -18,7 +18,7 @@ var StepSubmittedScore = function StepSubmittedScore(_ref) {
   //
   //
   if (scoreStatus === 'visible' && typeof manualScore === 'number') {
-    return jsxRuntime.jsx(muiElements.Tag, {
+    return jsxRuntime.jsx(edsKit.Tag, {
       color: "default",
       size: "small",
       label: intl$1.formatMessage({
@@ -30,10 +30,10 @@ var StepSubmittedScore = function StepSubmittedScore(_ref) {
   }
   switch (scoreStatus) {
     case 'pending':
-      return jsxRuntime.jsx(material.Typography, {
+      return jsxRuntime.jsx(edsMaterial.Typography, {
         variant: "body2",
-        color: "text.secondary",
         sx: {
+          color: 'text.secondary',
           whiteSpace: 'pre-wrap'
         },
         children: intl$1.formatMessage({
@@ -41,10 +41,10 @@ var StepSubmittedScore = function StepSubmittedScore(_ref) {
         })
       });
     case 'hidden':
-      return jsxRuntime.jsx(material.Typography, {
+      return jsxRuntime.jsx(edsMaterial.Typography, {
         variant: "body2",
-        color: "text.secondary",
         sx: {
+          color: 'text.secondary',
           whiteSpace: 'pre-wrap'
         },
         children: intl$1.formatMessage({
@@ -52,10 +52,10 @@ var StepSubmittedScore = function StepSubmittedScore(_ref) {
         })
       });
     default:
-      return jsxRuntime.jsx(material.Typography, {
+      return jsxRuntime.jsx(edsMaterial.Typography, {
         variant: "body2",
-        color: "text.secondary",
         sx: {
+          color: 'text.secondary',
           whiteSpace: 'pre-wrap'
         },
         children: intl$1.formatMessage({