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

package/es/components/index.js

@@ -1,8 +1,8 @@
+export { default as MonacoEditorLazy } from './shared/monaco-editor/MonacoEditorLazy.js';
+export { DEFAULT_MONACO_EDITOR_PREFERENCE, MONACO_EDITOR_FONT_FAMILY, MONACO_EDITOR_PREFERENCE_OPTIONS_FONT_SIZES, MONACO_EDITOR_PREFERENCE_OPTIONS_TAB_SIZES, MONACO_EDITOR_RENDER_WHITESPACE_OPTIONS } from './shared/monaco-editor/constants/monaco/preferences.js';
 export { default as MaterialExercise } from './material-exercise/MaterialExercise.js';
 export { default as MaterialExerciseMobile } from './material-exercise/MaterialExerciseMobile.js';
-export { default as MonacoEditorLazy } from './shared/monaco-editor/MonacoEditorLazy.js';
 export { default as MonacoEditorPerference } from './shared/monaco-editor/MonacoEditorPerferenceForm.js';
+export { TM_LANGUAGES } from './shared/monaco-editor/constants/grammars/index.js';
 export { getLanguageFromFilename } from './shared/monaco-editor/utils/monacoLanguage.js';
 export { normalizeMonacoPreference } from './shared/monaco-editor/utils/monacoPreference.js';
-export { TM_LANGUAGES } from './shared/monaco-editor/constants/grammars/index.js';
-export { DEFAULT_MONACO_EDITOR_PREFERENCE, MONACO_EDITOR_FONT_FAMILY, MONACO_EDITOR_PREFERENCE_OPTIONS_FONT_SIZES, MONACO_EDITOR_PREFERENCE_OPTIONS_TAB_SIZES, MONACO_EDITOR_RENDER_WHITESPACE_OPTIONS } from './shared/monaco-editor/constants/monaco/preferences.js';

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

@@ -7,26 +7,23 @@ import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
 import { withForwardRefMaterial } from '@elice/material-shared-utils';
 import { useRecoilValue } from 'recoil';
 import { MATERIAL_RESIZABLE_COMMON_PROPS } from '../../constants/stylesheets.js';
+import { StyledExerciseContainer, StyledExerciseMain, StyledExerciseFileAndTabWrap, StyledExerciseTabBar, StyledExerciseRunnerWrap, EXERCISE_RUNNER_MIN_HEIGHT, EXERCISE_PREVIEW_MIN_WIDTH, EXERCISE_HORIZONTAL_RATIO, StyledxerciseFileTreeContaner, EXERCISE_FILE_TREE_MIN_WIDTH, StyledExerciseFileTreeWrap, StyledExerciseTabsWrap, StyledExerciseTabMenuWrap, StyledExerciseFileWrap } from './MaterialExercise.styled.js';
+import ExerciseProvider from './context/ExerciseProvider.js';
 import messageEn from '../locales/en.json.js';
 import messageKo from '../locales/ko.json.js';
+import ExerciseRightpane from './exercise-rightpane/ExerciseRightpane.js';
+import ExerciseRunner from './exercise-runner/ExerciseRunner.js';
+import ExercisePreview from './exercise-preview/ExercisePreview.js';
+import ExerciseFileTreeLazy from './exercise-file-tree/ExerciseFileTreeLazy.js';
 import ExerciseFileTabsFileTreeButton from './exercise-file-tabs/exercise-file-tabs-file-tree-button/ExerciseFileTabsFileTreeButton.js';
-import { exerciseContainerSizeState, exerciseState, exerciseFileTreeOpenedState, exercisePreviewTypeState, exercisePreviewDisplayModeState, exerciseMonacoEditorApisState } from './context/recoil.js';
-import { ExerciseContext } from './context/context.js';
-import { ExercisePreviewType, ExercisePreviewDisplayMode } from './context/recoilTypes.js';
-import { exerciseRunnerTextSend$, exerciseRunnerRoomsOpen$ } from './context/subjects.js';
-import ExerciseProvider from './context/ExerciseProvider.js';
-import ExerciseFile from './exercise-file/ExerciseFile.js';
-import './exercise-file-tabs/ExerciseFileTabs.js';
 import ExerciseFileTabsLazy from './exercise-file-tabs/ExerciseFileTabsLazy.js';
-import './exercise-file-tree/ExerciseFileTree.js';
-import ExerciseFileTreeLazy from './exercise-file-tree/ExerciseFileTreeLazy.js';
-import ExerciseMenu from './exercise-menu/ExerciseMenu.js';
-import 'react-use';
 import ExerciseMultilangDropdownLazy from './exercise-multilang-dropdown/ExerciseMultilangDropdownLazy.js';
