@elice/material-runbox-legacy 1.240718.0-trasncript.2 → 1.240718.2

package/cjs/components/material-runbox-legacy/MaterialRunboxLegacy.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
 var intl = require('@elice/intl');
@@ -12,32 +12,30 @@ var ko = require('./locales/ko.json.js');
 var MaterialRunboxLegacyRunnerRoomWrapper = require('./MaterialRunboxLegacyRunnerRoomWrapper.js');
 var MaterialRunboxLegacy_styled = require('./MaterialRunboxLegacy.styled.js');
 
-var MaterialRunboxLegacy = function MaterialRunboxLegacy(_ref) {
-  var materialRunboxId = _ref.materialRunboxId,
-    __intl = _ref.__intl;
-  var isReady = materialSharedUtils.useMaterialConfigApiClientUpdate(apiClient.config.init);
+const MaterialRunboxLegacy = ({
+  materialRunboxId,
+  __intl
+}) => {
+  const isReady = materialSharedUtils.useMaterialConfigApiClientUpdate(apiClient.config.init);
   if (!isReady) {
-    return jsxRuntime.jsx(blocks.Flex, {
+    return React.createElement(blocks.Flex, {
       justify: "center",
       align: "center",
       width: "100%",
-      height: "100%",
-      children: jsxRuntime.jsx(blocks.Spinner, {
-        size: "small"
-      })
-    });
+      height: "100%"
+    }, React.createElement(blocks.Spinner, {
+      size: "small"
+    }));
   }
-  return jsxRuntime.jsx(intl.RawEliceIntlProvider, {
-    value: __intl,
-    children: jsxRuntime.jsx(MaterialRunboxLegacy_styled.StyledMaterialRunboxLegacy, {
-      children: jsxRuntime.jsx(intl.RawEliceIntlProvider, {
-        value: __intl,
-        children: jsxRuntime.jsx(MaterialRunboxLegacyRunnerRoomWrapper.default, {
-          materialRunboxId: materialRunboxId
-        })
-      })
-    }, materialRunboxId)
-  });
+  return React.createElement(intl.RawEliceIntlProvider, {
+    value: __intl
+  }, React.createElement(MaterialRunboxLegacy_styled.StyledMaterialRunboxLegacy, {
+    key: materialRunboxId
+  }, React.createElement(intl.RawEliceIntlProvider, {
+    value: __intl
+  }, React.createElement(MaterialRunboxLegacyRunnerRoomWrapper.default, {
+    materialRunboxId: materialRunboxId
+  }))));
 };
 var MaterialRunboxLegacy$1 = new intl.IntlComponentBuilder(MaterialRunboxLegacy).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();
 

package/cjs/components/material-runbox-legacy/MaterialRunboxLegacy.styled.js

@@ -2,11 +2,7 @@
 
 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 StyledMaterialRunboxLegacy = styled__default.default.div.withConfig({
+const StyledMaterialRunboxLegacy = styled.div.withConfig({
   componentId: "sc-w139i8-0"
 })(["display:flex;flex-direction:column;padding-top:0.5rem;width:100%;height:100%;background-color:#fff;"]);
 

package/cjs/components/material-runbox-legacy/MaterialRunboxLegacyContent.js

@@ -2,8 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactUse = require('react-use');
 var blocks = require('@elice/blocks');
@@ -12,10 +10,7 @@ var intl = require('@elice/intl');
 var websocket = require('./websocket.js');
 var MaterialRunboxLegacyContent_styled = require('./MaterialRunboxLegacyContent.styled.js');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
+/* eslint-disable @typescript-eslint/naming-convention */
 exports.MaterialRunboxLegacyStatus = void 0;
 (function (MaterialRunboxLegacyStatus) {
   MaterialRunboxLegacyStatus[MaterialRunboxLegacyStatus["Idle"] = 0] = "Idle";
@@ -26,74 +21,47 @@ exports.MaterialRunboxLegacyStatus = void 0;
   MaterialRunboxLegacyStatus[MaterialRunboxLegacyStatus["Terminated"] = 5] = "Terminated";
   MaterialRunboxLegacyStatus[MaterialRunboxLegacyStatus["Error"] = 6] = "Error";
 })(exports.MaterialRunboxLegacyStatus || (exports.MaterialRunboxLegacyStatus = {}));
-var MaterialRunboxLegacyContent = function MaterialRunboxLegacyContent(_ref) {
-  var runboxUrl = _ref.runboxUrl,
-    isRunboxTerminated = _ref.isRunboxTerminated,
-    isRunboxJoinError = _ref.isRunboxJoinError,
-    reconnect = _ref.reconnect;
-  var intl$1 = intl.useRawEliceIntl();
-  var _React$useState = React__default.default.useState(null),
-    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
-    runboxStats = _React$useState2[0],
-    setRunboxStats = _React$useState2[1];
-  var _React$useState3 = React__default.default.useState(false),
-    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
-    isRunboxUrlLoaded = _React$useState4[0],
-    setRunboxUrlLoaded = _React$useState4[1];
-  var isRunboxUrlLoadedPrev = reactUse.usePrevious(isRunboxUrlLoaded);
-  var _React$useState5 = React__default.default.useState(exports.MaterialRunboxLegacyStatus.Idle),
-    _React$useState6 = _rollupPluginBabelHelpers.slicedToArray(_React$useState5, 2),
-    runboxStatus = _React$useState6[0],
-    setRunboxStatus = _React$useState6[1];
-  var isRunboxPreparing = runboxStatus !== exports.MaterialRunboxLegacyStatus.Done && runboxStatus !== exports.MaterialRunboxLegacyStatus.Terminated;
-  websocket.WSMaterialRunboxLegacyStdio.useMessage(function (message) {
+const MaterialRunboxLegacyContent = ({
+  runboxUrl,
+  isRunboxTerminated,
+  isRunboxJoinError,
+  reconnect
+}) => {
+  const intl$1 = intl.useRawEliceIntl();
+  const [runboxStats, setRunboxStats] = React.useState(null);
+  const [isRunboxUrlLoaded, setRunboxUrlLoaded] = React.useState(false);
+  const isRunboxUrlLoadedPrev = reactUse.usePrevious(isRunboxUrlLoaded);
+  const [runboxStatus, setRunboxStatus] = React.useState(exports.MaterialRunboxLegacyStatus.Idle);
+  const isRunboxPreparing = runboxStatus !== exports.MaterialRunboxLegacyStatus.Done && runboxStatus !== exports.MaterialRunboxLegacyStatus.Terminated;
+  websocket.WSMaterialRunboxLegacyStdio.useMessage(message => {
     if (message.type === 'stats') {
       setRunboxStats(message.data);
     }
+  }, {
+    camelize: true
   });
-  var handleReconnect = function handleReconnect() {
+  const handleReconnect = () => {
     setRunboxStats(null);
     setRunboxUrlLoaded(false);
     reconnect();
   };
-  var handleShare = /*#__PURE__*/function () {
-    var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee() {
-      return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            if (runboxUrl) {
-              _context.next = 2;
-              break;
-            }
-            return _context.abrupt("return");
-          case 2:
-            _context.prev = 2;
-            _context.next = 5;
-            return navigator.clipboard.writeText(runboxUrl);
-          case 5:
-            blocks.Notification.success(intl$1.formatMessage({
-              id: 'runboxLegacy.share.success'
-            }));
-            _context.next = 11;
-            break;
-          case 8:
-            _context.prev = 8;
-            _context.t0 = _context["catch"](2);
-            alert(runboxUrl);
-          case 11:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[2, 8]]);
-    }));
-    return function handleShare() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+  const handleShare = async () => {
+    if (!runboxUrl) {
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(runboxUrl);
+      blocks.Notification.success(intl$1.formatMessage({
+        id: 'runboxLegacy.share.success'
+      }));
+    } catch (e) {
+      alert(runboxUrl);
+    }
+  };
   //
   // Change `isRunboxUrlLoaded` flag to false, when runbox url removed.
   //
-  React__default.default.useEffect(function () {
+  React.useEffect(() => {
     if (!runboxUrl) {
       setRunboxUrlLoaded(false);
     }
@@ -101,8 +69,8 @@ var MaterialRunboxLegacyContent = function MaterialRunboxLegacyContent(_ref) {
   //
   // Determine runbox status.
   //
-  React__default.default.useEffect(function () {
-    setRunboxStatus(function () {
+  React.useEffect(() => {
+    setRunboxStatus((() => {
       switch (true) {
         case isRunboxJoinError:
           return exports.MaterialRunboxLegacyStatus.Error;
@@ -119,12 +87,12 @@ var MaterialRunboxLegacyContent = function MaterialRunboxLegacyContent(_ref) {
         default:
           return exports.MaterialRunboxLegacyStatus.Idle;
       }
-    }());
+    })());
   }, [isRunboxJoinError, isRunboxTerminated, isRunboxUrlLoaded, isRunboxUrlLoadedPrev, runboxUrl]);
   /**
    * Runbox status message shown at header.
    */
-  var renderRunboxStatusMessage = function renderRunboxStatusMessage() {
+  const renderRunboxStatusMessage = () => {
     switch (runboxStatus) {
       case exports.MaterialRunboxLegacyStatus.Idle:
         return intl$1.formatMessage({
@@ -155,201 +123,154 @@ var MaterialRunboxLegacyContent = function MaterialRunboxLegacyContent(_ref) {
   /**
    * Header of runbox.
    */
-  var renderRunboxHeader = function renderRunboxHeader() {
-    var runboxStatsInfo = runboxStats ? jsxRuntime.jsx(blocks.LaptopOrLarger, {
-      children: jsxRuntime.jsxs(blocks.Flex, {
-        children: [jsxRuntime.jsxs(blocks.Flex, {
-          align: "center",
-          children: [jsxRuntime.jsx(blocks.Text, {
-            size: "tiny",
-            lineHeight: 1.5,
-            role: "gray7",
-            bold: true,
-            children: "CPU:\xA0"
-          }), jsxRuntime.jsx(blocks.Flex, {
-            align: "center",
-            width: "30px",
-            children: jsxRuntime.jsx(blocks.AntProgress, {
-              type: "line",
-              percent: runboxStats.cpu.percent,
-              status: 'active',
-              showInfo: false
-            })
-          }), jsxRuntime.jsxs(blocks.Text, {
-            size: "tiny",
-            lineHeight: 1.5,
-            role: "gray5",
-            children: ["\xA0", "".concat(runboxStats.cpu.percent.toFixed(0), "%")]
-          })]
-        }), jsxRuntime.jsx(blocks.Hspace, {
-          width: 1
-        }), jsxRuntime.jsxs(blocks.Flex, {
-          align: "center",
-          children: [jsxRuntime.jsx(blocks.Text, {
-            size: "tiny",
-            lineHeight: 1.5,
-            role: "gray7",
-            bold: true,
-            children: "MEM:\xA0"
-          }), jsxRuntime.jsx(blocks.Flex, {
-            align: "center",
-            width: "30px",
-            children: jsxRuntime.jsx(blocks.AntProgress, {
-              percent: runboxStats.memory.currentBytes / runboxStats.memory.limitBytes * 100,
-              status: 'active',
-              showInfo: false
-            })
-          }), jsxRuntime.jsxs(blocks.Text, {
-            size: "tiny",
-            lineHeight: 1.5,
-            role: "gray5",
-            children: ["\xA0", "".concat((runboxStats.memory.currentBytes / 1024 / 1024).toFixed(0), "M / ").concat((runboxStats.memory.limitBytes / 1024 / 1024).toFixed(0), "M")]
-          })]
-        }), jsxRuntime.jsx(blocks.Hspace, {
-          width: 1
-        }), jsxRuntime.jsx(blocks.Text, {
-          size: "tiny",
-          lineHeight: 1.5,
-          role: "gray7",
-          bold: true,
-          children: "DISK:\xA0"
-        }), jsxRuntime.jsx(blocks.Text, {
-          size: "tiny",
-          lineHeight: 1.5,
-          role: "gray5",
-          children: "Read ".concat((runboxStats.block.rxBytes / 1024 / 1024).toFixed(0), "M Write ").concat((runboxStats.block.txBytes / 1024 / 1024).toFixed(0), "M")
-        }), jsxRuntime.jsx(blocks.Hspace, {
-          width: 1
-        }), jsxRuntime.jsx(blocks.Text, {
-          size: "tiny",
-          lineHeight: 1.5,
-          role: "gray7",
-          bold: true,
-          children: "NET:\xA0"
-        }), jsxRuntime.jsx(blocks.Text, {
-          size: "tiny",
-          lineHeight: 1.5,
-          role: "gray5",
-          children: "\u2193".concat((runboxStats.network.rxBytes / 1024 / 1024).toFixed(0), "M \u2191").concat((runboxStats.network.txBytes / 1024 / 1024).toFixed(0), "M")
-        }), jsxRuntime.jsx(blocks.Hspace, {
-          width: 1
-        })]
-      })
-    }) : null;
-    return jsxRuntime.jsxs(MaterialRunboxLegacyContent_styled.RunboxHeader, {
-      children: [runboxStatsInfo, jsxRuntime.jsxs(blocks.Flex, {
-        align: "center",
-        children: [jsxRuntime.jsx(MaterialRunboxLegacyContent_styled.RunboxStatusLight, {
-          status: runboxStatus
-        }), jsxRuntime.jsx(blocks.Hspace, {
-          width: 0.5
-        }), jsxRuntime.jsx(blocks.Text, {
-          size: "small",
-          children: renderRunboxStatusMessage()
-        })]
-      }), jsxRuntime.jsx(blocks.Hspace, {
-        width: 1
-      }), jsxRuntime.jsx(blocks.IconButton, {
-        icon: icons.eilShare,
-        role: "greyfb",
-        size: "small",
-        border: true,
-        disabled: isRunboxPreparing,
-        onClick: handleShare
-      }), jsxRuntime.jsx(blocks.Hspace, {
-        width: 0.5
-      }), jsxRuntime.jsx(blocks.Tooltip, {
-        title: isRunboxPreparing ? intl$1.formatMessage({
-          id: 'runboxLegacy.reloadButton.tooltip'
-        }) : undefined,
-        children: jsxRuntime.jsx("span", {
-          children: jsxRuntime.jsx(blocks.IconButton, {
-            icon: icons.eilReset,
-            iconSpin: isRunboxPreparing,
-            role: "greyfb",
-            size: "small",
-            border: true,
-            disabled: isRunboxPreparing,
-            onClick: handleReconnect
-          })
-        })
-      })]
-    });
+  const renderRunboxHeader = () => {
+    const runboxStatsInfo = runboxStats ? React.createElement(blocks.LaptopOrLarger, null, React.createElement(blocks.Flex, null, React.createElement(blocks.Flex, {
+      align: "center"
+    }, React.createElement(blocks.Text, {
+      size: "tiny",
+      lineHeight: 1.5,
+      role: "gray7",
+      bold: true
+    }, "CPU:\u00A0"), React.createElement(blocks.Flex, {
+      align: "center",
+      width: "30px"
+    }, React.createElement(blocks.AntProgress, {
+      type: "line",
+      percent: runboxStats.cpu.percent,
+      status: 'active',
+      showInfo: false
+    })), React.createElement(blocks.Text, {
+      size: "tiny",
+      lineHeight: 1.5,
+      role: "gray5"
+    }, "\u00A0", `${runboxStats.cpu.percent.toFixed(0)}%`)), React.createElement(blocks.Hspace, {
+      width: 1
+    }), React.createElement(blocks.Flex, {
+      align: "center"
+    }, React.createElement(blocks.Text, {
+      size: "tiny",
+      lineHeight: 1.5,
+      role: "gray7",
+      bold: true
+    }, "MEM:\u00A0"), React.createElement(blocks.Flex, {
+      align: "center",
+      width: "30px"
+    }, React.createElement(blocks.AntProgress, {
+      percent: runboxStats.memory.currentBytes / runboxStats.memory.limitBytes * 100,
+      status: 'active',
+      showInfo: false
+    })), React.createElement(blocks.Text, {
+      size: "tiny",
+      lineHeight: 1.5,
+      role: "gray5"
+    }, "\u00A0", `${(runboxStats.memory.currentBytes / 1024 / 1024).toFixed(0)}M / ${(runboxStats.memory.limitBytes / 1024 / 1024).toFixed(0)}M`)), React.createElement(blocks.Hspace, {
+      width: 1
+    }), React.createElement(blocks.Text, {
+      size: "tiny",
+      lineHeight: 1.5,
+      role: "gray7",
+      bold: true
+    }, "DISK:\u00A0"), React.createElement(blocks.Text, {
+      size: "tiny",
+      lineHeight: 1.5,
+      role: "gray5"
+    }, `Read ${(runboxStats.block.rxBytes / 1024 / 1024).toFixed(0)}M Write ${(runboxStats.block.txBytes / 1024 / 1024).toFixed(0)}M`), React.createElement(blocks.Hspace, {
+      width: 1
+    }), React.createElement(blocks.Text, {
+      size: "tiny",
+      lineHeight: 1.5,
+      role: "gray7",
+      bold: true
+    }, "NET:\u00A0"), React.createElement(blocks.Text, {
+      size: "tiny",
+      lineHeight: 1.5,
+      role: "gray5"
+    }, `↓${(runboxStats.network.rxBytes / 1024 / 1024).toFixed(0)}M ↑${(runboxStats.network.txBytes / 1024 / 1024).toFixed(0)}M`), React.createElement(blocks.Hspace, {
+      width: 1
+    }))) : null;
+    return React.createElement(MaterialRunboxLegacyContent_styled.RunboxHeader, null, runboxStatsInfo, React.createElement(blocks.Flex, {
+      align: "center"
+    }, React.createElement(MaterialRunboxLegacyContent_styled.RunboxStatusLight, {
+      status: runboxStatus
+    }), React.createElement(blocks.Hspace, {
+      width: 0.5
+    }), React.createElement(blocks.Text, {
+      size: "small"
+    }, renderRunboxStatusMessage())), React.createElement(blocks.Hspace, {
+      width: 1
+    }), React.createElement(blocks.IconButton, {
+      icon: icons.eilShare,
+      role: "greyfb",
+      size: "small",
+      border: true,
+      disabled: isRunboxPreparing,
+      onClick: handleShare
+    }), React.createElement(blocks.Hspace, {
+      width: 0.5
+    }), React.createElement(blocks.Tooltip, {
+      title: isRunboxPreparing ? intl$1.formatMessage({
+        id: 'runboxLegacy.reloadButton.tooltip'
+      }) : undefined
+    }, React.createElement("span", null, React.createElement(blocks.IconButton, {
+      icon: icons.eilReset,
+      iconSpin: isRunboxPreparing,
+      role: "greyfb",
+      size: "small",
+      border: true,
+      disabled: isRunboxPreparing,
+      onClick: handleReconnect
+    }))));
   };
   /**
    * Body of runbox.
    */
-  var renderRunboxBody = function renderRunboxBody() {
+  const renderRunboxBody = () => {
     if (runboxStatus === exports.MaterialRunboxLegacyStatus.Terminated) {
-      return jsxRuntime.jsx(MaterialRunboxLegacyContent_styled.RunboxBody, {
-        children: jsxRuntime.jsx(MaterialRunboxLegacyContent_styled.RunboxBodyOverlay, {
-          children: jsxRuntime.jsx(blocks.Box, {
-            children: jsxRuntime.jsx(blocks.Text, {
-              size: "small",
-              preWrap: true,
-              lineHeight: 1.5,
-              textAlign: "center",
-              children: intl$1.formatMessage({
-                id: 'runboxLegacy.overlay.message.terminated'
-              })
-            })
-          })
-        })
-      });
+      return React.createElement(MaterialRunboxLegacyContent_styled.RunboxBody, null, React.createElement(MaterialRunboxLegacyContent_styled.RunboxBodyOverlay, null, React.createElement(blocks.Box, null, React.createElement(blocks.Text, {
+        size: "small",
+        preWrap: true,
+        lineHeight: 1.5,
+        textAlign: "center"
+      }, intl$1.formatMessage({
+        id: 'runboxLegacy.overlay.message.terminated'
+      })))));
     }
     if (runboxStatus === exports.MaterialRunboxLegacyStatus.Error) {
-      return jsxRuntime.jsx(MaterialRunboxLegacyContent_styled.RunboxBody, {
-        children: jsxRuntime.jsx(MaterialRunboxLegacyContent_styled.RunboxBodyOverlay, {
-          children: jsxRuntime.jsx(blocks.Box, {
-            children: jsxRuntime.jsx(blocks.Text, {
-              size: "small",
-              preWrap: true,
-              lineHeight: 1.5,
-              textAlign: "center",
-              children: intl$1.formatMessage({
-                id: 'runboxLegacy.overlay.message.error'
-              })
-            })
-          })
-        })
-      });
+      return React.createElement(MaterialRunboxLegacyContent_styled.RunboxBody, null, React.createElement(MaterialRunboxLegacyContent_styled.RunboxBodyOverlay, null, React.createElement(blocks.Box, null, React.createElement(blocks.Text, {
+        size: "small",
+        preWrap: true,
+        lineHeight: 1.5,
+        textAlign: "center"
+      }, intl$1.formatMessage({
+        id: 'runboxLegacy.overlay.message.error'
+      })))));
     }
-    return jsxRuntime.jsxs(MaterialRunboxLegacyContent_styled.RunboxBody, {
-      children: [jsxRuntime.jsx(MaterialRunboxLegacyContent_styled.RunboxBodyOverlay, {
-        "aria-hidden": !isRunboxPreparing,
-        children: jsxRuntime.jsxs(blocks.Box, {
-          children: [jsxRuntime.jsx(blocks.Spinner, {}), jsxRuntime.jsx(blocks.Vspace, {
-            height: 1
-          }), jsxRuntime.jsx(blocks.Text, {
-            size: "small",
-            preWrap: true,
-            lineHeight: 1.5,
-            textAlign: "center",
-            children: runboxStatus === exports.MaterialRunboxLegacyStatus.Disconnected ? intl$1.formatMessage({
-              id: 'runboxLegacy.overlay.message.disconnected'
-            }) : intl$1.formatMessage({
-              id: 'runboxLegacy.overlay.message.connecting'
-            })
-          })]
-        })
-      }), runboxUrl ? jsxRuntime.jsx(MaterialRunboxLegacyContent_styled.RunboxBodyIframe, {
-        src: runboxUrl + '/?folder=/mnt/elice/workspace',
-        title: "material-runbox-legacy",
-        onLoad: function onLoad() {
-          return setRunboxUrlLoaded(true);
-        },
-        allow: "clipboard-read; clipboard-write; camera *; microphone *"
-      }) : null]
-    });
+    return React.createElement(MaterialRunboxLegacyContent_styled.RunboxBody, null, React.createElement(MaterialRunboxLegacyContent_styled.RunboxBodyOverlay, {
+      "aria-hidden": !isRunboxPreparing
+    }, React.createElement(blocks.Box, null, React.createElement(blocks.Spinner, null), React.createElement(blocks.Vspace, {
+      height: 1
+    }), React.createElement(blocks.Text, {
+      size: "small",
+      preWrap: true,
+      lineHeight: 1.5,
+      textAlign: "center"
+    }, runboxStatus === exports.MaterialRunboxLegacyStatus.Disconnected ? intl$1.formatMessage({
+      id: 'runboxLegacy.overlay.message.disconnected'
+    }) : intl$1.formatMessage({
+      id: 'runboxLegacy.overlay.message.connecting'
+    })))), runboxUrl ? React.createElement(MaterialRunboxLegacyContent_styled.RunboxBodyIframe, {
+      src: runboxUrl + '/?folder=/mnt/elice/workspace',
+      title: "material-runbox-legacy",
+      onLoad: () => setRunboxUrlLoaded(true),
+      allow: "clipboard-read; clipboard-write; camera *; microphone *"
+    }) : null);
   };
   //
   //
   //
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [renderRunboxHeader(), jsxRuntime.jsx(blocks.Vspace, {
-      height: 0.5
-    }), renderRunboxBody()]
-  });
+  return React.createElement(React.Fragment, null, renderRunboxHeader(), React.createElement(blocks.Vspace, {
+    height: 0.5
+  }), renderRunboxBody());
 };
 
 exports.default = MaterialRunboxLegacyContent;

package/cjs/components/material-runbox-legacy/MaterialRunboxLegacyContent.styled.js

@@ -4,25 +4,21 @@ var designTokens = require('@elice/design-tokens');
 var styled = require('styled-components');
 var MaterialRunboxLegacyContent = require('./MaterialRunboxLegacyContent.js');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-var RunboxHeader = styled__default.default.div.withConfig({
+const RunboxHeader = styled.div.withConfig({
   componentId: "sc-18a3wux-0"
 })(["flex:0 0 2.5rem;display:flex;justify-content:flex-end;align-items:center;padding:0 0.5rem;"]);
-var RunboxBody = styled__default.default.div.withConfig({
+const RunboxBody = styled.div.withConfig({
   componentId: "sc-18a3wux-1"
 })(["position:relative;flex:1;"]);
-var RunboxBodyOverlay = styled__default.default.div.withConfig({
+const RunboxBodyOverlay = styled.div.withConfig({
   componentId: "sc-18a3wux-2"
 })(["position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;flex:1;width:100%;height:100%;background:rgba(255,255,255,0.8);&[aria-hidden='true']{display:none;}"]);
-var RunboxBodyIframe = styled__default.default.iframe.withConfig({
+const RunboxBodyIframe = styled.iframe.withConfig({
   componentId: "sc-18a3wux-3"
 })(["width:100%;height:100%;border:none;"]);
-var RunboxStatusLight = styled__default.default.span.withConfig({
+const RunboxStatusLight = styled.span.withConfig({
   componentId: "sc-18a3wux-4"
-})(["display:block;width:0.5rem;height:0.5rem;border-radius:50%;background-color:", ";"], function (props) {
+})(["display:block;width:0.5rem;height:0.5rem;border-radius:50%;background-color:", ";"], props => {
   switch (props.status) {
     case MaterialRunboxLegacyContent.MaterialRunboxLegacyStatus.Loading:
     case MaterialRunboxLegacyContent.MaterialRunboxLegacyStatus.Connecting: