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

package/cjs/components/shared/monaco-editor/utils/grammar/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var monacoTextmate = require('monaco-textmate');
-var index = require('../../constants/grammars/index.js');
 var onigasm = require('./onigasm.js');
 var textmate = require('./textmate.js');
+var index = require('../../constants/grammars/index.js');
 
 /**
  * Create grammar map.
@@ -25,41 +25,38 @@ function createGrammarMap() {
 function createGrammarRegistry() {
   return new monacoTextmate.Registry({
     getGrammarDefinition: function () {
-      var _getGrammarDefinition = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(scopeName) {
+      var _getGrammarDefinition = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee(scopeName) {
         var lang, definition;
-        return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
+        return _rollupPluginBabelHelpers.regenerator().w(function (_context) {
+          while (1) switch (_context.p = _context.n) {
             case 0:
-              _context.prev = 0;
+              _context.p = 0;
               lang = index.TM_LANGUAGES.find(function (l) {
                 return l.scopeName === scopeName;
               });
               if (lang) {
-                _context.next = 4;
+                _context.n = 1;
                 break;
               }
               throw Error("no language found for scopeName: ".concat(scopeName));
-            case 4:
-              _context.next = 6;
+            case 1:
+              _context.n = 2;
               return lang.getDefinition();
-            case 6:
-              definition = _context.sent;
-              return _context.abrupt("return", {
+            case 2:
+              definition = _context.v;
+              return _context.a(2, {
                 format: 'json',
                 content: JSON.stringify(definition)
               });
-            case 10:
-              _context.prev = 10;
-              _context.t0 = _context["catch"](0);
-              return _context.abrupt("return", {
+            case 3:
+              _context.p = 3;
+              _context.v;
+              return _context.a(2, {
                 format: 'json',
                 content: '{}'
               });
-            case 13:
-            case "end":
-              return _context.stop();
           }
-        }, _callee, null, [[0, 10]]);
+        }, _callee, null, [[0, 3]]);
       }));
       function getGrammarDefinition(_x) {
         return _getGrammarDefinition.apply(this, arguments);
@@ -75,21 +72,20 @@ function initMonacoGrammars () {
   return _ref.apply(this, arguments);
 }
 function _ref() {
-  _ref = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee2() {
+  _ref = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee2() {
     var grammars, registry;
-    return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
+    return _rollupPluginBabelHelpers.regenerator().w(function (_context2) {
+      while (1) switch (_context2.n) {
         case 0:
-          _context2.next = 2;
+          _context2.n = 1;
           return onigasm.initOnigasm();
-        case 2:
+        case 1:
           grammars = createGrammarMap();
           registry = createGrammarRegistry();
-          _context2.next = 6;
+          _context2.n = 2;
           return textmate.wireTmGrammars(registry, grammars);
-        case 6:
-        case "end":
-          return _context2.stop();
+        case 2:
+          return _context2.a(2);
       }
     }, _callee2);
   }));

package/cjs/components/shared/monaco-editor/utils/grammar/onigasm.js

@@ -11,21 +11,20 @@ function initOnigasm() {
   return _initOnigasm.apply(this, arguments);
 }
 function _initOnigasm() {
-  _initOnigasm = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee() {
-    return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
+  _initOnigasm = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee() {
+    return _rollupPluginBabelHelpers.regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
         case 0:
           if (window.__elice_monaco_editor_tm_init__) {
-            _context.next = 4;
+            _context.n = 2;
             break;
           }
-          _context.next = 3;
+          _context.n = 1;
           return onigasm.loadWASM(ONIGASM_WASM);
-        case 3:
+        case 1:
           window.__elice_monaco_editor_tm_init__ = true;
-        case 4:
-        case "end":
-          return _context.stop();
+        case 2:
+          return _context.a(2);
       }
     }, _callee);
   }));

package/cjs/components/shared/monaco-editor/utils/grammar/textmate.js

@@ -33,7 +33,7 @@ var TokenizerState = /*#__PURE__*/function () {
     _rollupPluginBabelHelpers.classCallCheck(this, TokenizerState);
     this._ruleStack = _ruleStack;
   }
