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

package/cjs/components/index.js

@@ -1,25 +1,25 @@
 'use strict';
 
+var MonacoEditorLazy = require('./shared/monaco-editor/MonacoEditorLazy.js');
+var preferences = require('./shared/monaco-editor/constants/monaco/preferences.js');
 var MaterialExercise = require('./material-exercise/MaterialExercise.js');
 var MaterialExerciseMobile = require('./material-exercise/MaterialExerciseMobile.js');
-var MonacoEditorLazy = require('./shared/monaco-editor/MonacoEditorLazy.js');
 var MonacoEditorPerferenceForm = require('./shared/monaco-editor/MonacoEditorPerferenceForm.js');
+var index = require('./shared/monaco-editor/constants/grammars/index.js');
 var monacoLanguage = require('./shared/monaco-editor/utils/monacoLanguage.js');
 var monacoPreference = require('./shared/monaco-editor/utils/monacoPreference.js');
-var index = require('./shared/monaco-editor/constants/grammars/index.js');
-var preferences = require('./shared/monaco-editor/constants/monaco/preferences.js');
 
 
 
-exports.MaterialExercise = MaterialExercise.default;
-exports.MaterialExerciseMobile = MaterialExerciseMobile.default;
 exports.MonacoEditorLazy = MonacoEditorLazy.default;
-exports.MonacoEditorPerference = MonacoEditorPerferenceForm.default;
-exports.getLanguageFromFilename = monacoLanguage.getLanguageFromFilename;
-exports.normalizeMonacoPreference = monacoPreference.normalizeMonacoPreference;
-exports.TM_LANGUAGES = index.TM_LANGUAGES;
 exports.DEFAULT_MONACO_EDITOR_PREFERENCE = preferences.DEFAULT_MONACO_EDITOR_PREFERENCE;
 exports.MONACO_EDITOR_FONT_FAMILY = preferences.MONACO_EDITOR_FONT_FAMILY;
 exports.MONACO_EDITOR_PREFERENCE_OPTIONS_FONT_SIZES = preferences.MONACO_EDITOR_PREFERENCE_OPTIONS_FONT_SIZES;
 exports.MONACO_EDITOR_PREFERENCE_OPTIONS_TAB_SIZES = preferences.MONACO_EDITOR_PREFERENCE_OPTIONS_TAB_SIZES;
 exports.MONACO_EDITOR_RENDER_WHITESPACE_OPTIONS = preferences.MONACO_EDITOR_RENDER_WHITESPACE_OPTIONS;
+exports.MaterialExercise = MaterialExercise.default;
+exports.MaterialExerciseMobile = MaterialExerciseMobile.default;
+exports.MonacoEditorPerference = MonacoEditorPerferenceForm.default;
+exports.TM_LANGUAGES = index.TM_LANGUAGES;
+exports.getLanguageFromFilename = monacoLanguage.getLanguageFromFilename;
+exports.normalizeMonacoPreference = monacoPreference.normalizeMonacoPreference;

package/cjs/components/material-exercise/MaterialExercise.js

@@ -11,26 +11,23 @@ var intl = require('@elice/intl');
 var materialSharedUtils = require('@elice/material-shared-utils');
 var recoil = require('recoil');
 var stylesheets = require('../../constants/stylesheets.js');
+var MaterialExercise_styled = require('./MaterialExercise.styled.js');
+var ExerciseProvider = require('./context/ExerciseProvider.js');
 var en = require('../locales/en.json.js');
 var ko = require('../locales/ko.json.js');
+var ExerciseRightpane = require('./exercise-rightpane/ExerciseRightpane.js');
+var ExerciseRunner = require('./exercise-runner/ExerciseRunner.js');
+var ExercisePreview = require('./exercise-preview/ExercisePreview.js');
+var ExerciseFileTreeLazy = require('./exercise-file-tree/ExerciseFileTreeLazy.js');
 var ExerciseFileTabsFileTreeButton = require('./exercise-file-tabs/exercise-file-tabs-file-tree-button/ExerciseFileTabsFileTreeButton.js');
-var recoil$1 = require('./context/recoil.js');
-var context = require('./context/context.js');
-var recoilTypes = require('./context/recoilTypes.js');
-var subjects = require('./context/subjects.js');
-var ExerciseProvider = require('./context/ExerciseProvider.js');
-var ExerciseFile = require('./exercise-file/ExerciseFile.js');
-require('./exercise-file-tabs/ExerciseFileTabs.js');
 var ExerciseFileTabsLazy = require('./exercise-file-tabs/ExerciseFileTabsLazy.js');
