@elice/material-exercise 1.260910.0 → 1.260915.0-edsmigration.0

package/es/components/material-exercise/exercise-runner/arduino/ArduinoConnectionPreflightDialog.js

@@ -1,18 +1,9 @@
 import { slicedToArray as _slicedToArray } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
+import { Dialog, DialogTitle, DialogContent, Stack, Typography, DialogActions, Alert, FormControlLabel, Checkbox, Button } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
-import Alert from '@mui/material/Alert';
-import Button from '@mui/material/Button';
-import Checkbox from '@mui/material/Checkbox';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
 import ArduinoConnectionPreflightDialogNativeMock from './ArduinoConnectionPreflightDialogNativeMock.js';
 import ArduinoConnectionPreflightDialogSteps from './ArduinoConnectionPreflightDialogSteps.js';
 
@@ -74,9 +65,9 @@ var ArduinoConnectionPreflightDialog = function ArduinoConnectionPreflightDialog
    */
   var renderPreview = function renderPreview() {
     return jsxs(Stack, {
-      alignItems: "center",
       spacing: 1.25,
       sx: {
+        alignItems: 'center',
         bgcolor: function bgcolor(theme) {
           return theme.palette.background.paper;
         },
@@ -89,14 +80,16 @@ var ArduinoConnectionPreflightDialog = function ArduinoConnectionPreflightDialog
       children: [jsxs(Stack, {
         direction: "row",
         spacing: 0.75,
-        alignItems: "center",
+        sx: {
+          alignItems: 'center'
+        },
         children: [jsx(ArrowUpwardIcon, {
           sx: {
             fontSize: 11
           }
         }), jsx(Typography, {
-          color: "primary.main",
           sx: {
+            color: 'primary.main',
             fontSize: 12,
             fontWeight: 700,
             letterSpacing: '-.01em'
@@ -154,9 +147,11 @@ var ArduinoConnectionPreflightDialog = function ArduinoConnectionPreflightDialog
     fullWidth: true,
     maxWidth: "sm",
     open: open,
-    PaperProps: {
-      sx: {
-        maxHeight: 'calc(100vh - 32px)'
+    slotProps: {
+      paper: {
+        sx: {
+          maxHeight: 'calc(100vh - 32px)'
+        }
       }
     },
     onClose: onClose,
@@ -168,13 +163,17 @@ var ArduinoConnectionPreflightDialog = function ArduinoConnectionPreflightDialog
         spacing: 2,
         children: [renderUploadNotice(), jsx(Typography, {
           variant: "body2",
-          color: "text.secondary",
+          sx: {
+            color: 'text.secondary'
+          },
           children: intl.formatMessage({
             id: 'exerciseRunner.arduino.preflight.body'
           })
         }), renderPreview(), jsx(ArduinoConnectionPreflightDialogSteps, {}), jsx(Typography, {
           variant: "caption",
-          color: "text.secondary",
+          sx: {
+            color: 'text.secondary'
+          },
           children: intl.formatMessage({
             id: 'exerciseRunner.arduino.preflight.footer'
           })

package/es/components/material-exercise/exercise-runner/arduino/ArduinoConnectionPreflightDialogNativeMock.js

@@ -1,9 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { Box, Stack, Typography } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
 import LockIcon from '@mui/icons-material/Lock';
-import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
 
 //
 //
@@ -35,8 +33,8 @@ var ArduinoConnectionPreflightDialogNativeMock = function ArduinoConnectionPrefl
     return jsxs(Stack, {
       direction: "row",
       spacing: 1,
-      alignItems: "center",
       sx: {
+        alignItems: 'center',
         pt: '11px',
         pb: '9px',
         px: '14px',
@@ -111,8 +109,8 @@ var ArduinoConnectionPreflightDialogNativeMock = function ArduinoConnectionPrefl
     return jsxs(Stack, {
       direction: "row",
       spacing: 1,
-      alignItems: "center",
       sx: {
+        alignItems: 'center',
         py: '8px',
         px: '12px',
         bgcolor: MOCK_FOOT_BG,

package/es/components/material-exercise/exercise-runner/arduino/ArduinoConnectionPreflightDialogSteps.js

@@ -1,8 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { Stack, Typography, Box } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
-import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
 
 //
 //
@@ -47,8 +45,10 @@ var ArduinoConnectionPreflightDialogSteps = function ArduinoConnectionPreflightD
     return jsx(Typography, {
       component: "span",
       variant: "inherit",
-      color: "text.primary",
-      fontWeight: 700,
+      sx: {
+        color: 'text.primary',
+        fontWeight: 700
+      },
       children: text
     });
   };
@@ -86,11 +86,13 @@ var ArduinoConnectionPreflightDialogSteps = function ArduinoConnectionPreflightD
     return jsxs(Stack, {
       direction: "row",
       spacing: 1.25,
-      alignItems: "flex-start",
+      sx: {
+        alignItems: 'flex-start'
+      },
       children: [renderStepBadge(step), jsx(Typography, {
         variant: "body2",
-        color: "text.secondary",
         sx: {
+          color: 'text.secondary',
           whiteSpace: 'pre-line'
         },
         children: intl.formatMessage({

package/es/components/material-exercise/exercise-runner/arduino/ArduinoControllerActionCompile.js

@@ -1,9 +1,8 @@
 import { asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
+import { Button, colors } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
-import { colors } from '@elice/mui-system';
-import { LoadingButton } from '@mui/lab';
 import { useArduinoBridge } from './_context.js';
 import { useControllerActionRun } from '../action/useControllerActionRun.js';
 import { useExericseShortcut } from '../../../../hooks/useExericseShortcut.js';
@@ -55,7 +54,7 @@ var ArduinoControllerActionCompile = function ArduinoControllerActionCompile() {
   if (isHidden) {
     return null;
   }
-  return jsx(LoadingButton, {
+  return jsx(Button, {
     size: "small",
     variant: "contained",
     color: "primary",

package/es/components/material-exercise/exercise-runner/arduino/ArduinoControllerActionUpload.js

@@ -1,10 +1,9 @@
 import { asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
+import { Button, colors } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
 import { useConnection, useIsBrowserSupported } from '@elice/mcu-bridge';
-import { colors } from '@elice/mui-system';
-import { LoadingButton } from '@mui/lab';
 import { useArduinoBridge } from './_context.js';
 import { useControllerActionRun } from '../action/useControllerActionRun.js';
 
@@ -69,7 +68,7 @@ var ArduinoControllerActionUpload = function ArduinoControllerActionUpload() {
   if (isHidden) {
     return null;
   }
-  return jsx(LoadingButton, {
+  return jsx(Button, {
     size: "small",
     variant: "contained",
     loading: isUploadLoading,

package/es/components/material-exercise/exercise-runner/arduino/ArduinoControllerButtonGroup.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Stack } from '@mui/material';
+import { Stack } from '@elice/eds-material';
 import ArduinoControllerActionCompile from './ArduinoControllerActionCompile.js';
 import ArduinoControllerActionUpload from './ArduinoControllerActionUpload.js';
 import ControllerActionGrade from '../action/ControllerActionGrade.js';
@@ -11,8 +11,10 @@ import ControllerActionCancel from '../action/ControllerActionCancel.js';
 var ArduinoControllerButtonGroup = function ArduinoControllerButtonGroup() {
   return jsxs(Stack, {
     direction: "row",
-    alignItems: "center",
-    gap: "0.5rem",
+    sx: {
+      alignItems: 'center',
+      gap: '0.5rem'
+    },
     children: [jsx(ArduinoControllerActionCompile, {}), jsx(ArduinoControllerActionUpload, {}), jsx(ControllerActionGrade, {}), jsx(ControllerActionCancel, {})]
   });
 };

package/es/components/material-exercise/exercise-runner/arduino/ArduinoControllerStatusMessage.js

@@ -1,10 +1,9 @@
 import { defineProperty as _defineProperty, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Text } from '@elice/blocks';
+import { Stack, inputBaseClasses, inputLabelClasses, Box, Button } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
 import { useConnection, useSession, useIsBrowserSupported, BaudRateSelect } from '@elice/mcu-bridge';
-import { LoadingButton } from '@mui/lab';
-import { Stack, inputBaseClasses, inputLabelClasses, Box } from '@mui/material';
 import ExerciseRunnerControllerStatusMessage from '../ExerciseRunnerControllerStatusMessage.js';
 import { useArduinoBridge } from './_context.js';
 import ArduinoHelpDialogButton from './ArduinoHelpDialogButton.js';
@@ -132,8 +131,10 @@ var ArduinoControllerStatusMessage = function ArduinoControllerStatusMessage() {
   var renderArduinoStatus = function renderArduinoStatus() {
     return jsxs(Stack, {
       direction: "row",
-      alignItems: "center",
-      gap: "0.5rem",
+      sx: {
+        alignItems: 'center',
+        gap: '0.5rem'
+      },
       children: [jsx(Box, {
         sx: {
           width: '6px',
@@ -155,9 +156,11 @@ var ArduinoControllerStatusMessage = function ArduinoControllerStatusMessage() {
   var renderArduinoConnectButton = function renderArduinoConnectButton() {
     return jsxs(Stack, {
       direction: "row",
-      alignItems: "center",
-      gap: "0.5rem",
-      children: [jsx(LoadingButton, {
+      sx: {
+        alignItems: 'center',
+        gap: '0.5rem'
+      },
+      children: [jsx(Button, {
         color: isConnected ? 'error' : 'success',
         size: "small",
         disabled: !isBrowserSupported || isTransitioning || isFlashing,
@@ -176,10 +179,14 @@ var ArduinoControllerStatusMessage = function ArduinoControllerStatusMessage() {
   //
   return jsxs(Stack, {
     direction: "row",
-    alignItems: "center",
-    gap: "1rem",
+    sx: {
+      alignItems: 'center',
+      gap: '1rem'
+    },
     children: [renderArduinoBaudRate(), jsxs(Stack, {
-      alignItems: "flex-end",
+      sx: {
+        alignItems: 'flex-end'
+      },
       children: [jsx(ExerciseRunnerControllerStatusMessage, {}), renderArduinoStatus()]
     }), renderArduinoConnectButton()]
   });

package/es/components/material-exercise/exercise-runner/arduino/ArduinoErrorDialog.js

@@ -1,13 +1,8 @@
 import { asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { Dialog, DialogTitle, DialogContent, Stack, DialogActions, Button } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
 import { useConnection, useMCUBridgeError, usePermissionState, PermissionAlert, MCUBridgeErrorText } from '@elice/mcu-bridge';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import Stack from '@mui/material/Stack';
 
 //
 //

package/es/components/material-exercise/exercise-runner/arduino/ArduinoHelpDialog.js

@@ -1,20 +1,10 @@
 import { slicedToArray as _slicedToArray } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
+import { FaIcon } from '@elice/eds-kit';
+import { Dialog, DialogTitle, DialogContent, Stack, Typography, DialogActions, FormControlLabel, Checkbox, Box, Button, Card, CardActionArea } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
-import { EliceIcon } from '@elice/mui-elements';
 import { faBookAlt, faArrowRight } from '@fortawesome/pro-regular-svg-icons';
-import { Card, CardActionArea } from '@mui/material';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Checkbox from '@mui/material/Checkbox';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
 import { useArduinoBridge } from './_context.js';
 import ArduinoHelpDialogChecklist from './ArduinoHelpDialogChecklist.js';
 
@@ -81,8 +71,10 @@ var ArduinoHelpDialog = function ArduinoHelpDialog() {
         children: jsxs(Stack, {
           direction: "row",
           spacing: 1.5,
-          alignItems: "center",
-          children: [jsx(EliceIcon, {
+          sx: {
+            alignItems: 'center'
+          },
+          children: [jsx(FaIcon, {
             icon: faBookAlt
           }), jsxs(Box, {
             sx: {
@@ -91,18 +83,22 @@ var ArduinoHelpDialog = function ArduinoHelpDialog() {
             },
             children: [jsx(Typography, {
               variant: "body2",
-              fontWeight: 700,
+              sx: {
+                fontWeight: 700
+              },
               children: intl.formatMessage({
                 id: 'exerciseRunner.arduino.help.manual.title'
               })
             }), jsx(Typography, {
               variant: "caption",
-              color: "text.secondary",
+              sx: {
+                color: 'text.secondary'
+              },
               children: intl.formatMessage({
                 id: 'exerciseRunner.arduino.help.manual.detail'
               })
             })]
-          }), jsx(EliceIcon, {
+          }), jsx(FaIcon, {
             icon: faArrowRight
           })]
         })
@@ -126,7 +122,9 @@ var ArduinoHelpDialog = function ArduinoHelpDialog() {
         spacing: 2.5,
         children: [jsx(Typography, {
           variant: "body2",
-          color: "text.secondary",
+          sx: {
+            color: 'text.secondary'
+          },
           children: intl.formatMessage({
             id: 'exerciseRunner.arduino.help.greeting'
           })

package/es/components/material-exercise/exercise-runner/arduino/ArduinoHelpDialogChecklist.js

@@ -1,8 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { Stack, Box, Typography } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
-import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
 
 //
 //
@@ -48,7 +46,9 @@ var ArduinoHelpDialogChecklist = function ArduinoHelpDialogChecklist() {
     return jsxs(Stack, {
       direction: "row",
       spacing: 1.5,
-      alignItems: "flex-start",
+      sx: {
+        alignItems: 'flex-start'
+      },
       children: [renderStepBadge(step), jsxs(Box, {
         sx: {
           flex: 1,
@@ -56,12 +56,14 @@ var ArduinoHelpDialogChecklist = function ArduinoHelpDialogChecklist() {
         },
         children: [jsx(Typography, {
           variant: "body2",
-          fontWeight: 700,
+          sx: {
+            fontWeight: 700
+          },
           children: title
         }), jsx(Typography, {
           variant: "caption",
-          color: "text.secondary",
           sx: {
+            color: 'text.secondary',
             display: 'block',
             mt: 0.25
           },

package/es/components/material-exercise/exercise-submit-history/ExerciseSubmitHistory.js

@@ -3,9 +3,9 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useState, useEffect } from 'react';
 import { getOrgMaterialExerciseExerciseRunningList, getOrgMaterialExerciseExerciseRoomUserFileGet, getOrgMaterialExerciseExerciseImageExerciseFileGet, getOrgMaterialExerciseExerciseRunningGet, getOrgMaterialExerciseUsercodeGet } from '@elice/api-client';
 import { Flex, Text, ResizableNext, Spinner } from '@elice/blocks';
+import { Stack, Box, Typography } from '@elice/eds-material';
 import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
 import { enums } from '@elice/types';
-import { Stack, Box, Typography } from '@mui/material';
 import dayjs from 'dayjs';
 import { camelizeKeys } from 'humps';
 import { useRecoilValue } from 'recoil';
@@ -438,23 +438,29 @@ var ExerciseSubmitHistory = function ExerciseSubmitHistory(_ref) {
    */
   var renderEmptySubmitHistoryView = function renderEmptySubmitHistoryView() {
     return jsxs(Stack, {
-      width: "100%",
-      height: "100%",
-      overflow: "hidden",
-      justifyContent: "center",
-      alignItems: "center",
       direction: "column",
-      gap: "1rem",
+      sx: {
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: '1rem'
+      },
       children: [jsx(Box, {
         component: "img",
-        width: "9.375rem",
-        height: "9.375rem",
         src: img,
-        alt: "emptyImage"
+        alt: "emptyImage",
+        sx: {
+          width: '9.375rem',
+          height: '9.375rem'
+        }
       }), jsx(Typography, {
         variant: "body1",
-        color: function color(theme) {
-          return theme.palette.primary.contrastText;
+        sx: {
+          color: function color(theme) {
+            return theme.palette.primary.contrastText;
+          }
         },
         children: __intl.formatMessage({
           id: 'exerciseSubmitHistory.empty'
@@ -467,20 +473,26 @@ var ExerciseSubmitHistory = function ExerciseSubmitHistory(_ref) {
    */
   var renderSubmitHistory = function renderSubmitHistory() {
     return jsxs(Stack, {
-      width: "100%",
-      height: "100%",
-      overflow: "hidden",
       direction: "row",
+      sx: {
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden'
+      },
       children: [jsx(Box, {
-        maxWidth: "15rem",
-        width: "100%",
-        height: "100%",
-        overflow: "hidden",
+        sx: {
+          maxWidth: '15rem',
+          width: '100%',
+          height: '100%',
+          overflow: 'hidden'
+        },
         children: renderRunningVersionList()
       }), jsxs(Stack, {
-        height: "100%",
-        overflow: "hidden",
-        width: "100%",
+        sx: {
+          height: '100%',
+          overflow: 'hidden',
+          width: '100%'
+        },
         children: [renderRunningContent(), renderRunningOutput()]
       })]
     });

package/es/components/shared/image-viewer/ImageViewer.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { ModalProps } from '@elice/eds-material';
+export type ImageProps = Partial<Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'onClick'>>;
+export interface ImageViewerSlotProps {
+    /** The props used for each slot inside the Modal. */
+    modal?: Omit<ModalProps, 'open' | 'onClose' | 'children'>;
+}
+export interface ImageViewerProps extends ImageProps {
+    /**
+     * Element to open image viewer when clicked.
+     * - if `children` is `<img />`, `src` and `alt` props are automatically set.
+     * - if `children` is not `<img />`, `src` and `alt` props are required. (otherwise, image viewer will not open)
+     */
+    children: React.ReactElement<ImageProps>;
+    /** The props used for each slot inside. */
+    slotProps?: ImageViewerSlotProps;
+    /** Callback fired when the component requests to be closed. */
+    onClose?: () => void;
+}
+declare const _default: React.ForwardRefExoticComponent<Omit<import("@elice/intl").IntlComponentExtraProps & Omit<import("@elice/intl").IntlComponentExtraProps & Omit<ImageViewerProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & {
+    __intl: import("@elice/intl").EliceIntlShape;
+} & React.RefAttributes<HTMLElement>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl">, "ref"> & React.RefAttributes<HTMLElement>>;
+export default _default;

package/es/components/shared/image-viewer/ImageViewer.js

@@ -0,0 +1,141 @@
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React, { forwardRef } from 'react';
+import { Modal, Fade, Stack } from '@elice/eds-material';
+import { RawIntlProvider, IntlComponentBuilder } from '@elice/intl';
+import messagesEn from './locales/en.json.js';
+import messagesKo from './locales/ko.json.js';
+import { imageViewerClasses } from './image-viewer.classes.js';
+import ImageViewerContent from './ImageViewerContent.js';
+import ImageViewerToolbar from './ImageViewerToolbar.js';
+
+//
+//
+//
+var overrideStyle = function overrideStyle(children) {
+  return [children.type, children.props.component].includes('img') ? {
+    cursor: 'zoom-in'
+  } : null;
+};
+//
+//
+//
+var ImageViewer = forwardRef(function (_a, _ref) {
+  var children = _a.children,
+    src = _a.src,
+    alt = _a.alt,
+    slotProps = _a.slotProps,
+    onClick = _a.onClick,
+    __intl = _a.__intl;
+    _a.__locale;
+    _a.__timeZone;
+    var props = __rest(_a, ["children", "src", "alt", "slotProps", "onClick", "__intl", "__locale", "__timeZone"]);
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    image = _React$useState2[0],
+    setImage = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    isZoomIn = _React$useState4[0],
+    setIsZoomIn = _React$useState4[1];
+  var open = Boolean(image);
+  /**
+   * close image viewer.
+   */
+  var handleClose = function handleClose() {
+    setImage(null);
+    setIsZoomIn(false);
+  };
+  /**
+   * toggle image zoom-in flag.
+   */
+  var handleZoomIn = function handleZoomIn() {
+    setIsZoomIn(function (prevIsZoomIn) {
+      return !prevIsZoomIn;
+    });
+  };
+  /**
+   *
+   */
+  var handleImageClick = function handleImageClick(e) {
+    if (typeof onClick === 'function') {
+      onClick(e);
+    }
+    var el = e.currentTarget;
+    var curImgSrc = src || el.src;
+    var curImgAlt = alt || el.alt;
+    if (curImgSrc) {
+      setImage({
+        src: curImgSrc,
+        alt: curImgAlt
+      });
+    }
+  };
+  /**
+   *
+   */
+  var renderImageViewerChildren = function renderImageViewerChildren() {
+    if (!React.isValidElement(children)) {
+      return children;
+    }
+    return React.cloneElement(children, Object.assign(Object.assign({}, props), {
+      style: overrideStyle(children),
+      onClick: handleImageClick,
+      ref: function ref(node) {
+        if (typeof _ref === 'function') {
+          _ref(node);
+        } else if (_ref) {
+          _ref.current = node;
+        }
+      }
+    }));
+  };
+  /**
+   *
+   */
+  var renderImageViewerModal = function renderImageViewerModal() {
+    return jsx(Modal, Object.assign({
+      className: imageViewerClasses.modal,
+      open: open,
+      onClose: handleClose
+    }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.modal, {
+      children: jsx(Fade, {
+        unmountOnExit: true,
+        "in": open,
+        children: jsxs(Stack, {
+          sx: {
+            justifyContent: 'center',
+            alignItems: 'center'
+          },
+          children: [jsx(ImageViewerToolbar, {
+            isOpen: open,
+            isZoomIn: isZoomIn,
+            image: image,
+            onClose: handleClose,
+            onZoomIn: handleZoomIn
+          }), jsx(ImageViewerContent, {
+            isZoomIn: isZoomIn,
+            image: image,
+            onZoomIn: handleZoomIn
+          })]
+        })
+      })
+    }));
+  };
+  //
+  //
+  //
+  return jsxs(RawIntlProvider, {
+    value: __intl,
+    children: [renderImageViewerModal(), jsx(Fragment, {
+      children: renderImageViewerChildren()
+    })]
+  });
+});
+//
+//
+//
+var ImageViewer$1 = new IntlComponentBuilder(ImageViewer).add('en', messagesEn).add('ko', messagesKo).build();
+
+export { ImageViewer$1 as default };

package/es/components/shared/image-viewer/ImageViewerContent.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ImageProps } from './ImageViewer';
+interface ImageViewerResultProps {
+    image: ImageProps | null;
+    isZoomIn: boolean;
+    onZoomIn: () => void;
+}
+declare const ImageViewerContent: React.FC<ImageViewerResultProps>;
+export default ImageViewerContent;