-import ExercisePreview from './exercise-preview/ExercisePreview.js';
-import ExerciseRightpane from './exercise-rightpane/ExerciseRightpane.js';
-import ExerciseRunner from './exercise-runner/ExerciseRunner.js';
-import { StyledExerciseContainer, EXERCISE_PREVIEW_MIN_WIDTH, EXERCISE_HORIZONTAL_RATIO, StyledExerciseMain, StyledExerciseFileAndTabWrap, StyledExerciseTabBar, StyledExerciseRunnerWrap, EXERCISE_RUNNER_MIN_HEIGHT, StyledxerciseFileTreeContaner, EXERCISE_FILE_TREE_MIN_WIDTH, StyledExerciseFileTreeWrap, StyledExerciseTabsWrap, StyledExerciseTabMenuWrap, StyledExerciseFileWrap } from './MaterialExercise.styled.js';
+import ExerciseMenu from './exercise-menu/ExerciseMenu.js';
+import ExerciseFile from './exercise-file/ExerciseFile.js';
+import { ExerciseContext } from './context/context.js';
+import { exerciseContainerSizeState, exerciseState, exerciseFileTreeOpenedState, exercisePreviewTypeState, exercisePreviewDisplayModeState, exerciseMonacoEditorApisState } from './context/recoil.js';
+import { exerciseRunnerRoomsOpen$, exerciseRunnerTextSend$ } from './context/subjects.js';
+import { ExercisePreviewType, ExercisePreviewDisplayMode } from './context/recoilTypes.js';
 
 //
 //