-require('./exercise-file-tree/ExerciseFileTree.js');
-var ExerciseFileTreeLazy = require('./exercise-file-tree/ExerciseFileTreeLazy.js');
-var ExerciseMenu = require('./exercise-menu/ExerciseMenu.js');
-require('react-use');
 var ExerciseMultilangDropdownLazy = require('./exercise-multilang-dropdown/ExerciseMultilangDropdownLazy.js');
-var ExercisePreview = require('./exercise-preview/ExercisePreview.js');
-var ExerciseRightpane = require('./exercise-rightpane/ExerciseRightpane.js');
-var ExerciseRunner = require('./exercise-runner/ExerciseRunner.js');
-var MaterialExercise_styled = require('./MaterialExercise.styled.js');
+var ExerciseMenu = require('./exercise-menu/ExerciseMenu.js');
+var ExerciseFile = require('./exercise-file/ExerciseFile.js');
+var context = require('./context/context.js');
+var recoil$1 = require('./context/recoil.js');
+var subjects = require('./context/subjects.js');
+var recoilTypes = require('./context/recoilTypes.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -206,7 +203,7 @@ var MaterialExercise = React.forwardRef(function (props, ref) {
 //
 //
 //
-var MaterialExercise$1 = new intl.IntlComponentBuilder(materialSharedUtils.withForwardRefMaterial(React.forwardRef(function (props, ref) {
+var MaterialExercise_default = new intl.IntlComponentBuilder(materialSharedUtils.withForwardRefMaterial(React.forwardRef(function (props, ref) {
   return jsxRuntime.jsx(intl.RawEliceIntlProvider, {
     value: props.__intl,
     children: jsxRuntime.jsx(ExerciseProvider.default, Object.assign({}, props, {
@@ -219,4 +216,4 @@ var MaterialExercise$1 = new intl.IntlComponentBuilder(materialSharedUtils.withF
   overrideRecoilScope: true
 })).add('en', en.default).add('ko', ko.default).addAsync('th', Promise.resolve().then(function () { return require('../locales/th.json.js'); })).addAsync('ja', Promise.resolve().then(function () { return require('../locales/ja.json.js'); })).build();
 
-exports.default = MaterialExercise$1;
+exports.default = MaterialExercise_default;

package/cjs/components/material-exercise/MaterialExercise.styled.d.ts

@@ -13,24 +13,54 @@ export declare const EXERCISE_HORIZONTAL_RATIO: {
  * - File (Editor)
  * - Runner
  */
-export declare const StyledExerciseContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledExerciseContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 /**
  * Wrapper contains:
  * - FileTree
  * - FileTabs
  * - File (Editor)
  */
-export declare const StyledExerciseMain: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledExerciseMain: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 /**
  * Wrapper contains:
  * - FileTabs
  * - File (Editor)
  */
-export declare const StyledExerciseFileAndTabWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledExerciseFileWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledExerciseTabBar: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledExerciseTabsWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledExerciseTabMenuWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledExerciseFileTreeWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledxerciseFileTreeContaner: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledExerciseRunnerWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledExerciseFileAndTabWrap: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledExerciseFileWrap: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledExerciseTabBar: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledExerciseTabsWrap: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledExerciseTabMenuWrap: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledExerciseFileTreeWrap: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledxerciseFileTreeContaner: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledExerciseRunnerWrap: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/cjs/components/material-exercise/MaterialExercise.styled.js

@@ -1,19 +1,19 @@
 'use strict';
 
+var _styled = require('@emotion/styled/base');
 var designTokens = require('@elice/design-tokens');
-var styled = require('styled-components');
 var stylesheets = require('../../constants/stylesheets.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 EXERCISE_FILE_TREE_MIN_WIDTH = 128;
 var EXERCISE_PREVIEW_MIN_WIDTH = 128;
 var EXERCISE_RUNNER_MIN_HEIGHT = 128;
 var EXERCISE_HORIZONTAL_RATIO = {
   FILETREE: 0.15,
-  EDITOR: 0.45,
   PREVIEW: 0.4
 };
 /**
@@ -23,50 +23,85 @@ var EXERCISE_HORIZONTAL_RATIO = {
  * - File (Editor)
  * - Runner
  */
-var StyledExerciseContainer = styled__default.default.div.withConfig({
-  componentId: "sc-9joi7g-0"
-})(["flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0;"]);
+var StyledExerciseContainer = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1femvm99"
+})("production" === "production" ? {
+  name: "1x6515k",
+  styles: "flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0"
+} : {
+  name: "1x6515k",
+  styles: "flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 /**
  * Wrapper contains:
  * - FileTree
  * - FileTabs
  * - File (Editor)
  */
-var StyledExerciseMain = styled__default.default.div.withConfig({
-  componentId: "sc-9joi7g-1"
-})(["flex:1;display:flex;width:100%;min-width:0;min-height:0;"]);
+var StyledExerciseMain = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1femvm98"
+})("production" === "production" ? {
+  name: "gaqfa6",
+  styles: "flex:1;display:flex;width:100%;min-width:0;min-height:0"
+} : {
+  name: "gaqfa6",
+  styles: "flex:1;display:flex;width:100%;min-width:0;min-height:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 /**
  * Wrapper contains:
  * - FileTabs
  * - File (Editor)
  */
-var StyledExerciseFileAndTabWrap = styled__default.default.div.withConfig({
-  componentId: "sc-9joi7g-2"
-})(["flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0;background-color:", ";"], designTokens.base.color.navy9);
-var StyledExerciseFileWrap = styled__default.default.div.withConfig({
-  componentId: "sc-9joi7g-3"
-})(["flex:1;min-height:0;"]);
+var StyledExerciseFileAndTabWrap = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1femvm97"
+})("flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0;background-color:", designTokens.base.color.navy9, ";");
+var StyledExerciseFileWrap = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1femvm96"
+})("production" === "production" ? {
+  name: "1qvekf5",
+  styles: "flex:1;min-height:0"
+} : {
+  name: "1qvekf5",
+  styles: "flex:1;min-height:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 // ========== Exercise FileTab ==========
-var StyledExerciseTabBar = styled__default.default.div.withConfig({
-  componentId: "sc-9joi7g-4"
-})(["display:flex;border-bottom:", ";"], stylesheets.MATERIAL_DIVIDER_BORDER_VALUE);
-var StyledExerciseTabsWrap = styled__default.default.div.withConfig({
-  componentId: "sc-9joi7g-5"
-})(["flex:1;min-width:0;"]);
-var StyledExerciseTabMenuWrap = styled__default.default.div.withConfig({
-  componentId: "sc-9joi7g-6"
-})(["display:flex;justify-content:center;align-items:center;padding:0 0.5rem 0 1rem;background-color:", ";"], designTokens.base.color.navy8);
+var StyledExerciseTabBar = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1femvm95"
+})("display:flex;border-bottom:", stylesheets.MATERIAL_DIVIDER_BORDER_VALUE, ";");
+var StyledExerciseTabsWrap = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1femvm94"
+})("production" === "production" ? {
+  name: "fxp7t8",
+  styles: "flex:1;min-width:0"
+} : {
+  name: "fxp7t8",
+  styles: "flex:1;min-width:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledExerciseTabMenuWrap = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1femvm93"
+})("display:flex;justify-content:center;align-items:center;padding:0 0.5rem 0 1rem;background-color:", designTokens.base.color.navy8, ";");
 // ========== Exercise FileTree ==========
-var StyledExerciseFileTreeWrap = styled__default.default.div.withConfig({
-  componentId: "sc-9joi7g-7"
-})(["flex:1;display:flex;flex-direction:column;min-width:0;height:100%;border-right:", ";"], stylesheets.MATERIAL_DIVIDER_BORDER_VALUE);
-var StyledxerciseFileTreeContaner = styled__default.default.div.withConfig({
-  componentId: "sc-9joi7g-8"
-})(["display:flex;height:100%;max-width:auto;&[aria-hidden='true']{max-width:0;overflow:hidden;}"]);
+var StyledExerciseFileTreeWrap = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1femvm92"
+})("flex:1;display:flex;flex-direction:column;min-width:0;height:100%;border-right:", stylesheets.MATERIAL_DIVIDER_BORDER_VALUE, ";");
+var StyledxerciseFileTreeContaner = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1femvm91"
+})("production" === "production" ? {
+  name: "ajoz9e",
+  styles: "display:flex;height:100%;max-width:auto;&[aria-hidden='true']{max-width:0;overflow:hidden;}"
+} : {
+  name: "ajoz9e",
+  styles: "display:flex;height:100%;max-width:auto;&[aria-hidden='true']{max-width:0;overflow:hidden;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 // ========== Exercise Runner ==========
-var StyledExerciseRunnerWrap = styled__default.default.div.withConfig({
-  componentId: "sc-9joi7g-9"
-})(["width:100%;height:100%;border-top:", ";"], stylesheets.MATERIAL_DIVIDER_BORDER_VALUE);
+var StyledExerciseRunnerWrap = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1femvm90"
+})("width:100%;height:100%;border-top:", stylesheets.MATERIAL_DIVIDER_BORDER_VALUE, ";");
 
 exports.EXERCISE_FILE_TREE_MIN_WIDTH = EXERCISE_FILE_TREE_MIN_WIDTH;
 exports.EXERCISE_HORIZONTAL_RATIO = EXERCISE_HORIZONTAL_RATIO;

package/cjs/components/material-exercise/MaterialExerciseMobile.js

@@ -7,12 +7,9 @@ var React = require('react');
 var apiClient = require('@elice/api-client');
 var materialSharedUtils = require('@elice/material-shared-utils');
 var recoil = require('recoil');
-var recoil$1 = require('./context/recoil.js');
-require('./context/context.js');
-require('./context/recoilTypes.js');
-require('./context/subjects.js');
 var ExerciseProvider = require('./context/ExerciseProvider.js');
 var ExerciseFile = require('./exercise-file/ExerciseFile.js');
+var recoil$1 = require('./context/recoil.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -40,7 +37,7 @@ var MaterialExerciseMobile = function MaterialExerciseMobile(_ref) {
 //
 //
 //
-var MaterialExerciseMobile$1 = materialSharedUtils.withMaterial(function (props) {
+var MaterialExerciseMobile_default = materialSharedUtils.withMaterial(function (props) {
   return jsxRuntime.jsx(ExerciseProvider.default, Object.assign({}, props, {
     children: jsxRuntime.jsx(MaterialExerciseMobile, Object.assign({}, props))
   }));
@@ -48,4 +45,4 @@ var MaterialExerciseMobile$1 = materialSharedUtils.withMaterial(function (props)
   overrideRecoilScope: true
 });
 
-exports.default = MaterialExerciseMobile$1;
+exports.default = MaterialExerciseMobile_default;

package/cjs/components/material-exercise/context/ExerciseProvider.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var _styled = require('@emotion/styled/base');
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
@@ -11,20 +12,27 @@ var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
 var materialSharedUtils = require('@elice/material-shared-utils');
 var recoil = require('recoil');
-var styled = require('styled-components');
 var context = require('./context.js');
 var ExerciseProviderNoImage = require('./ExerciseProviderNoImage.js');
 var recoil$1 = require('./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);
 
+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 RECOIL_RESET_DELAY = 10;
-var StyledMaterialExercise = styled__default.default.div.withConfig({
-  componentId: "sc-pj5yv2-0"
-})(["display:flex;width:100%;height:100%;.eb-resizable{height:inherit;}"]);
+var StyledMaterialExercise = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1m4jyhy0"
+})("production" === "production" ? {
+  name: "18ka558",
+  styles: "display:flex;width:100%;height:100%;.eb-resizable{height:inherit;}"
+} : {
+  name: "18ka558",
+  styles: "display:flex;width:100%;height:100%;.eb-resizable{height:inherit;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 /**
  * Provider for exercise, which...
  * - wrapping with `ExerciseContext`
@@ -78,7 +86,7 @@ var ExerciseProvider = function ExerciseProvider(_a) {
       if (typeof onDefaultExerciseRoomIdSet === 'function') {
         onDefaultExerciseRoomIdSet(res.exerciseRoomId);
       }
-    }).catch(function (err) {
+    })["catch"](function (err) {
       if (typeof contextProps.onError === 'function') {
         contextProps.onError(err);
       }
@@ -149,8 +157,9 @@ var ExerciseProvider = function ExerciseProvider(_a) {
       var isAibotInfoEnabled = organization.aibotInfo.isEnabled && course.aibotInfo.isEnabled;
       setAibotInfoEnable(isAibotInfoEnabled);
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [lecture, orgNameShort]);
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [lecture, orgNameShort]);
   //
   //
   //

package/cjs/components/material-exercise/context/ExerciseProviderNoImage.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { WithIntlComponentBuilderProps } from '@elice/intl';
+import type React from 'react';
 export interface ExerciseProviderNoImageProps {
     /**  */
     text?: React.ReactChild;

package/cjs/components/material-exercise/context/ExerciseProviderNoImage.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var intl = require('@elice/intl');
-var styled = require('styled-components');
 var noImage_en = require('./locales/noImage.en.json.js');
 var noImage_ja = require('./locales/noImage.ja.json.js');
 var noImage_ko = require('./locales/noImage.ko.json.js');
@@ -14,11 +14,11 @@ var noImage_th = require('./locales/noImage.th.json.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);
 
-var StyledProviderNoImage = styled__default.default.div.withConfig({
-  componentId: "sc-oaauqc-0"
-})(["display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;background-color:", ";"], designTokens.base.color.navy9);
+var StyledProviderNoImage = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1843uy60"
+})("display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;background-color:", designTokens.base.color.navy9, ";");
 var ExerciseProviderNoImage = function ExerciseProviderNoImage(_ref) {
   var text = _ref.text,
     _ref$imageSrc = _ref.imageSrc,