@elice/material-exercise 1.251120.1 → 1.260128.0-rc.0

package/es/components/material-exercise/exercise-menu/ExerciseMenuStdioFileBrowser.js

@@ -3,19 +3,15 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { Flex, Text, Hspace, NotificationCount, IconButton, Icon, Vspace } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
-import { eilAttachment, eilMathsignMultiplyBasic, eilDownload, eilFolder } from '@elice/icons';
+import { eilAttachment, eilMathsignMultiplyBasic, eilFolder, eilDownload } from '@elice/icons';
 import { useRawEliceIntl } from '@elice/intl';
 import { ImageViewer } from '@elice/mui-elements';
 import { Stack, Typography } from '@mui/material';
 import { useRecoilValue } from 'recoil';
-import ExerciseMenuButton from '../../shared/exercise-menu-button/ExerciseMenuButton.js';
 import { DARK_TEXT_SECONDARY_COLOR } from '../../../constants/color.js';
+import { StyledMenuButtonFileCount, StyledFilePopoverContent, StyledFilePopoverHeader, StyledFilePopoverBody, StyledFilePopoverBodyList, StyledFilePopoverBodyListItem, StyledFilePopoverBodyListItemContentFile, StyledFilePopoverBodyListItemDownloadButton, StyledFilePopoverBodyListItemContentImageWrap, StyledFilePopoverBodyListItemContentImage } from './ExerciseMenuStdioFileBrowser.styled.js';
 import { exerciseRunnerStdioFilesState } from '../context/recoil.js';
-import '../context/context.js';
-import '../context/recoilTypes.js';
-import '../context/subjects.js';
-import '../context/ExerciseProvider.js';
-import { StyledMenuButtonFileCount, StyledFilePopoverContent, StyledFilePopoverHeader, StyledFilePopoverBody, StyledFilePopoverBodyList, StyledFilePopoverBodyListItem, StyledFilePopoverBodyListItemContentImageWrap, StyledFilePopoverBodyListItemContentImage, StyledFilePopoverBodyListItemDownloadButton, StyledFilePopoverBodyListItemContentFile } from './ExerciseMenuStdioFileBrowser.styled.js';
+import ExerciseMenuButton from '../../shared/exercise-menu-button/ExerciseMenuButton.js';
 
 var ExerciseMenuStdioFileBrowser = function ExerciseMenuStdioFileBrowser() {
   var intl = useRawEliceIntl();
@@ -32,9 +28,7 @@ var ExerciseMenuStdioFileBrowser = function ExerciseMenuStdioFileBrowser() {
     if (stdioFiles && stdioFiles.length > 0) {
       setOpen(true);
     }
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [stdioFiles]);
+  }, [stdioFiles]);
   /**
    * Image type stdio file.
    */
