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

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

@@ -12,14 +12,10 @@ var intl = require('@elice/intl');
 var muiElements = require('@elice/mui-elements');
 var material = require('@mui/material');
 var recoil = require('recoil');
-var ExerciseMenuButton = require('../../shared/exercise-menu-button/ExerciseMenuButton.js');
 var color = require('../../../constants/color.js');
-var recoil$1 = require('../context/recoil.js');
-require('../context/context.js');
-require('../context/recoilTypes.js');
-require('../context/subjects.js');
-require('../context/ExerciseProvider.js');
 var ExerciseMenuStdioFileBrowser_styled = require('./ExerciseMenuStdioFileBrowser.styled.js');
+var recoil$1 = require('../context/recoil.js');
+var ExerciseMenuButton = require('../../shared/exercise-menu-button/ExerciseMenuButton.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -40,9 +36,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.
    */
@@ -148,9 +142,9 @@ var ExerciseMenuStdioFileBrowser = function ExerciseMenuStdioFileBrowser() {
       children: [jsxRuntime.jsxs(blocks.Flex, {
         align: "center",
         children: [jsxRuntime.jsx(blocks.Text, {
+          bold: true,
           role: "white",
           size: "small",
-          bold: true,
           children: intl$1.formatMessage({
             id: 'exerciseMenu.stdioFileBrowser.popover.header'
           })
@@ -161,11 +155,11 @@ var ExerciseMenuStdioFileBrowser = function ExerciseMenuStdioFileBrowser() {
           value: stdioFiles.length
         })]
       }), jsxRuntime.jsx(blocks.IconButton, {
+        transparent: true,
         icon: icons.eilMathsignMultiplyBasic,
         role: "white",
         size: "micro",
         border: false,
-        transparent: true,
         onClick: function onClick() {
           return setOpen(false);
         }
@@ -202,12 +196,12 @@ var ExerciseMenuStdioFileBrowser = function ExerciseMenuStdioFileBrowser() {
       title: intl$1.formatMessage({
         id: 'exerciseMenu.stdioFileBrowser.button.tooltip'
       }),
+      ref: anchorRef,
       onClick: function onClick() {
         return setOpen(function (prev) {
           return !prev;
         });
       },
-      ref: anchorRef,
       children: jsxRuntime.jsx(ExerciseMenuStdioFileBrowser_styled.StyledMenuButtonFileCount, {
         role: "white",
         value: stdioFiles.length

package/cjs/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/cjs/components/material-exercise/exercise-menu/ExerciseMenuStdioFileBrowser.styled.js

@@ -1,49 +1,92 @@
 'use strict';
 
+var _styled = require('@emotion/styled/base');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
-var styled = require('styled-components');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 
-var StyledMenuButtonFileCount = styled__default.default(blocks.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__default.default.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;"], designTokens.base.color.navy6);
-var StyledFilePopoverHeader = styled__default.default.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:", ";"], designTokens.base.color.navy7);
-var StyledFilePopoverBody = styled__default.default.div.withConfig({
-  componentId: "sc-9mtuee-3"
-})(["flex:1;overflow-x:hidden;overflow-y:auto;"]);
-var StyledFilePopoverBodyList = styled__default.default.ul.withConfig({
-  componentId: "sc-9mtuee-4"
-})(["margin:0;padding:0.5rem;width:100%;height:100%;"]);
-var StyledFilePopoverBodyListItem = styled__default.default.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;}"], designTokens.base.color.navy5);
-var StyledFilePopoverBodyListItemDownloadButton = styled__default.default.a.withConfig({
-  componentId: "sc-9mtuee-6"
-})(["display:flex;align-items:center;justify-content:center;padding:0.75rem;color:", ";font-size:1rem;background-color:", ";"], designTokens.base.color.white, designTokens.base.color.primary5);
-var StyledFilePopoverBodyListItemContentFile = styled__default.default.div.withConfig({
-  componentId: "sc-9mtuee-7"
-})(["flex:1;display:flex;align-items:center;justify-content:space-between;padding:0 0.5rem;"]);
-var StyledFilePopoverBodyListItemContentImageWrap = styled__default.default.div.withConfig({
-  componentId: "sc-9mtuee-8"
-})(["display:flex;padding:0.5rem;flex:1 1 0;background:", ";"], designTokens.base.color.white);
-var StyledFilePopoverBodyListItemContentImage = styled__default.default.img.withConfig({
-  componentId: "sc-9mtuee-9"
-})(["width:100%;max-height:128px;object-fit:contain;cursor:zoom-in;"]);
-var StyledPreferenceBodyItem = styled__default.default.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__default.default(blocks.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;}}"], designTokens.base.color.navy8, designTokens.base.color.navy7, designTokens.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__default.default(blocks.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__default.default("div", {
+  target: "e8nx2or10"
+})("display:flex;flex-direction:column;padding:0;width:252px;min-height:178px;max-height:383px;border-radius:8px;background-color:", designTokens.base.color.navy6, ";overflow:hidden;position:absolute;top:2.125rem;right:0;z-index:1;");
+var StyledFilePopoverHeader = /*#__PURE__*/_styled__default.default("div", {
+  target: "e8nx2or9"
+})("flex:0 0 2.5rem;display:flex;justify-content:space-between;align-items:center;padding:0 1rem;color:white;background-color:", designTokens.base.color.navy7, ";");
+var StyledFilePopoverBody = /*#__PURE__*/_styled__default.default("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__default.default("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__default.default("li", {
+  target: "e8nx2or6"
+})("display:flex;margin-bottom:0.5rem;border-radius:0.5rem;background-color:", designTokens.base.color.navy5, ";overflow:hidden;&:last-of-type{margin-bottom:0;}");
+var StyledFilePopoverBodyListItemDownloadButton = /*#__PURE__*/_styled__default.default("a", {
+  target: "e8nx2or5"
+})("display:flex;align-items:center;justify-content:center;padding:0.75rem;color:", designTokens.base.color.white, ";font-size:1rem;background-color:", designTokens.base.color.primary5, ";");
+var StyledFilePopoverBodyListItemContentFile = /*#__PURE__*/_styled__default.default("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__default.default("div", {
+  target: "e8nx2or3"
+})("display:flex;padding:0.5rem;flex:1 1 0;background:", designTokens.base.color.white, ";");
+var StyledFilePopoverBodyListItemContentImage = /*#__PURE__*/_styled__default.default("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__default.default("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__default.default(blocks.Select, {
+  target: "e8nx2or0"
+})(">div{background:", designTokens.base.color.navy8, "!important;border-color:", designTokens.base.color.navy7, "!important;}select{padding:0!important;height:2rem!important;color:#fff!important;>option{background:", designTokens.base.color.navy8, "!important;}}");
 
 exports.StyledFilePopoverBody = StyledFilePopoverBody;
 exports.StyledFilePopoverBodyList = StyledFilePopoverBodyList;

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

@@ -8,11 +8,8 @@ var React = require('react');
 var reactUse = require('react-use');
 var blocks = require('@elice/blocks');
 var recoil = require('recoil');
-var recoil$1 = require('../context/recoil.js');
 var context = require('../context/context.js');
-require('../context/recoilTypes.js');
-require('../context/subjects.js');
-require('../context/ExerciseProvider.js');
+var recoil$1 = require('../context/recoil.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -46,9 +43,9 @@ var ExerciseMultilangDropdown = function ExerciseMultilangDropdown() {
     return null;
   }
   return jsxRuntime.jsx(blocks.Dropdown, {
+    border: true,
     type: "dark",
     size: "tiny",
-    border: true,
     placement: "bottom-end",
     value: multilangEnvironment.language,
     onChange: function onChange(language) {

package/cjs/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/cjs/components/material-exercise/exercise-preview/ExercisePreview.js

@@ -2,31 +2,29 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var designTokens = require('@elice/design-tokens');
 var intl = require('@elice/intl');
 var recoil = require('recoil');
-var styled = require('styled-components');
-var NoVncLazy = require('../../shared/no-vnc/NoVncLazy.js');
 var WebBrowser = require('../../shared/web-browser/WebBrowser.js');
-var recoil$1 = require('../context/recoil.js');
-var context = require('../context/context.js');
-var recoilTypes = require('../context/recoilTypes.js');
-require('../context/subjects.js');
-require('../context/ExerciseProvider.js');
 var ExercisePreviewDisplayModeButton = require('./ExercisePreviewDisplayModeButton.js');
 var en = require('./locales/en.json.js');
 var ko = require('./locales/ko.json.js');
+var recoil$1 = require('../context/recoil.js');
+var recoilTypes = require('../context/recoilTypes.js');
+var NoVncLazy = require('../../shared/no-vnc/NoVncLazy.js');
+var context = require('../context/context.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-var StyledExercisePreview = styled__default.default.div.withConfig({
-  componentId: "sc-i6d1i5-0"
-})(["width:100%;height:100%;background-color:", ";"], designTokens.base.color.navy7);
+var StyledExercisePreview = /*#__PURE__*/_styled__default.default("div", {
+  target: "e16xqdux0"
+})("width:100%;height:100%;background-color:", designTokens.base.color.navy7, ";");
 /**
  * Preview result of exercise running.
  * - NoVnc

package/cjs/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/cjs/components/material-exercise/exercise-preview/ExercisePreviewDisplayModeButton.js

@@ -8,12 +8,9 @@ var React = require('react');
 var icons = require('@elice/icons');
 var intl = require('@elice/intl');
 var recoil = require('recoil');
-var ExerciseMenuButton = require('../../shared/exercise-menu-button/ExerciseMenuButton.js');
 var recoil$1 = require('../context/recoil.js');
-require('../context/context.js');
+var ExerciseMenuButton = require('../../shared/exercise-menu-button/ExerciseMenuButton.js');
 var recoilTypes = require('../context/recoilTypes.js');
-require('../context/subjects.js');
-require('../context/ExerciseProvider.js');
 
 var ExercisePreviewDisplayModeButton = React.forwardRef(function (props, ref) {
   var _a;
@@ -41,8 +38,8 @@ var ExercisePreviewDisplayModeButton = React.forwardRef(function (props, ref) {
       id: 'exercisePreview.displayModeButton.mini'
     }),
     placement: "bottom-end",
-    onClick: handleClick,
-    ref: ref
+    ref: ref,
+    onClick: handleClick
   }));
 });
 

package/cjs/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/cjs/components/material-exercise/exercise-rightpane/ExerciseRightpane.js

@@ -3,44 +3,48 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var icons = require('@elice/icons');
 var intl = require('@elice/intl');
 var recoil = require('recoil');
-var styled = require('styled-components');
 var stylesheets = require('../../../constants/stylesheets.js');
-var recoil$1 = require('../context/recoil.js');
-require('../context/context.js');
-require('../context/recoilTypes.js');
-require('../context/subjects.js');
-require('../context/ExerciseProvider.js');
 var ExerciseRightpaneEditorPerference = require('./ExerciseRightpaneEditorPerference.js');
 var ExerciseRightpaneEnvironment = require('./ExerciseRightpaneEnvironment.js');
 var en = require('./locales/en.json.js');
 var ko = require('./locales/ko.json.js');
+var recoil$1 = require('../context/recoil.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 
+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__default.default.div.withConfig({
-  componentId: "sc-1tj3x49-0"
-})(["position:relative;display:flex;flex-direction:column;width:20rem;border-left:", ";color:white;background-color:", ";"], stylesheets.MATERIAL_DIVIDER_BORDER_VALUE, designTokens.base.color.navy9);
-var StyledPreferenceHeader = styled__default.default.div.withConfig({
-  componentId: "sc-1tj3x49-1"
-})(["display:flex;flex-direction:column;padding:0.25rem 1rem;"]);
-var StyledPreferenceHeaderCloseButton = styled__default.default(blocks.IconButton).withConfig({
-  componentId: "sc-1tj3x49-2"
-})(["flex:0 0 ", ";height:", " !important;"], HEADER_CLOSE_BUTTON_SIZE, HEADER_CLOSE_BUTTON_SIZE);
-var StyledRightpaneBodyWrap = styled__default.default.div.withConfig({
-  componentId: "sc-1tj3x49-3"
-})(["flex:1;padding:1rem;overflow-x:hidden;overflow-y:auto;", ""], stylesheets.getMaterialScrollBarCss({
+var StyledRightpaneWrap = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1wt9g7d3"
+})("position:relative;display:flex;flex-direction:column;width:20rem;border-left:", stylesheets.MATERIAL_DIVIDER_BORDER_VALUE, ";color:white;background-color:", designTokens.base.color.navy9, ";");
+var StyledPreferenceHeader = /*#__PURE__*/_styled__default.default("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__default.default(blocks.IconButton, {
+  target: "e1wt9g7d1"
+})("flex:0 0 ", HEADER_CLOSE_BUTTON_SIZE, ";height:", HEADER_CLOSE_BUTTON_SIZE, "!important;");
+var StyledRightpaneBodyWrap = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1wt9g7d0"
+})("flex:1;padding:1rem;overflow-x:hidden;overflow-y:auto;", stylesheets.getMaterialScrollBarCss({
   width: '0.375rem',
   borderRadius: '2px'
-}));
+}), ";");
 var ExerciseRightpane = function ExerciseRightpane(_ref) {
   var __intl = _ref.__intl;
   var _useRecoilState = recoil.useRecoilState(recoil$1.exerciseRightpaneActiveState),
@@ -78,9 +82,9 @@ var ExerciseRightpane = function ExerciseRightpane(_ref) {
       children: jsxRuntime.jsxs(blocks.Flex, {
         align: "center",
         children: [jsxRuntime.jsx(blocks.Text, {
-          role: "white",
           bold: true,
           block: true,
+          role: "white",
           children: renderRightpaneHeaderTitle()
         }), jsxRuntime.jsx(StyledPreferenceHeaderCloseButton, {
           icon: icons.eilMathsignMultiplyBasic,

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

@@ -6,14 +6,9 @@ var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHel
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var recoil = require('recoil');
-require('../../shared/monaco-editor/MonacoEditorLazy.js');
 var MonacoEditorPerferenceForm = require('../../shared/monaco-editor/MonacoEditorPerferenceForm.js');
-require('monaco-editor/esm/vs/editor/editor.api');
-var recoil$1 = require('../context/recoil.js');
 var context = require('../context/context.js');
-require('../context/recoilTypes.js');
-require('../context/subjects.js');
-require('../context/ExerciseProvider.js');
+var recoil$1 = require('../context/recoil.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

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

@@ -2,26 +2,31 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var blocks = require('@elice/blocks');
 var intl = require('@elice/intl');
 var recoil = require('recoil');
-var styled = require('styled-components');
-var recoil$1 = require('../context/recoil.js');
 var context = require('../context/context.js');
-require('../context/recoilTypes.js');
-require('../context/subjects.js');
-require('../context/ExerciseProvider.js');
+var recoil$1 = require('../context/recoil.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-var StyledEnvironmentList = styled__default.default.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__default.default("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$1 = intl.useRawEliceIntl();
   var _React$useContext = React__default.default.useContext(context.ExerciseContext),
@@ -98,16 +103,16 @@ var ExerciseRightpaneEnvironment = function ExerciseRightpaneEnvironment() {
         value = _ref.value;
       return jsxRuntime.jsxs("li", {
         children: [jsxRuntime.jsx(blocks.Text, {
-          role: "navy",
           block: true,
+          role: "navy",
           size: "small",
           children: name
         }), jsxRuntime.jsx(blocks.Vspace, {
           height: 0.5
         }), jsxRuntime.jsx(blocks.Text, {
-          role: "white",
           bold: true,
           block: true,
+          role: "white",
           size: "small",
           children: value
         })]

package/cjs/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>, {}>;