-  _rollupPluginBabelHelpers.createClass(TokenizerState, [{
+  return _rollupPluginBabelHelpers.createClass(TokenizerState, [{
     key: "ruleStack",
     get: function get() {
       return this._ruleStack;
@@ -52,7 +52,6 @@ var TokenizerState = /*#__PURE__*/function () {
       return true;
     }
   }]);
-  return TokenizerState;
 }();
 /**
  * Wires up monaco-editor with monaco-textmate
@@ -62,18 +61,18 @@ var TokenizerState = /*#__PURE__*/function () {
  * @param languages `Map` of language ids (string) to TM names (string)
  */
 function wireTmGrammars(registry, languages) {
-  return Promise.all(Array.from(languages.keys()).map( /*#__PURE__*/function () {
-    var _ref = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(languageId) {
+  return Promise.all(Array.from(languages.keys()).map(/*#__PURE__*/function () {
+    var _ref = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee(languageId) {
       var _a, grammarScopeName, grammar;
-      return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+      return _rollupPluginBabelHelpers.regenerator().w(function (_context) {
+        while (1) switch (_context.p = _context.n) {
           case 0:
-            _context.prev = 0;
+            _context.p = 0;
             grammarScopeName = (_a = languages.get(languageId)) !== null && _a !== void 0 ? _a : 'plaintext';
-            _context.next = 4;
+            _context.n = 1;
             return registry.loadGrammar(grammarScopeName);
-          case 4:
-            grammar = _context.sent;
+          case 1:
+            grammar = _context.v;
             monaco__namespace.languages.setTokensProvider(languageId, {
               getInitialState: function getInitialState() {
                 return new TokenizerState(monacoTextmate.INITIAL);
@@ -91,16 +90,15 @@ function wireTmGrammars(registry, languages) {
                 };
               }
             });
-            _context.next = 10;
+            _context.n = 3;
             break;
-          case 8:
-            _context.prev = 8;
-            _context.t0 = _context["catch"](0);
-          case 10:
-          case "end":
-            return _context.stop();
+          case 2:
+            _context.p = 2;
+            _context.v;
+          case 3:
+            return _context.a(2);
         }
-      }, _callee, null, [[0, 8]]);
+      }, _callee, null, [[0, 2]]);
     }));
     return function (_x) {
       return _ref.apply(this, arguments);

package/cjs/components/shared/monaco-editor/utils/prettier/index.js

@@ -12,26 +12,23 @@ function prettier (_x, _x2) {
   return _ref.apply(this, arguments);
 }
 function _ref() {
-  _ref = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(value, options) {
+  _ref = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee(value, options) {
     var prettier;
-    return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
+    return _rollupPluginBabelHelpers.regenerator().w(function (_context) {
+      while (1) switch (_context.p = _context.n) {
         case 0:
-          _context.prev = 0;
-          _context.next = 3;
+          _context.p = 0;
+          _context.n = 1;
           return import('prettier/standalone');
-        case 3:
-          prettier = _context.sent;
-          return _context.abrupt("return", prettier.format(value, Object.assign(Object.assign({}, options), config.prettierConfigSource.config)));
-        case 7:
-          _context.prev = 7;
-          _context.t0 = _context["catch"](0);
-          return _context.abrupt("return", value);
-        case 10:
-        case "end":
-          return _context.stop();
+        case 1:
+          prettier = _context.v;
+          return _context.a(2, prettier.format(value, Object.assign(Object.assign({}, options), config.prettierConfigSource.config)));
+        case 2:
+          _context.p = 2;
+          _context.v;
+          return _context.a(2, value);
       }
-    }, _callee, null, [[0, 7]]);
+    }, _callee, null, [[0, 2]]);
   }));
   return _ref.apply(this, arguments);
 }

package/cjs/components/shared/monaco-editor/utils/theme/convert.js

@@ -18,7 +18,7 @@ function sanitizeColor(color) {
   }
   try {
     return new Color__default.default(color).hex();
-  } catch (e) {
+  } catch (_a) {
     return '#FF0000';
   }
 }

package/cjs/components/shared/monaco-editor/utils/theme/index.js

@@ -11,19 +11,16 @@ function importTheme(_x) {
   return _importTheme.apply(this, arguments);
 }
 function _importTheme() {
-  _importTheme = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(theme) {
+  _importTheme = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee(theme) {
     var _a;
-    return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
+    return _rollupPluginBabelHelpers.regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
         case 0:
-          return _context.abrupt("return", ((_a = index.VSCODE_THEMES.find(function (t) {
+          return _context.a(2, ((_a = index.VSCODE_THEMES.find(function (t) {
             return t.id === theme;
           })) !== null && _a !== void 0 ? _a : index.VSCODE_THEMES[0]).getTheme().then(function (themeData) {
             return convert.convertToMonacoTheme(themeData);
           }));
-        case 1:
-        case "end":
-          return _context.stop();
       }
     }, _callee);
   }));

package/cjs/components/shared/monaco-editor/vendors/monaco-collab-ext/RemoteCursor.js

@@ -21,7 +21,7 @@ var RemoteCursor = /*#__PURE__*/function () {
   /**
    * Gets the unique id of this cursor.
    */
-  _rollupPluginBabelHelpers.createClass(RemoteCursor, [{
+  return _rollupPluginBabelHelpers.createClass(RemoteCursor, [{
     key: "getId",
     value: function getId() {
       return this._delegate.getId();
@@ -91,7 +91,6 @@ var RemoteCursor = /*#__PURE__*/function () {
       this._delegate.dispose();
     }
   }]);
-  return RemoteCursor;
 }();
 
 exports.RemoteCursor = RemoteCursor;

package/cjs/components/shared/monaco-editor/vendors/monaco-collab-ext/RemoteCursorManager.d.ts

@@ -1,6 +1,5 @@
 import { RemoteCursor } from './RemoteCursor';
 import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
-import type { IPosition } from 'monaco-editor/esm/vs/editor/editor.api';
 export interface IRemoteCursorManagerOptions {
     editor: monaco.editor.ICodeEditor;
     tooltips?: boolean;
@@ -26,7 +25,7 @@ export declare class RemoteCursorManager {
      * Updates the location of the specified remote cursor
      * using a Monaco IPosition object.
      */
-    setCursorPosition(id: string, position: IPosition): void;
+    setCursorPosition(id: string, position: monaco.IPosition): void;
     /**
      * Updates the location of the specified remote cursor
      * based on a zero-based text offset.

package/cjs/components/shared/monaco-editor/vendors/monaco-collab-ext/RemoteCursorManager.js

@@ -19,7 +19,7 @@ var RemoteCursorManager = /*#__PURE__*/function () {
   /**
    * Adds a new remote cursor to the editor.
    */
-  _rollupPluginBabelHelpers.createClass(RemoteCursorManager, [{
+  return _rollupPluginBabelHelpers.createClass(RemoteCursorManager, [{
     key: "addCursor",
     value: function addCursor(id, color, label) {
       var _this = this;
@@ -41,7 +41,7 @@ var RemoteCursorManager = /*#__PURE__*/function () {
       if (remoteCursorWidget && !remoteCursorWidget.isDisposed()) {
         remoteCursorWidget.dispose();
       }
-      this._cursorWidgets.delete(id);
+      this._cursorWidgets["delete"](id);
     }
     /**
      * Updates the location of the specified remote cursor
@@ -100,7 +100,6 @@ var RemoteCursorManager = /*#__PURE__*/function () {
       return (_a = this._cursorWidgets.get(id)) !== null && _a !== void 0 ? _a : null;
     }
   }]);
-  return RemoteCursorManager;
 }();
 
 exports.RemoteCursorManager = RemoteCursorManager;

package/cjs/components/shared/monaco-editor/vendors/monaco-collab-ext/RemoteCursorWidget.js

@@ -49,7 +49,7 @@ var RemoteCursorWidget = /*#__PURE__*/function () {
     this._editor.addContentWidget(this);
     this._disposed = false;
   }
-  _rollupPluginBabelHelpers.createClass(RemoteCursorWidget, [{
+  return _rollupPluginBabelHelpers.createClass(RemoteCursorWidget, [{
     key: "hide",
     value: function hide() {
       this._domNode.style.display = 'none';
@@ -163,7 +163,6 @@ var RemoteCursorWidget = /*#__PURE__*/function () {
       }
     }
   }]);
-  return RemoteCursorWidget;
 }();
 
 exports.RemoteCursorWidget = RemoteCursorWidget;

package/cjs/components/shared/monaco-editor/vendors/monaco-collab-ext/RemoteSelection.js

@@ -55,7 +55,7 @@ var RemoteSelection = /*#__PURE__*/function () {
   /**
    * Gets the userland id of this selection.
    */
-  _rollupPluginBabelHelpers.createClass(RemoteSelection, [{
+  return _rollupPluginBabelHelpers.createClass(RemoteSelection, [{
     key: "getId",
     value: function getId() {
       return this._id;
@@ -202,7 +202,6 @@ var RemoteSelection = /*#__PURE__*/function () {
       }
     }
   }]);
-  return RemoteSelection;
 }();
 
 exports.RemoteSelection = RemoteSelection;

package/cjs/components/shared/monaco-editor/vendors/monaco-collab-ext/RemoteSelectionManager.d.ts

@@ -1,6 +1,5 @@
 import { RemoteSelection } from './RemoteSelection';
 import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
-import type { IPosition } from 'monaco-editor/esm/vs/editor/editor.api';
 /**
  * The IRemoteSelectionManagerOptions represents the options that
  * configure the behavior a the RemoteSelectionManager.
@@ -79,7 +78,7 @@ export declare class RemoteSelectionManager {
      * @param end
      *   The ending position of the selection.
      */
-    setSelectionPositions(id: string, start: IPosition, end: IPosition): void;
+    setSelectionPositions(id: string, start: monaco.IPosition, end: monaco.IPosition): void;
     /**
      * Shows the specified selection, if it is currently hidden.
      *

package/cjs/components/shared/monaco-editor/vendors/monaco-collab-ext/RemoteSelectionManager.js

@@ -28,7 +28,7 @@ var RemoteSelectionManager = /*#__PURE__*/function () {
    * @param color
    *   The color to render the selection with.
    */
-  _rollupPluginBabelHelpers.createClass(RemoteSelectionManager, [{
+  return _rollupPluginBabelHelpers.createClass(RemoteSelectionManager, [{
     key: "addSelection",
     value: function addSelection(id, color, label) {
       var _this = this;
@@ -132,7 +132,6 @@ var RemoteSelectionManager = /*#__PURE__*/function () {
       return (_a = this._remoteSelections.get(id)) !== null && _a !== void 0 ? _a : null;
     }
   }]);
-  return RemoteSelectionManager;
 }();
 
 exports.RemoteSelectionManager = RemoteSelectionManager;

package/cjs/components/shared/monaco-editor/vendors/monaco-collab-ext/styles.d.ts

@@ -1,2 +1,2 @@
 export declare const REMOTE_MARKER_CLASS_NAME = "exercise-editor-marker";
-export declare const cssRemoteMarker: import("styled-components").FlattenSimpleInterpolation;
+export declare const cssRemoteMarker: import("@emotion/react").SerializedStyles;

package/cjs/components/shared/monaco-editor/vendors/monaco-collab-ext/styles.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var designTokens = require('@elice/design-tokens');
-var styled = require('styled-components');
+var react = require('@emotion/react');
 
 /* ====================================================================================================
  * These codes forked and modified from `convergencelabs/monaco-collab-ext`
@@ -11,7 +11,7 @@ var styled = require('styled-components');
  * - codes: https://github.com/convergencelabs/monaco-collab-ext/tree/6ece72028e4b8fb35e9928a304fbdfe28a4e7be9/src/ts
  * ==================================================================================================== */
 var REMOTE_MARKER_CLASS_NAME = 'exercise-editor-marker';
-var cssRemoteMarker = styled.css([".", "{&-cursor{position:absolute;pointer-events:none;z-index:4000;width:2px;&:before{content:'';width:6px;height:5px;display:block;margin-left:-2px;margin-top:0;z-index:4000;background:inherit;}&-tooltip{position:absolute;white-space:nowrap;color:", ";text-shadow:0 0 1px ", ";opacity:1;font-size:12px;padding:2px;font-family:'Pretendard','Malgun Gothic','Helvetica','Myriad Pro','Arial',sans-serif;z-index:4000;transition:opacity 0.5s ease-out;}}&-selection{position:absolute;pointer-events:auto;opacity:0.3;}}"], REMOTE_MARKER_CLASS_NAME, designTokens.base.color.white, designTokens.base.color.gray9);
+var cssRemoteMarker = /*#__PURE__*/react.css(".", REMOTE_MARKER_CLASS_NAME, "{&-cursor{position:absolute;pointer-events:none;z-index:4000;width:2px;&:before{content:'';width:6px;height:5px;display:block;margin-left:-2px;margin-top:0;z-index:4000;background:inherit;}&-tooltip{position:absolute;white-space:nowrap;color:", designTokens.base.color.white, ";text-shadow:0 0 1px ", designTokens.base.color.gray9, ";opacity:1;font-size:12px;padding:2px;font-family:'Pretendard','Malgun Gothic','Helvetica','Myriad Pro','Arial',sans-serif;z-index:4000;transition:opacity 0.5s ease-out;}}&-selection{position:absolute;pointer-events:auto;opacity:0.3;}}");
 
 exports.REMOTE_MARKER_CLASS_NAME = REMOTE_MARKER_CLASS_NAME;
 exports.cssRemoteMarker = cssRemoteMarker;

package/cjs/components/shared/monaco-editor/vendors/vscode-emmet-helper/emmetHelper.js

@@ -590,7 +590,6 @@ function getExpandOptions(syntax, emmetConfig, filter) {
     // cache: null
   };
 }
-
 function getClosingStyle(syntax) {
   switch (syntax) {
     case 'xhtml':

package/cjs/components/shared/no-vnc/NoVnc.js

@@ -3,6 +3,7 @@
 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 React = require('react');
 var reactUse = require('react-use');
@@ -18,13 +19,13 @@ var RFB_decoders_tight = require('@novnc/novnc/core/decoders/tight');
 var RFB_decoders_tight_png = require('@novnc/novnc/core/decoders/tightpng');
 var encodings = require('@novnc/novnc/core/encodings');
 var RFB = require('@novnc/novnc/core/rfb');
-var styled = require('styled-components');
-var ExerciseMenuButton = require('../exercise-menu-button/ExerciseMenuButton.js');
-var PreviewContainer = require('../preview-container/PreviewContainer.js');
 var en = require('./locales/en.json.js');
+var PreviewContainer = require('../preview-container/PreviewContainer.js');
+var ExerciseMenuButton = require('../exercise-menu-button/ExerciseMenuButton.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 RFB_decoders_copy_rect__default = /*#__PURE__*/_interopDefaultCompat(RFB_decoders_copy_rect);
 var RFB_decoders_hextile__default = /*#__PURE__*/_interopDefaultCompat(RFB_decoders_hextile);
@@ -33,27 +34,48 @@ var RFB_decoders_rre__default = /*#__PURE__*/_interopDefaultCompat(RFB_decoders_
 var RFB_decoders_tight__default = /*#__PURE__*/_interopDefaultCompat(RFB_decoders_tight);
 var RFB_decoders_tight_png__default = /*#__PURE__*/_interopDefaultCompat(RFB_decoders_tight_png);
 var RFB__default = /*#__PURE__*/_interopDefaultCompat(RFB);
-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 VNC_BACKGROUND_COLOR = designTokens.base.color.navy7;
-var StyledHeaderTitle = styled__default.default.div.withConfig({
-  componentId: "sc-1duy62f-0"
-})(["flex:1;"]);
-var StyledHeaderButtonGroup = styled__default.default.div.withConfig({
-  componentId: "sc-1duy62f-1"
-})(["flex:0 0 auto;display:flex;align-items:center;"]);
-var StyledVncWrap = styled__default.default.div.withConfig({
-  componentId: "sc-1duy62f-2"
-})(["display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:", ";overflow:hidden;"], VNC_BACKGROUND_COLOR);
-var StyledNoVncContainer = styled__default.default.div.withConfig({
-  componentId: "sc-1duy62f-3"
-})([""]);
-var StyledNoVnc = styled__default.default.div.withConfig({
-  componentId: "sc-1duy62f-4"
-})(["position:relative;left:50%;top:50%;transform-origin:center center;transform:translate(-50%,-50%);"]);
+var StyledHeaderTitle = /*#__PURE__*/_styled__default.default("div", {
+  target: "ejcezyv4"
+})("production" === "production" ? {
+  name: "82a6rk",
+  styles: "flex:1"
+} : {
+  name: "82a6rk",
+  styles: "flex:1",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledHeaderButtonGroup = /*#__PURE__*/_styled__default.default("div", {
+  target: "ejcezyv3"
+})("production" === "production" ? {
+  name: "6w70r0",
+  styles: "flex:0 0 auto;display:flex;align-items:center"
+} : {
+  name: "6w70r0",
+  styles: "flex:0 0 auto;display:flex;align-items:center",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledVncWrap = /*#__PURE__*/_styled__default.default("div", {
+  target: "ejcezyv2"
+})("display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:", VNC_BACKGROUND_COLOR, ";overflow:hidden;");
+var StyledNoVncContainer = /*#__PURE__*/_styled__default.default("div", {
+  target: "ejcezyv1"
+})();
+var StyledNoVnc = /*#__PURE__*/_styled__default.default("div", {
+  target: "ejcezyv0"
+})("production" === "production" ? {
+  name: "1d7o9kz",
+  styles: "position:relative;left:50%;top:50%;transform-origin:center center;transform:translate(-50%, -50%)"
+} : {
+  name: "1d7o9kz",
+  styles: "position:relative;left:50%;top:50%;transform-origin:center center;transform:translate(-50%, -50%)",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 //
 //
 //
@@ -235,9 +257,7 @@ var NoVnc = React.forwardRef(function (_ref, ref) {
     }
     vncRfb.current.scaleViewport = isVncScaledFromLocal;
     vncRfb.current.resizeSession = !isVncScaledFromLocal;
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [isVncScaledFromLocal]);
+  }, [isVncScaledFromLocal]);
   //
   //
   //
@@ -300,6 +320,6 @@ var NoVnc = React.forwardRef(function (_ref, ref) {
     })
   });
 });
-var NoVnc$1 = new intl.IntlComponentBuilder(NoVnc).add('en', en.default).addAsync('ko', Promise.resolve().then(function () { return require('./locales/ko.json.js'); })).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();
+var NoVnc_default = new intl.IntlComponentBuilder(NoVnc).add('en', en.default).addAsync('ko', Promise.resolve().then(function () { return require('./locales/ko.json.js'); })).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 = NoVnc$1;
+exports.default = NoVnc_default;

package/cjs/components/shared/preview-container/PreviewContainer.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export interface PreviewContainerProps {
     children?: React.ReactNode;
     header?: React.ReactNode;

package/cjs/components/shared/preview-container/PreviewContainer.js

@@ -2,23 +2,23 @@
 
 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 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 PREVIEW_CONTAINER_HEADER_HEIGHT = 36; // 2.25rem
 var PREVIEW_CONTAINER_HEADER_PADDING_TOP_BOTTOM = 4; // 0.25rem
-var StyledPreviewContainer = styled__default.default.div.withConfig({
-  componentId: "sc-1oi07w2-0"
-})(["display:flex;flex-direction:column;width:100%;height:100%;background-color:", ";overflow:hidden;"], designTokens.base.color.white);
-var StyledPreviewHeader = styled__default.default.div.withConfig({
-  componentId: "sc-1oi07w2-1"
-})(["flex:0 0 ", "px;display:flex;align-items:center;padding:", "px 0.5rem;border-bottom:1px solid ", ";background-color:", ";"], PREVIEW_CONTAINER_HEADER_HEIGHT, PREVIEW_CONTAINER_HEADER_PADDING_TOP_BOTTOM, designTokens.base.color.navy7, designTokens.base.color.navy8);
+var StyledPreviewContainer = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1xlhqh31"
+})("display:flex;flex-direction:column;width:100%;height:100%;background-color:", designTokens.base.color.white, ";overflow:hidden;");
+var StyledPreviewHeader = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1xlhqh30"
+})("flex:0 0 ", PREVIEW_CONTAINER_HEADER_HEIGHT, "px;display:flex;align-items:center;padding:", PREVIEW_CONTAINER_HEADER_PADDING_TOP_BOTTOM, "px 0.5rem;border-bottom:1px solid ", designTokens.base.color.navy7, ";background-color:", designTokens.base.color.navy8, ";");
 var PreviewContainer = React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     header = _ref.header;