@elice/material-video-assessment 1.260930.0 → 1.261005.0

package/cjs/components/material-video-assessment/MaterialVideoAssessment.d.ts

@@ -1,4 +1,4 @@
-import type { ButtonProps } from '@mui/material';
+import type { ButtonProps } from '@elice/eds-material';
 import type React from 'react';
 import type { MaterialVideoAssessmentAdapters } from './adapters';
 import type { MaterialVideoAssessmentAdminContentProps } from './admin';

package/cjs/components/material-video-assessment/MaterialVideoAssessment.js

@@ -4,10 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var apiClient = require('@elice/api-client');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
 var materialSharedUtils = require('@elice/material-shared-utils');
-var muiSystem = require('@elice/mui-system');
-var material = require('@mui/material');
 var classnames = require('classnames');
 var MaterialVideoAssessmentContent = require('./MaterialVideoAssessmentContent.js');
 var MaterialVideoAssessmentProvider = require('./MaterialVideoAssessmentProvider.js');
@@ -23,7 +22,7 @@ var classnames__default = /*#__PURE__*/_interopDefaultCompat(classnames);
 //
 //
 //
-var eliceTheme = muiSystem.createEliceTheme({
+var eliceTheme = edsMaterial.createEliceTheme({
   paletteMode: 'dark',
   paletteName: 'purple'
 });
@@ -34,9 +33,9 @@ var MaterialVideoAssessment = function MaterialVideoAssessment(props) {
   var _a;
   return jsxRuntime.jsx(intl.RawEliceIntlProvider, {
     value: props.__intl,
-    children: jsxRuntime.jsx(material.ThemeProvider, {
+    children: jsxRuntime.jsx(edsMaterial.ThemeProvider, {
       theme: eliceTheme,
-      children: jsxRuntime.jsx(material.Box, {
+      children: jsxRuntime.jsx(edsMaterial.Box, {
         className: classnames__default.default('em-material-video-assessment', props.className),
         sx: {
           color: 'text.primary',

package/cjs/components/material-video-assessment/admin/MaterialVideoAssessmentAdminContent.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
-var material = require('@mui/material');
 var MaterialVideoAssessmentAdminContentSkeleton = require('./MaterialVideoAssessmentAdminContentSkeleton.js');
 var MaterialVideoAssessmentContext = require('../context/MaterialVideoAssessmentContext.js');
 var useMaterialVideoAssessmentLastResponse = require('../../../hooks/useMaterialVideoAssessmentLastResponse.js');
@@ -39,10 +39,10 @@ var MaterialVideoAssessmentAdminContent = function MaterialVideoAssessmentAdminC
   //
   //
   //
-  return jsxRuntime.jsxs(material.Stack, {
+  return jsxRuntime.jsxs(edsMaterial.Stack, {
     className: className,
-    gap: "1.5rem",
     sx: {
+      gap: '1.5rem',
       width: '100%',
       padding: '1.5rem',
       borderRadius: '1.25rem',
@@ -53,28 +53,32 @@ var MaterialVideoAssessmentAdminContent = function MaterialVideoAssessmentAdminC
         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.admin.prompt'
         }, {
           prompt: (_b = materialVideoAssessment === null || materialVideoAssessment === void 0 ? void 0 : materialVideoAssessment.prompt) !== null && _b !== void 0 ? _b : '',
           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',
@@ -82,12 +86,12 @@ var MaterialVideoAssessmentAdminContent = function MaterialVideoAssessmentAdminC
         },
         children: materialVideoAssessment.promptDescription
       }) : null]
-    }), jsxRuntime.jsxs(material.Stack, {
-      gap: "1.5rem",
+    }), jsxRuntime.jsxs(edsMaterial.Stack, {
       sx: {
+        gap: '1.5rem',
         width: '100%'
       },
-      children: [isSubmitted && (lastResponse === null || lastResponse === void 0 ? void 0 : lastResponse.videoAssessmentResponse.resourceUrl) ? jsxRuntime.jsx(material.Box, {
+      children: [isSubmitted && (lastResponse === null || lastResponse === void 0 ? void 0 : lastResponse.videoAssessmentResponse.resourceUrl) ? jsxRuntime.jsx(edsMaterial.Box, {
         sx: {
           width: '100%',
           maxWidth: '25rem',
@@ -114,10 +118,12 @@ var MaterialVideoAssessmentAdminContent = function MaterialVideoAssessmentAdminC
         videoAssessmentResponse: lastResponse === null || lastResponse === void 0 ? void 0 : lastResponse.videoAssessmentResponse,
         videoAssessmentResponseCount: lastResponse === null || lastResponse === void 0 ? void 0 : lastResponse.videoAssessmentResponseCount
       })]
-    }), isSubmitted ? jsxRuntime.jsx(material.Stack, {
+    }), isSubmitted ? jsxRuntime.jsx(edsMaterial.Stack, {
       direction: "row",
-      gap: "0.5rem",
-      justifyContent: "flex-end",
+      sx: {
+        gap: '0.5rem',
+        justifyContent: 'flex-end'
+      },
       children: jsxRuntime.jsx(GradeButton.default, {
         userId: userId,
         videoAssessmentResponse: lastResponse === null || lastResponse === void 0 ? void 0 : lastResponse.videoAssessmentResponse,

package/cjs/components/material-video-assessment/admin/MaterialVideoAssessmentAdminContentSkeleton.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,9 +11,9 @@ var material = require('@mui/material');
 var MaterialVideoAssessmentAdminContentSkeleton = function MaterialVideoAssessmentAdminContentSkeleton(_ref) {
   var _ref$rowCount = _ref.rowCount,
     rowCount = _ref$rowCount === void 0 ? 6 : _ref$rowCount;
-  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',
@@ -24,17 +24,17 @@ var MaterialVideoAssessmentAdminContentSkeleton = function MaterialVideoAssessme
         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.Skeleton, {
+      children: [jsxRuntime.jsx(edsMaterial.Skeleton, {
         animation: "wave",
         variant: "text",
         width: "40%",
         height: "2rem"
-      }), jsxRuntime.jsx(material.Skeleton, {
+      }), jsxRuntime.jsx(edsMaterial.Skeleton, {
         animation: "wave",
         variant: "text",
         width: "70%",
@@ -42,12 +42,12 @@ var MaterialVideoAssessmentAdminContentSkeleton = function MaterialVideoAssessme
           marginLeft: '1.5rem'
         }
       })]
-    }), jsxRuntime.jsxs(material.Stack, {
-      gap: "1.5rem",
+    }), jsxRuntime.jsxs(edsMaterial.Stack, {
       sx: {
+        gap: '1.5rem',
         width: '100%'
       },
-      children: [jsxRuntime.jsx(material.Skeleton, {
+      children: [jsxRuntime.jsx(edsMaterial.Skeleton, {
         animation: "wave",
         variant: "rounded",
         sx: {
@@ -56,16 +56,16 @@ var MaterialVideoAssessmentAdminContentSkeleton = function MaterialVideoAssessme
           aspectRatio: '16 / 9',
           borderRadius: '0.75rem'
         }
-      }), jsxRuntime.jsx(material.Table, {
+      }), jsxRuntime.jsx(edsMaterial.Table, {
         sx: {
           width: '100%'
         },
-        children: jsxRuntime.jsx(material.TableBody, {
+        children: jsxRuntime.jsx(edsMaterial.TableBody, {
           children: Array.from({
             length: rowCount
           }, function (_, index) {
-            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',
@@ -73,16 +73,16 @@ var MaterialVideoAssessmentAdminContentSkeleton = function MaterialVideoAssessme
                     return theme.palette.action.hover;
                   }
                 },
-                children: jsxRuntime.jsx(material.Skeleton, {
+                children: jsxRuntime.jsx(edsMaterial.Skeleton, {
                   animation: "wave",
                   variant: "text",
                   width: "60%"
                 })
-              }), jsxRuntime.jsx(material.TableCell, {
+              }), jsxRuntime.jsx(edsMaterial.TableCell, {
                 sx: {
                   padding: '1rem'
                 },
-                children: jsxRuntime.jsx(material.Skeleton, {
+                children: jsxRuntime.jsx(edsMaterial.Skeleton, {
                   animation: "wave",
                   variant: "text",
                   width: "40%"
@@ -92,12 +92,14 @@ var MaterialVideoAssessmentAdminContentSkeleton = function MaterialVideoAssessme
           })
         })
       })]
-    }), jsxRuntime.jsx(material.Stack, {
+    }), jsxRuntime.jsx(edsMaterial.Stack, {
       direction: "row",
-      gap: "0.5rem",
-      justifyContent: "flex-end",
-      children: jsxRuntime.jsx(material.Box, {
-        children: jsxRuntime.jsx(material.Skeleton, {
+      sx: {
+        gap: '0.5rem',
+        justifyContent: 'flex-end'
+      },
+      children: jsxRuntime.jsx(edsMaterial.Box, {
+        children: jsxRuntime.jsx(edsMaterial.Skeleton, {
           animation: "wave",
           variant: "rounded",
           width: "6rem",

package/cjs/components/material-video-assessment/admin/grade-button/GradeButton.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
-var material = require('@mui/material');
 var GradeDialog = require('./GradeDialog.js');
 var useMaterialVideoAssessmentManualScoreEdit = require('../../../../hooks/useMaterialVideoAssessmentManualScoreEdit.js');
 
@@ -73,7 +73,7 @@ var GradeButton = function GradeButton(_ref) {
   //
   //
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(material.Button, {
+    children: [jsxRuntime.jsx(edsMaterial.Button, {
       variant: "contained",
       onClick: function onClick() {
         return setGradeDialogOpen(true);

package/cjs/components/material-video-assessment/admin/grade-button/GradeDialog.js

@@ -6,9 +6,9 @@ var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabel
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
 var zod = require('@hookform/resolvers/zod');
-var material = require('@mui/material');
 var schema = require('./schema.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -75,24 +75,24 @@ var GradeDialog = function GradeDialog(_ref) {
   //
   //
   //
-  return jsxRuntime.jsxs(material.Dialog, {
+  return jsxRuntime.jsxs(edsMaterial.Dialog, {
     fullWidth: true,
     open: open,
     maxWidth: "sm",
     onClose: onClose,
-    children: [jsxRuntime.jsx(material.DialogTitle, {
+    children: [jsxRuntime.jsx(edsMaterial.DialogTitle, {
       children: intl$1.formatMessage({
         id: 'video_assessment.admin.grade.title'
       })
-    }), jsxRuntime.jsx(material.DialogContent, {
+    }), jsxRuntime.jsx(edsMaterial.DialogContent, {
       children: jsxRuntime.jsx(reactHookForm.FormProvider, Object.assign({}, methods, {
         children: jsxRuntime.jsx("form", {
           noValidate: true,
           id: formId,
           onSubmit: handleSubmit,
-          children: jsxRuntime.jsxs(material.Stack, {
-            gap: "1rem",
+          children: jsxRuntime.jsxs(edsMaterial.Stack, {
             sx: {
+              gap: '1rem',
               paddingTop: '0.5rem'
             },
             children: [jsxRuntime.jsx(reactHookForm.Controller, {
@@ -102,7 +102,7 @@ var GradeDialog = function GradeDialog(_ref) {
                 var field = _ref3.field,
                   fieldState = _ref3.fieldState;
                 var _a, _b;
-                return jsxRuntime.jsx(material.TextField, Object.assign({}, field, {
+                return jsxRuntime.jsx(edsMaterial.TextField, Object.assign({}, field, {
                   fullWidth: true,
                   inputMode: "numeric",
                   label: intl$1.formatMessage({
@@ -127,7 +127,7 @@ var GradeDialog = function GradeDialog(_ref) {
                 var field = _ref4.field,
                   fieldState = _ref4.fieldState;
                 var _a, _b, _c, _d;
-                return jsxRuntime.jsx(material.TextField, Object.assign({}, field, {
+                return jsxRuntime.jsx(edsMaterial.TextField, Object.assign({}, field, {
                   multiline: true,
                   fullWidth: true,
                   minRows: 4,
@@ -140,8 +140,10 @@ var GradeDialog = function GradeDialog(_ref) {
                   }),
                   helperText: (_b = (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : "".concat((_d = (_c = field.value) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0, " / ").concat(schema.FEEDBACK_MAX),
                   error: Boolean(fieldState.error),
-                  inputProps: {
-                    maxLength: schema.FEEDBACK_MAX
+                  slotProps: {
+                    htmlInput: {
+                      maxLength: schema.FEEDBACK_MAX
+                    }
                   }
                 }));
               }
@@ -149,15 +151,15 @@ var GradeDialog = function GradeDialog(_ref) {
           })
         })
       }))
-    }), jsxRuntime.jsxs(material.DialogActions, {
-      children: [jsxRuntime.jsx(material.Button, {
+    }), jsxRuntime.jsxs(edsMaterial.DialogActions, {
+      children: [jsxRuntime.jsx(edsMaterial.Button, {
         color: "inherit",
         disabled: isPending,
         onClick: onClose,
         children: intl$1.formatMessage({
           id: 'video_assessment.admin.grade.cancel'
         })
-      }), jsxRuntime.jsx(material.Button, {
+      }), jsxRuntime.jsx(edsMaterial.Button, {
         type: "submit",
         form: formId,
         variant: "contained",

package/cjs/components/material-video-assessment/admin/response-detail-table/ResponseDetailTable.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
-var material = require('@mui/material');
 var dayjs = require('dayjs');
 require('dayjs/locale/ko');
 var ResponseDetailTableRow = require('./ResponseDetailTableRow.js');
@@ -62,11 +62,11 @@ var ResponseDetailTable = function ResponseDetailTable(_ref) {
   //
   //
   //
-  return jsxRuntime.jsx(material.Table, {
+  return jsxRuntime.jsx(edsMaterial.Table, {
     sx: {
       width: '100%'
     },
-    children: jsxRuntime.jsxs(material.TableBody, {
+    children: jsxRuntime.jsxs(edsMaterial.TableBody, {
       children: [jsxRuntime.jsx(ResponseDetailTableRow.default, {
         label: intl$1.formatMessage({
           id: 'video_assessment.admin.label.status'

package/cjs/components/material-video-assessment/admin/response-detail-table/ResponseDetailTableRow.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 ResponseDetailTableRow = function ResponseDetailTableRow(_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 ResponseDetailTableRow = function ResponseDetailTableRow(_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/admin/response-detail-table/ResponseDetailTableScore.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');
 
 //
 //
@@ -14,7 +14,7 @@ var ResponseDetailTableScore = function ResponseDetailTableScore(_ref) {
   var manualScore = _ref.manualScore;
   var intl$1 = intl.useRawEliceIntl();
   if (typeof manualScore === 'number') {
-    return jsxRuntime.jsx(muiElements.Tag, {
+    return jsxRuntime.jsx(edsKit.Tag, {
       color: "default",
       size: "small",
       label: intl$1.formatMessage({
@@ -24,10 +24,10 @@ var ResponseDetailTableScore = function ResponseDetailTableScore(_ref) {
       })
     });
   }
-  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({

package/cjs/components/material-video-assessment/step/loading/StepLoading.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var material = require('@mui/material');
+var edsMaterial = require('@elice/eds-material');
 var MaterialVideoAssessmentContext = require('../../context/MaterialVideoAssessmentContext.js');
 var useMaterialVideoAssessmentLastResponse = require('../../../../hooks/useMaterialVideoAssessmentLastResponse.js');
 
@@ -45,9 +45,9 @@ var StepLoading = function StepLoading(_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',
@@ -58,24 +58,26 @@ var StepLoading = function StepLoading(_ref) {
         return "1px solid ".concat(theme.palette.divider);
       }
     },
-    children: [jsxRuntime.jsxs(material.Stack, {
-      gap: "0.5rem",
-      children: [jsxRuntime.jsx(material.Typography, {
+    children: [jsxRuntime.jsxs(edsMaterial.Stack, {
+      sx: {
+        gap: '0.5rem'
+      },
+      children: [jsxRuntime.jsx(edsMaterial.Typography, {
         variant: "h6",
-        children: jsxRuntime.jsx(material.Skeleton, {
+        children: jsxRuntime.jsx(edsMaterial.Skeleton, {
           animation: "wave",
           variant: "text",
           width: "40%"
         })
-      }), jsxRuntime.jsx(material.Typography, {
+      }), jsxRuntime.jsx(edsMaterial.Typography, {
         variant: "body2",
-        children: jsxRuntime.jsx(material.Skeleton, {
+        children: jsxRuntime.jsx(edsMaterial.Skeleton, {
           animation: "wave",
           variant: "text",
           width: "70%"
         })
       })]
-    }), jsxRuntime.jsx(material.Box, {
+    }), jsxRuntime.jsx(edsMaterial.Box, {
       sx: {
         width: '100%',
         maxWidth: '25rem',
@@ -83,7 +85,7 @@ var StepLoading = function StepLoading(_ref) {
         borderRadius: '0.75rem',
         overflow: 'hidden'
       },
-      children: jsxRuntime.jsx(material.Skeleton, {
+      children: jsxRuntime.jsx(edsMaterial.Skeleton, {
         animation: "wave",
         variant: "rectangular",
         sx: {