@@ -140,9 +134,9 @@ var ExerciseMenuStdioFileBrowser = function ExerciseMenuStdioFileBrowser() {
       children: [jsxs(Flex, {
         align: "center",
         children: [jsx(Text, {
+          bold: true,
           role: "white",
           size: "small",
-          bold: true,
           children: intl.formatMessage({
             id: 'exerciseMenu.stdioFileBrowser.popover.header'
           })
@@ -153,11 +147,11 @@ var ExerciseMenuStdioFileBrowser = function ExerciseMenuStdioFileBrowser() {
           value: stdioFiles.length
         })]
       }), jsx(IconButton, {
+        transparent: true,
         icon: eilMathsignMultiplyBasic,
         role: "white",
         size: "micro",
         border: false,
-        transparent: true,
         onClick: function onClick() {
           return setOpen(false);
         }
@@ -194,12 +188,12 @@ var ExerciseMenuStdioFileBrowser = function ExerciseMenuStdioFileBrowser() {
       title: intl.formatMessage({
         id: 'exerciseMenu.stdioFileBrowser.button.tooltip'
       }),
+      ref: anchorRef,
       onClick: function onClick() {
         return setOpen(function (prev) {
           return !prev;
         });
       },
-      ref: anchorRef,
       children: jsx(StyledMenuButtonFileCount, {
         role: "white",
         value: stdioFiles.length

package/es/components/material-exercise/exercise-menu/ExerciseMenuStdioFileBrowser.styled.d.ts

@@ -1,13 +1,46 @@
-/// <reference types="react" />
-export declare const StyledMenuButtonFileCount: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").NotificationCountProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const StyledFilePopoverContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledFilePopoverHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledFilePopoverBody: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledFilePopoverBodyList: import("styled-components").StyledComponent<"ul", any, {}, never>;
-export declare const StyledFilePopoverBodyListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
-export declare const StyledFilePopoverBodyListItemDownloadButton: import("styled-components").StyledComponent<"a", any, {}, never>;
-export declare const StyledFilePopoverBodyListItemContentFile: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledFilePopoverBodyListItemContentImageWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledFilePopoverBodyListItemContentImage: import("styled-components").StyledComponent<"img", any, {}, never>;
-export declare const StyledPreferenceBodyItem: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledSelect: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").SelectProps & import("react").RefAttributes<HTMLSelectElement>>, any, {}, never>;
+export declare const StyledMenuButtonFileCount: import("@emotion/styled").StyledComponent<import("@elice/blocks").NotificationCountProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledFilePopoverContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledFilePopoverHeader: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledFilePopoverBody: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledFilePopoverBodyList: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const StyledFilePopoverBodyListItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const StyledFilePopoverBodyListItemDownloadButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
+export declare const StyledFilePopoverBodyListItemContentFile: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledFilePopoverBodyListItemContentImageWrap: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledFilePopoverBodyListItemContentImage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const StyledPreferenceBodyItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledSelect: import("@emotion/styled").StyledComponent<import("@elice/blocks").SelectProps & import("react").RefAttributes<HTMLSelectElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/es/components/material-exercise/exercise-menu/ExerciseMenuStdioFileBrowser.styled.js

@@ -1,42 +1,85 @@
+import _styled from '@emotion/styled/base';
 import { NotificationCount, Select } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
-import styled from 'styled-components';
 
-var StyledMenuButtonFileCount = styled(NotificationCount).withConfig({
-  componentId: "sc-9mtuee-0"
-})(["position:absolute;top:0.2rem;right:0.2rem;padding:0;min-width:0.625rem;height:0.625rem;font-size:0.5rem;"]);
-var StyledFilePopoverContent = styled.div.withConfig({
-  componentId: "sc-9mtuee-1"
-})(["display:flex;flex-direction:column;padding:0;width:252px;min-height:178px;max-height:383px;border-radius:8px;background-color:", ";overflow:hidden;position:absolute;top:2.125rem;right:0;z-index:1;"], base.color.navy6);
-var StyledFilePopoverHeader = styled.div.withConfig({
-  componentId: "sc-9mtuee-2"
-})(["flex:0 0 2.5rem;display:flex;justify-content:space-between;align-items:center;padding:0 1rem;color:white;background-color:", ";"], base.color.navy7);
-var StyledFilePopoverBody = styled.div.withConfig({
-  componentId: "sc-9mtuee-3"
-})(["flex:1;overflow-x:hidden;overflow-y:auto;"]);
-var StyledFilePopoverBodyList = styled.ul.withConfig({
-  componentId: "sc-9mtuee-4"
-})(["margin:0;padding:0.5rem;width:100%;height:100%;"]);
-var StyledFilePopoverBodyListItem = styled.li.withConfig({
-  componentId: "sc-9mtuee-5"
-})(["display:flex;margin-bottom:0.5rem;border-radius:0.5rem;background-color:", ";overflow:hidden;&:last-of-type{margin-bottom:0;}"], base.color.navy5);
-var StyledFilePopoverBodyListItemDownloadButton = styled.a.withConfig({
-  componentId: "sc-9mtuee-6"
-})(["display:flex;align-items:center;justify-content:center;padding:0.75rem;color:", ";font-size:1rem;background-color:", ";"], base.color.white, base.color.primary5);
-var StyledFilePopoverBodyListItemContentFile = styled.div.withConfig({
-  componentId: "sc-9mtuee-7"
-})(["flex:1;display:flex;align-items:center;justify-content:space-between;padding:0 0.5rem;"]);
-var StyledFilePopoverBodyListItemContentImageWrap = styled.div.withConfig({
-  componentId: "sc-9mtuee-8"
-})(["display:flex;padding:0.5rem;flex:1 1 0;background:", ";"], base.color.white);
-var StyledFilePopoverBodyListItemContentImage = styled.img.withConfig({
-  componentId: "sc-9mtuee-9"
-})(["width:100%;max-height:128px;object-fit:contain;cursor:zoom-in;"]);
-var StyledPreferenceBodyItem = styled.div.withConfig({
-  componentId: "sc-9mtuee-10"
-})(["display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;min-height:2rem;color:white;&:last-child{margin-bottom:0;}"]);
-var StyledSelect = styled(Select).withConfig({
-  componentId: "sc-9mtuee-11"
-})(["> div{background:", " !important;border-color:", " !important;}select{padding:0 !important;height:2rem !important;color:#fff !important;> option{background:", " !important;}}"], base.color.navy8, base.color.navy7, base.color.navy8);
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var StyledMenuButtonFileCount = /*#__PURE__*/_styled(NotificationCount, {
+  target: "e8nx2or11"
+})("production" === "production" ? {
+  name: "km04cw",
+  styles: "position:absolute;top:0.2rem;right:0.2rem;padding:0;min-width:0.625rem;height:0.625rem;font-size:0.5rem"
+} : {
+  name: "km04cw",
+  styles: "position:absolute;top:0.2rem;right:0.2rem;padding:0;min-width:0.625rem;height:0.625rem;font-size:0.5rem",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledFilePopoverContent = /*#__PURE__*/_styled("div", {
+  target: "e8nx2or10"
+})("display:flex;flex-direction:column;padding:0;width:252px;min-height:178px;max-height:383px;border-radius:8px;background-color:", base.color.navy6, ";overflow:hidden;position:absolute;top:2.125rem;right:0;z-index:1;");
+var StyledFilePopoverHeader = /*#__PURE__*/_styled("div", {
+  target: "e8nx2or9"
+})("flex:0 0 2.5rem;display:flex;justify-content:space-between;align-items:center;padding:0 1rem;color:white;background-color:", base.color.navy7, ";");
+var StyledFilePopoverBody = /*#__PURE__*/_styled("div", {
+  target: "e8nx2or8"
+})("production" === "production" ? {
+  name: "1j3th59",
+  styles: "flex:1;overflow-x:hidden;overflow-y:auto"
+} : {
+  name: "1j3th59",
+  styles: "flex:1;overflow-x:hidden;overflow-y:auto",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledFilePopoverBodyList = /*#__PURE__*/_styled("ul", {
+  target: "e8nx2or7"
+})("production" === "production" ? {
+  name: "1jki6i3",
+  styles: "margin:0;padding:0.5rem;width:100%;height:100%"
+} : {
+  name: "1jki6i3",
+  styles: "margin:0;padding:0.5rem;width:100%;height:100%",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledFilePopoverBodyListItem = /*#__PURE__*/_styled("li", {
+  target: "e8nx2or6"
+})("display:flex;margin-bottom:0.5rem;border-radius:0.5rem;background-color:", base.color.navy5, ";overflow:hidden;&:last-of-type{margin-bottom:0;}");
+var StyledFilePopoverBodyListItemDownloadButton = /*#__PURE__*/_styled("a", {
+  target: "e8nx2or5"
+})("display:flex;align-items:center;justify-content:center;padding:0.75rem;color:", base.color.white, ";font-size:1rem;background-color:", base.color.primary5, ";");
+var StyledFilePopoverBodyListItemContentFile = /*#__PURE__*/_styled("div", {
+  target: "e8nx2or4"
+})("production" === "production" ? {
+  name: "zrq7fl",
+  styles: "flex:1;display:flex;align-items:center;justify-content:space-between;padding:0 0.5rem"
+} : {
+  name: "zrq7fl",
+  styles: "flex:1;display:flex;align-items:center;justify-content:space-between;padding:0 0.5rem",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledFilePopoverBodyListItemContentImageWrap = /*#__PURE__*/_styled("div", {
+  target: "e8nx2or3"
+})("display:flex;padding:0.5rem;flex:1 1 0;background:", base.color.white, ";");
+var StyledFilePopoverBodyListItemContentImage = /*#__PURE__*/_styled("img", {
+  target: "e8nx2or2"
+})("production" === "production" ? {
+  name: "j3zbdm",
+  styles: "width:100%;max-height:128px;object-fit:contain;cursor:zoom-in"
+} : {
+  name: "j3zbdm",
+  styles: "width:100%;max-height:128px;object-fit:contain;cursor:zoom-in",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledPreferenceBodyItem = /*#__PURE__*/_styled("div", {
+  target: "e8nx2or1"
+})("production" === "production" ? {
+  name: "10vug81",
+  styles: "display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;min-height:2rem;color:white;&:last-child{margin-bottom:0;}"
+} : {
+  name: "10vug81",
+  styles: "display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;min-height:2rem;color:white;&:last-child{margin-bottom:0;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledSelect = /*#__PURE__*/_styled(Select, {
+  target: "e8nx2or0"
+})(">div{background:", base.color.navy8, "!important;border-color:", base.color.navy7, "!important;}select{padding:0!important;height:2rem!important;color:#fff!important;>option{background:", base.color.navy8, "!important;}}");
 
 export { StyledFilePopoverBody, StyledFilePopoverBodyList, StyledFilePopoverBodyListItem, StyledFilePopoverBodyListItemContentFile, StyledFilePopoverBodyListItemContentImage, StyledFilePopoverBodyListItemContentImageWrap, StyledFilePopoverBodyListItemDownloadButton, StyledFilePopoverContent, StyledFilePopoverHeader, StyledMenuButtonFileCount, StyledPreferenceBodyItem, StyledSelect };

package/es/components/material-exercise/exercise-multilang-dropdown/ExerciseMultilangDropdown.js

@@ -4,11 +4,8 @@ import React from 'react';
 import { useDebounce } from 'react-use';
 import { Dropdown } from '@elice/blocks';
 import { useRecoilValue, useRecoilState } from 'recoil';
-import { exerciseMultilangLanguagesState, exerciseMultilangEnvironmentState } from '../context/recoil.js';
 import { ExerciseContext } from '../context/context.js';
-import '../context/recoilTypes.js';
-import '../context/subjects.js';
-import '../context/ExerciseProvider.js';
+import { exerciseMultilangLanguagesState, exerciseMultilangEnvironmentState } from '../context/recoil.js';
 
 var ExerciseMultilangDropdown = function ExerciseMultilangDropdown() {
   var _React$useContext = React.useContext(ExerciseContext),
@@ -38,9 +35,9 @@ var ExerciseMultilangDropdown = function ExerciseMultilangDropdown() {
     return null;
   }
   return jsx(Dropdown, {
+    border: true,
     type: "dark",
     size: "tiny",
-    border: true,
     placement: "bottom-end",
     value: multilangEnvironment.language,
     onChange: function onChange(language) {

package/es/components/material-exercise/exercise-multilang-dropdown/ExerciseMultilangDropdownLazy.d.ts

@@ -1,2 +1,2 @@
-declare const ExerciseMultilangDropdownLazy: () => JSX.Element;
+declare const ExerciseMultilangDropdownLazy: () => import("react/jsx-runtime").JSX.Element;
 export default ExerciseMultilangDropdownLazy;

package/es/components/material-exercise/exercise-preview/ExercisePreview.js

@@ -1,23 +1,21 @@
+import _styled from '@emotion/styled/base';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { base } from '@elice/design-tokens';
 import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
 import { useRecoilValue } from 'recoil';
-import styled from 'styled-components';
-import NoVncLazy from '../../shared/no-vnc/NoVncLazy.js';
 import WebBrowser from '../../shared/web-browser/WebBrowser.js';
-import { exerciseState, exercisePreviewTypeState, exerciseRunnerSubmittingState, exerciseRunnerRunningState, exerciseRunnerRoomConnectionInfoState } from '../context/recoil.js';
-import { ExerciseContext } from '../context/context.js';
-import { ExercisePreviewType } from '../context/recoilTypes.js';
-import '../context/subjects.js';
-import '../context/ExerciseProvider.js';
 import ExercisePreviewDisplayModeButton from './ExercisePreviewDisplayModeButton.js';
 import messageEn from './locales/en.json.js';
 import messageKo from './locales/ko.json.js';
+import { exerciseState, exercisePreviewTypeState, exerciseRunnerSubmittingState, exerciseRunnerRunningState, exerciseRunnerRoomConnectionInfoState } from '../context/recoil.js';
+import { ExercisePreviewType } from '../context/recoilTypes.js';
+import NoVncLazy from '../../shared/no-vnc/NoVncLazy.js';
+import { ExerciseContext } from '../context/context.js';
 
-var StyledExercisePreview = styled.div.withConfig({
-  componentId: "sc-i6d1i5-0"
-})(["width:100%;height:100%;background-color:", ";"], base.color.navy7);
+var StyledExercisePreview = /*#__PURE__*/_styled("div", {
+  target: "e16xqdux0"
+})("width:100%;height:100%;background-color:", base.color.navy7, ";");
 /**
  * Preview result of exercise running.
  * - NoVnc

package/es/components/material-exercise/exercise-preview/ExercisePreviewDisplayModeButton.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
 import type { ExerciseMenuButtonProps } from "../../shared/exercise-menu-button";
 type ExercisePreviewDisplayModeButtonProps = Omit<ExerciseMenuButtonProps, 'icon' | 'onClick'>;
-declare const ExercisePreviewDisplayModeButton: React.ForwardRefExoticComponent<ExercisePreviewDisplayModeButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const ExercisePreviewDisplayModeButton: import("react").ForwardRefExoticComponent<ExercisePreviewDisplayModeButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default ExercisePreviewDisplayModeButton;

package/es/components/material-exercise/exercise-preview/ExercisePreviewDisplayModeButton.js

@@ -4,12 +4,9 @@ import { forwardRef } from 'react';
 import { eilScreenHalf, eilPanelRight } from '@elice/icons';
 import { useRawEliceIntl } from '@elice/intl';
 import { useRecoilState } from 'recoil';
-import ExerciseMenuButton from '../../shared/exercise-menu-button/ExerciseMenuButton.js';
 import { exercisePreviewDisplayModeState } from '../context/recoil.js';
-import '../context/context.js';
+import ExerciseMenuButton from '../../shared/exercise-menu-button/ExerciseMenuButton.js';
 import { ExercisePreviewDisplayMode } from '../context/recoilTypes.js';
-import '../context/subjects.js';
-import '../context/ExerciseProvider.js';
 
 var ExercisePreviewDisplayModeButton = forwardRef(function (props, ref) {
   var _a;
@@ -37,8 +34,8 @@ var ExercisePreviewDisplayModeButton = forwardRef(function (props, ref) {
       id: 'exercisePreview.displayModeButton.mini'
     }),
     placement: "bottom-end",
-    onClick: handleClick,
-    ref: ref
+    ref: ref,
+    onClick: handleClick
   }));
 });
 

package/es/components/material-exercise/exercise-rightpane/ExerciseRightpane.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
 import type { WithIntlComponentBuilderProps as EliceIntlProps } from '@elice/intl';
+import type React from 'react';
 declare const _default: React.ForwardRefExoticComponent<Omit<import("@elice/intl").IntlComponentExtraProps & Omit<EliceIntlProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl">, "ref"> & React.RefAttributes<any>>;
 export default _default;

package/es/components/material-exercise/exercise-rightpane/ExerciseRightpane.js

@@ -1,38 +1,42 @@
 import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import _styled from '@emotion/styled/base';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { IconButton, Hr, Flex, Text } from '@elice/blocks';
+import { Hr, Flex, Text, IconButton } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { eilMathsignMultiplyBasic } from '@elice/icons';
 import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
 import { useRecoilState } from 'recoil';
-import styled from 'styled-components';
 import { MATERIAL_DIVIDER_BORDER_VALUE, getMaterialScrollBarCss } from '../../../constants/stylesheets.js';
-import { exerciseRightpaneActiveState } from '../context/recoil.js';
-import '../context/context.js';
-import '../context/recoilTypes.js';
-import '../context/subjects.js';
-import '../context/ExerciseProvider.js';
 import ExerciseRightpaneEditorPerference from './ExerciseRightpaneEditorPerference.js';
 import ExerciseRightpaneEnvironment from './ExerciseRightpaneEnvironment.js';
 import messageEn from './locales/en.json.js';
 import messageKo from './locales/ko.json.js';
+import { exerciseRightpaneActiveState } from '../context/recoil.js';
 
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 var HEADER_CLOSE_BUTTON_SIZE = '1.75rem';
-var StyledRightpaneWrap = styled.div.withConfig({
-  componentId: "sc-1tj3x49-0"
-})(["position:relative;display:flex;flex-direction:column;width:20rem;border-left:", ";color:white;background-color:", ";"], MATERIAL_DIVIDER_BORDER_VALUE, base.color.navy9);
-var StyledPreferenceHeader = styled.div.withConfig({
-  componentId: "sc-1tj3x49-1"
-})(["display:flex;flex-direction:column;padding:0.25rem 1rem;"]);
-var StyledPreferenceHeaderCloseButton = styled(IconButton).withConfig({
-  componentId: "sc-1tj3x49-2"
-})(["flex:0 0 ", ";height:", " !important;"], HEADER_CLOSE_BUTTON_SIZE, HEADER_CLOSE_BUTTON_SIZE);
-var StyledRightpaneBodyWrap = styled.div.withConfig({
-  componentId: "sc-1tj3x49-3"
-})(["flex:1;padding:1rem;overflow-x:hidden;overflow-y:auto;", ""], getMaterialScrollBarCss({
+var StyledRightpaneWrap = /*#__PURE__*/_styled("div", {
+  target: "e1wt9g7d3"
+})("position:relative;display:flex;flex-direction:column;width:20rem;border-left:", MATERIAL_DIVIDER_BORDER_VALUE, ";color:white;background-color:", base.color.navy9, ";");
+var StyledPreferenceHeader = /*#__PURE__*/_styled("div", {
+  target: "e1wt9g7d2"
+})("production" === "production" ? {
+  name: "1tvqk3q",
+  styles: "display:flex;flex-direction:column;padding:0.25rem 1rem"
+} : {
+  name: "1tvqk3q",
+  styles: "display:flex;flex-direction:column;padding:0.25rem 1rem",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledPreferenceHeaderCloseButton = /*#__PURE__*/_styled(IconButton, {
+  target: "e1wt9g7d1"
+})("flex:0 0 ", HEADER_CLOSE_BUTTON_SIZE, ";height:", HEADER_CLOSE_BUTTON_SIZE, "!important;");
+var StyledRightpaneBodyWrap = /*#__PURE__*/_styled("div", {
+  target: "e1wt9g7d0"
+})("flex:1;padding:1rem;overflow-x:hidden;overflow-y:auto;", getMaterialScrollBarCss({
   width: '0.375rem',
   borderRadius: '2px'
-}));
+}), ";");
 var ExerciseRightpane = function ExerciseRightpane(_ref) {
   var __intl = _ref.__intl;
   var _useRecoilState = useRecoilState(exerciseRightpaneActiveState),
@@ -70,9 +74,9 @@ var ExerciseRightpane = function ExerciseRightpane(_ref) {
       children: jsxs(Flex, {
         align: "center",
         children: [jsx(Text, {
-          role: "white",
           bold: true,
           block: true,
+          role: "white",
           children: renderRightpaneHeaderTitle()
         }), jsx(StyledPreferenceHeaderCloseButton, {
           icon: eilMathsignMultiplyBasic,

package/es/components/material-exercise/exercise-rightpane/ExerciseRightpaneEditorPerference.js

@@ -2,14 +2,9 @@ import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPlugin
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { useRecoilState } from 'recoil';
-import '../../shared/monaco-editor/MonacoEditorLazy.js';
 import MonacoEditorPerference from '../../shared/monaco-editor/MonacoEditorPerferenceForm.js';
-import 'monaco-editor/esm/vs/editor/editor.api';
-import { exerciseEditorPreferenceState } from '../context/recoil.js';
 import { ExerciseContext } from '../context/context.js';
-import '../context/recoilTypes.js';
-import '../context/subjects.js';
-import '../context/ExerciseProvider.js';
+import { exerciseEditorPreferenceState } from '../context/recoil.js';
 
 var ExerciseRightpaneEditorPerference = function ExerciseRightpaneEditorPerference() {
   var _React$useContext = React.useContext(ExerciseContext),

package/es/components/material-exercise/exercise-rightpane/ExerciseRightpaneEnvironment.js

@@ -1,18 +1,23 @@
+import _styled from '@emotion/styled/base';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { Text, Vspace } from '@elice/blocks';
 import { useRawEliceIntl } from '@elice/intl';
 import { useRecoilValue } from 'recoil';
-import styled from 'styled-components';
-import { exerciseState } from '../context/recoil.js';
 import { ExerciseContext } from '../context/context.js';
-import '../context/recoilTypes.js';
-import '../context/subjects.js';
-import '../context/ExerciseProvider.js';
+import { exerciseState } from '../context/recoil.js';
 
-var StyledEnvironmentList = styled.ul.withConfig({
-  componentId: "sc-208wkr-0"
-})(["margin:0;padding:0;list-style:none;> li{margin-bottom:2rem;&:last-of-type{margin-bottom:0;}}"]);
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var StyledEnvironmentList = /*#__PURE__*/_styled("ul", {
+  target: "e6asw7b0"
+})("production" === "production" ? {
+  name: "f8nl6o",
+  styles: "margin:0;padding:0;list-style:none;>li{margin-bottom:2rem;&:last-of-type{margin-bottom:0;}}"
+} : {
+  name: "f8nl6o",
+  styles: "margin:0;padding:0;list-style:none;>li{margin-bottom:2rem;&:last-of-type{margin-bottom:0;}}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 var ExerciseRightpaneEnvironment = function ExerciseRightpaneEnvironment() {
   var intl = useRawEliceIntl();
   var _React$useContext = React.useContext(ExerciseContext),
@@ -89,16 +94,16 @@ var ExerciseRightpaneEnvironment = function ExerciseRightpaneEnvironment() {
         value = _ref.value;
       return jsxs("li", {
         children: [jsx(Text, {
-          role: "navy",
           block: true,
+          role: "navy",
           size: "small",
           children: name
         }), jsx(Vspace, {
           height: 0.5
         }), jsx(Text, {
-          role: "white",
           bold: true,
           block: true,
+          role: "white",
           size: "small",
           children: value
         })]

package/es/components/material-exercise/exercise-room/ExerciseRoom.styled.d.ts

@@ -1,9 +1,30 @@
-export declare const StyledExerciseRoomTableWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledExerciseRoomTable: import("styled-components").StyledComponent<"table", any, {}, never>;
-export declare const StyledExerciseRoomThead: import("styled-components").StyledComponent<"thead", any, {}, never>;
-export declare const StyledExerciseRoomTd: import("styled-components").StyledComponent<"td", any, {}, never>;
-export declare const StyledExerciseRoomTr: import("styled-components").StyledComponent<"tr", any, {}, never>;
-export declare const StyledExerciseRoomTbody: import("styled-components").StyledComponent<"tbody", any, {
-    hoverable?: boolean | undefined;
-}, never>;
-export declare const StyledExerciseRoomTh: import("styled-components").StyledComponent<"th", any, {}, never>;
+export declare const StyledExerciseRoomTableWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledExerciseRoomTable: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
+export declare const StyledExerciseRoomThead: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, {}>;
+export declare const StyledExerciseRoomTd: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
+export declare const StyledExerciseRoomTr: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;
+export declare const StyledExerciseRoomTbody: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    hoverable?: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, {}>;
+export declare const StyledExerciseRoomTh: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, {}>;

package/es/components/material-exercise/exercise-room/ExerciseRoom.styled.js

@@ -1,32 +1,40 @@
+import _styled from '@emotion/styled/base';
 import { base } from '@elice/design-tokens';
-import styled from 'styled-components';
 
-var StyledExerciseRoomTableWrapper = styled.div.withConfig({
-  componentId: "sc-r4oydl-0"
-})(["overflow-y:auto;max-height:25rem;border-radius:4px;background-color:", ";height:18.75rem;"], base.color.navy7);
-var StyledExerciseRoomTable = styled.table.withConfig({
-  componentId: "sc-r4oydl-1"
-})(["width:100%;color:", ";border-collapse:collapse;"], base.color.navy2);
-var StyledExerciseRoomThead = styled.thead.withConfig({
-  componentId: "sc-r4oydl-2"
-})(["& th{position:sticky;top:0;background-color:", ";z-index:100;border-bottom:1px solid ", ";}"], base.color.navy7, base.color.navy6);
-var StyledExerciseRoomTd = styled.td.withConfig({
-  componentId: "sc-r4oydl-3"
-})(["padding:0.875rem 1rem;"]);
-var StyledExerciseRoomTr = styled.tr.withConfig({
-  componentId: "sc-r4oydl-4"
-})([""]);
-var StyledExerciseRoomTbody = styled.tbody.withConfig({
-  componentId: "sc-r4oydl-5"
-})(["", "{border-bottom:1px solid ", ";}", ":hover{background-color:", ";cursor:", ";}", "{height:3.25rem;}"], StyledExerciseRoomTr, base.color.navy6, StyledExerciseRoomTr, function (_ref) {
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var StyledExerciseRoomTableWrapper = /*#__PURE__*/_styled("div", {
+  target: "e1sros4l6"
+})("overflow-y:auto;max-height:25rem;border-radius:4px;background-color:", base.color.navy7, ";height:18.75rem;");
+var StyledExerciseRoomTable = /*#__PURE__*/_styled("table", {
+  target: "e1sros4l5"
+})("width:100%;color:", base.color.navy2, ";border-collapse:collapse;");
+var StyledExerciseRoomThead = /*#__PURE__*/_styled("thead", {
+  target: "e1sros4l4"
+})("& th{position:sticky;top:0;background-color:", base.color.navy7, ";z-index:100;border-bottom:1px solid ", base.color.navy6, ";}");
+var StyledExerciseRoomTd = /*#__PURE__*/_styled("td", {
+  target: "e1sros4l3"
+})("production" === "production" ? {
+  name: "1brii92",
+  styles: "padding:0.875rem 1rem"
+} : {
+  name: "1brii92",
+  styles: "padding:0.875rem 1rem",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledExerciseRoomTr = /*#__PURE__*/_styled("tr", {
+  target: "e1sros4l2"
+})();
+var StyledExerciseRoomTbody = /*#__PURE__*/_styled("tbody", {
+  target: "e1sros4l1"
+})(StyledExerciseRoomTr, "{border-bottom:1px solid ", base.color.navy6, ";}", StyledExerciseRoomTr, ":hover{background-color:", function (_ref) {
   var hoverable = _ref.hoverable;
   return hoverable ? base.color.navy5 : '';
-}, function (_ref2) {
+}, ";cursor:", function (_ref2) {
   var hoverable = _ref2.hoverable;
   return hoverable ? 'pointer' : 'auto';
-}, StyledExerciseRoomTd);
-var StyledExerciseRoomTh = styled.th.withConfig({
-  componentId: "sc-r4oydl-6"
-})(["font-weight:bold;font-size:", ";padding:0.875rem 1rem;text-align:left;"], base.size.body1);
+}, ";}", StyledExerciseRoomTd, "{height:3.25rem;}");
+var StyledExerciseRoomTh = /*#__PURE__*/_styled("th", {
+  target: "e1sros4l0"
+})("font-weight:bold;font-size:", base.size.body1, ";padding:0.875rem 1rem;text-align:left;");
 
 export { StyledExerciseRoomTable, StyledExerciseRoomTableWrapper, StyledExerciseRoomTbody, StyledExerciseRoomTd, StyledExerciseRoomTh, StyledExerciseRoomThead, StyledExerciseRoomTr };