@@ -198,7 +195,7 @@ var MaterialExercise = forwardRef(function (props, ref) {
 //
 //
 //
-var MaterialExercise$1 = new IntlComponentBuilder(withForwardRefMaterial(forwardRef(function (props, ref) {
+var MaterialExercise_default = new IntlComponentBuilder(withForwardRefMaterial(forwardRef(function (props, ref) {
   return jsx(RawEliceIntlProvider, {
     value: props.__intl,
     children: jsx(ExerciseProvider, Object.assign({}, props, {
@@ -211,4 +208,4 @@ var MaterialExercise$1 = new IntlComponentBuilder(withForwardRefMaterial(forward
   overrideRecoilScope: true
 })).add('en', messageEn).add('ko', messageKo).addAsync('th', import('../locales/th.json.js')).addAsync('ja', import('../locales/ja.json.js')).build();
 
-export { MaterialExercise$1 as default };
+export { MaterialExercise_default as default };

package/es/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/es/components/material-exercise/MaterialExercise.styled.js

@@ -1,13 +1,13 @@
+import _styled from '@emotion/styled/base';
 import { base } from '@elice/design-tokens';
-import styled from 'styled-components';
 import { MATERIAL_DIVIDER_BORDER_VALUE } from '../../constants/stylesheets.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 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
 };
 /**
@@ -17,49 +17,84 @@ var EXERCISE_HORIZONTAL_RATIO = {
  * - File (Editor)
  * - Runner
  */
-var StyledExerciseContainer = styled.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("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.div.withConfig({
-  componentId: "sc-9joi7g-1"
-})(["flex:1;display:flex;width:100%;min-width:0;min-height:0;"]);
+var StyledExerciseMain = /*#__PURE__*/_styled("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.div.withConfig({
-  componentId: "sc-9joi7g-2"
-})(["flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0;background-color:", ";"], base.color.navy9);
-var StyledExerciseFileWrap = styled.div.withConfig({
-  componentId: "sc-9joi7g-3"
-})(["flex:1;min-height:0;"]);
+var StyledExerciseFileAndTabWrap = /*#__PURE__*/_styled("div", {
+  target: "e1femvm97"
+})("flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0;background-color:", base.color.navy9, ";");
+var StyledExerciseFileWrap = /*#__PURE__*/_styled("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.div.withConfig({
-  componentId: "sc-9joi7g-4"
-})(["display:flex;border-bottom:", ";"], MATERIAL_DIVIDER_BORDER_VALUE);
-var StyledExerciseTabsWrap = styled.div.withConfig({
-  componentId: "sc-9joi7g-5"
-})(["flex:1;min-width:0;"]);
-var StyledExerciseTabMenuWrap = styled.div.withConfig({
-  componentId: "sc-9joi7g-6"
-})(["display:flex;justify-content:center;align-items:center;padding:0 0.5rem 0 1rem;background-color:", ";"], base.color.navy8);
+var StyledExerciseTabBar = /*#__PURE__*/_styled("div", {
+  target: "e1femvm95"
+})("display:flex;border-bottom:", MATERIAL_DIVIDER_BORDER_VALUE, ";");
+var StyledExerciseTabsWrap = /*#__PURE__*/_styled("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("div", {
+  target: "e1femvm93"
+})("display:flex;justify-content:center;align-items:center;padding:0 0.5rem 0 1rem;background-color:", base.color.navy8, ";");
 // ========== Exercise FileTree ==========
-var StyledExerciseFileTreeWrap = styled.div.withConfig({
-  componentId: "sc-9joi7g-7"
-})(["flex:1;display:flex;flex-direction:column;min-width:0;height:100%;border-right:", ";"], MATERIAL_DIVIDER_BORDER_VALUE);
-var StyledxerciseFileTreeContaner = styled.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("div", {
+  target: "e1femvm92"
+})("flex:1;display:flex;flex-direction:column;min-width:0;height:100%;border-right:", MATERIAL_DIVIDER_BORDER_VALUE, ";");
+var StyledxerciseFileTreeContaner = /*#__PURE__*/_styled("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.div.withConfig({
-  componentId: "sc-9joi7g-9"
-})(["width:100%;height:100%;border-top:", ";"], MATERIAL_DIVIDER_BORDER_VALUE);
+var StyledExerciseRunnerWrap = /*#__PURE__*/_styled("div", {
+  target: "e1femvm90"
+})("width:100%;height:100%;border-top:", MATERIAL_DIVIDER_BORDER_VALUE, ";");
 
 export { EXERCISE_FILE_TREE_MIN_WIDTH, EXERCISE_HORIZONTAL_RATIO, EXERCISE_PREVIEW_MIN_WIDTH, EXERCISE_RUNNER_MIN_HEIGHT, StyledExerciseContainer, StyledExerciseFileAndTabWrap, StyledExerciseFileTreeWrap, StyledExerciseFileWrap, StyledExerciseMain, StyledExerciseRunnerWrap, StyledExerciseTabBar, StyledExerciseTabMenuWrap, StyledExerciseTabsWrap, StyledxerciseFileTreeContaner };

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

@@ -3,12 +3,9 @@ import React from 'react';
 import { config } from '@elice/api-client';
 import { withMaterial } from '@elice/material-shared-utils';
 import { useSetRecoilState } from 'recoil';
-import { exerciseActiveFilenameState } from './context/recoil.js';
-import './context/context.js';
-import './context/recoilTypes.js';
-import './context/subjects.js';
 import ExerciseProvider from './context/ExerciseProvider.js';
 import ExerciseFile from './exercise-file/ExerciseFile.js';
+import { exerciseActiveFilenameState } from './context/recoil.js';
 
 //
 //
@@ -32,7 +29,7 @@ var MaterialExerciseMobile = function MaterialExerciseMobile(_ref) {
 //
 //
 //
-var MaterialExerciseMobile$1 = withMaterial(function (props) {
+var MaterialExerciseMobile_default = withMaterial(function (props) {
   return jsx(ExerciseProvider, Object.assign({}, props, {
     children: jsx(MaterialExerciseMobile, Object.assign({}, props))
   }));
@@ -40,4 +37,4 @@ var MaterialExerciseMobile$1 = withMaterial(function (props) {
   overrideRecoilScope: true
 });
 
-export { MaterialExerciseMobile$1 as default };
+export { MaterialExerciseMobile_default as default };

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

@@ -1,4 +1,5 @@
 import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import _styled from '@emotion/styled/base';
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
@@ -7,15 +8,22 @@ import { getOrgMaterialExerciseDefaultRoomGet, getGlobalOrganizationGet, getOrgC
 import { Flex, Spinner } from '@elice/blocks';
 import { useMaterialConfig } from '@elice/material-shared-utils';
 import { useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil';
-import styled from 'styled-components';
 import { ExerciseContext } from './context.js';
 import MaterialExerciseNoImage from './ExerciseProviderNoImage.js';
 import { exerciseUserState, exerciseState, exerciseRoomState, exerciseLectureState, exerciseMultilangLanguagesState, exerciseActiveFilenameState, exerciseContainerSizeState, exerciseAibotInfoEnableState } from './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 RECOIL_RESET_DELAY = 10;
-var StyledMaterialExercise = styled.div.withConfig({
-  componentId: "sc-pj5yv2-0"
-})(["display:flex;width:100%;height:100%;.eb-resizable{height:inherit;}"]);
+var StyledMaterialExercise = /*#__PURE__*/_styled("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`
@@ -69,7 +77,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);
       }
@@ -140,8 +148,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/es/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/es/components/material-exercise/context/ExerciseProviderNoImage.js

@@ -1,16 +1,16 @@
+import _styled from '@emotion/styled/base';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { SafeImage, Box, Text, Button } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { IntlComponentBuilder } from '@elice/intl';
-import styled from 'styled-components';
 import noImageMessageEn from './locales/noImage.en.json.js';
 import noImageMessageJa from './locales/noImage.ja.json.js';
 import noImageMessageKo from './locales/noImage.ko.json.js';
 import noImageMessageTh from './locales/noImage.th.json.js';
 
-var StyledProviderNoImage = styled.div.withConfig({
-  componentId: "sc-oaauqc-0"
-})(["display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;background-color:", ";"], base.color.navy9);
+var StyledProviderNoImage = /*#__PURE__*/_styled("div", {
+  target: "e1843uy60"
+})("display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;background-color:", base.color.navy9, ";");
 var ExerciseProviderNoImage = function ExerciseProviderNoImage(_ref) {
   var text = _ref.text,
     _ref$imageSrc = _ref.imageSrc,