@elice/material-runbox 1.260825.0-runboxusability.0 → 1.260825.0-runboxusability.11

package/cjs/_virtual/_rollupPluginBabelHelpers.js

@@ -8,6 +8,9 @@ function _arrayLikeToArray(r, a) {
 function _arrayWithHoles(r) {
   if (Array.isArray(r)) return r;
 }
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
 function asyncGeneratorStep(n, t, e, r, o, a, c) {
   try {
     var i = n[a](c),
@@ -41,6 +44,9 @@ function _defineProperty(e, r, t) {
     writable: true
   }) : e[r] = t, e;
 }
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
 function _iterableToArrayLimit(r, l) {
   var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
   if (null != t) {
@@ -71,6 +77,9 @@ function _iterableToArrayLimit(r, l) {
 function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function _regenerator() {
   /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
   var e,
@@ -189,6 +198,9 @@ function _taggedTemplateLiteral(e, t) {
     }
   }));
 }
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
@@ -213,14 +225,18 @@ function _unsupportedIterableToArray(r, a) {
 
 exports.arrayLikeToArray = _arrayLikeToArray;
 exports.arrayWithHoles = _arrayWithHoles;
+exports.arrayWithoutHoles = _arrayWithoutHoles;
 exports.asyncToGenerator = _asyncToGenerator;
 exports.defineProperty = _defineProperty;
+exports.iterableToArray = _iterableToArray;
 exports.iterableToArrayLimit = _iterableToArrayLimit;
 exports.nonIterableRest = _nonIterableRest;
+exports.nonIterableSpread = _nonIterableSpread;
 exports.regenerator = _regenerator;
 exports.regeneratorDefine = _regeneratorDefine;
 exports.slicedToArray = _slicedToArray;
 exports.taggedTemplateLiteral = _taggedTemplateLiteral;
+exports.toConsumableArray = _toConsumableArray;
 exports.toPrimitive = _toPrimitive;
 exports.toPropertyKey = _toPropertyKey;
 exports.unsupportedIterableToArray = _unsupportedIterableToArray;

package/cjs/assets/runbox-loading.svg.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='130 90 240 312' width='240' height='312' role='img' aria-label='%eb%9f%b0%eb%b0%95%ec%8a%a4%ea%b0%80 %ec%a1%b0%eb%a6%bd%eb%90%98%eb%8a%94 %eb%a1%9c%eb%94%a9 %ec%95%a0%eb%8b%88%eb%a9%94%ec%9d%b4%ec%85%98'%3e%3cdefs xmlns='http://www.w3.org/2000/svg'%3e %3cfilter id='gb' x='-30%25' y='-30%25' width='160%25' height='160%25'%3e%3cfeGaussianBlur stdDeviation='7'/%3e%3c/filter%3e %3cfilter id='gr' x='-20%25' y='-20%25' width='140%25' height='140%25'%3e%3cfeGaussianBlur stdDeviation='0.6'/%3e%3c/filter%3e %3c/defs%3e%3crect xmlns='http://www.w3.org/2000/svg' x='130' y='90' width='240' height='312' fill='white'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='250.0%2c268.0 338.0%2c318.0 250.0%2c368.0 162.0%2c318.0' fill='rgba(115%2c83%2c234%2c.05)'/%3e%3cg class='dashed'%3e%3canimate attributeName='opacity' dur='5.68s' repeatCount='indefinite' calcMode='linear' keyTimes='0%3b0.58979%3b0.67782%3b0.9243%3b0.95951%3b1' values='1%3b1%3b0%3b0%3b1%3b1'/%3e%3cline xmlns='http://www.w3.org/2000/svg' x1='250.0' y1='268.0' x2='338.0' y2='318.0' stroke='%23C9BFF5' stroke-width='1.5' stroke-linecap='round' stroke-dasharray='7 6'/%3e%3cline xmlns='http://www.w3.org/2000/svg' x1='338.0' y1='318.0' x2='250.0' y2='368.0' stroke='%23C9BFF5' stroke-width='1.5' stroke-linecap='round' stroke-dasharray='7 6'/%3e%3cline xmlns='http://www.w3.org/2000/svg' x1='250.0' y1='368.0' x2='162.0' y2='318.0' stroke='%23C9BFF5' stroke-width='1.5' stroke-linecap='round' stroke-dasharray='7 6'/%3e%3cline xmlns='http://www.w3.org/2000/svg' x1='162.0' y1='318.0' x2='250.0' y2='268.0' stroke='%23C9BFF5' stroke-width='1.5' stroke-linecap='round' stroke-dasharray='7 6'/%3e%3cline xmlns='http://www.w3.org/2000/svg' x1='250.0' y1='172.0' x2='338.0' y2='222.0' stroke='%23C9BFF5' stroke-width='1.5' stroke-linecap='round' stroke-dasharray='7 6'/%3e%3cline xmlns='http://www.w3.org/2000/svg' x1='338.0' y1='222.0' x2='250.0' y2='272.0' stroke='%23C9BFF5' stroke-width='1.5' stroke-linecap='round' stroke-dasharray='7 6'/%3e%3cline xmlns='http://www.w3.org/2000/svg' x1='250.0' y1='272.0' x2='162.0' y2='222.0' stroke='%23C9BFF5' stroke-width='1.5' stroke-linecap='round' stroke-dasharray='7 6'/%3e%3cline xmlns='http://www.w3.org/2000/svg' x1='162.0' y1='222.0' x2='250.0' y2='172.0' stroke='%23C9BFF5' stroke-width='1.5' stroke-linecap='round' stroke-dasharray='7 6'/%3e%3cline xmlns='http://www.w3.org/2000/svg' x1='250.0' y1='268.0' x2='250.0' y2='172.0' stroke='%23C9BFF5' stroke-width='1.5' stroke-linecap='round' stroke-dasharray='7 6'/%3e%3cline xmlns='http://www.w3.org/2000/svg' x1='338.0' y1='318.0' x2='338.0' y2='222.0' stroke='%23C9BFF5' stroke-width='1.5' stroke-linecap='round' stroke-dasharray='7 6'/%3e%3cline xmlns='http://www.w3.org/2000/svg' x1='250.0' y1='368.0' x2='250.0' y2='272.0' stroke='%23C9BFF5' stroke-width='1.5' stroke-linecap='round' stroke-dasharray='7 6'/%3e%3cline xmlns='http://www.w3.org/2000/svg' x1='162.0' y1='318.0' x2='162.0' y2='222.0' stroke='%23C9BFF5' stroke-width='1.5' stroke-linecap='round' stroke-dasharray='7 6'/%3e%3c/g%3e%3cg class='solid'%3e%3canimate attributeName='opacity' dur='5.68s' repeatCount='indefinite' calcMode='linear' keyTimes='0%3b0.58979%3b0.67782%3b0.9243%3b0.95951%3b1' values='0%3b0%3b1%3b1%3b0%3b0'/%3e%3cline xmlns='http://www.w3.org/2000/svg' x1='250.0' y1='268.0' x2='338.0' y2='318.0' stroke='%237353EA' stroke-width='1.5' stroke-linecap='round'/%3e%3cline xmlns='http://www.w3.org/2000/svg' x1='338.0' y1='318.0' x2='250.0' y2='368.0' stroke='%237353EA' stroke-width='1.5' stroke-linecap='round'/%3e%3cline xmlns='http://www.w3.org/2000/svg' x1='250.0' y1='368.0' x2='162.0' y2='318.0' stroke='%237353EA' stroke-width='1.5' stroke-linecap='round'/%3e%3cline xmlns='http://www.w3.org/2000/svg' x1='162.0' y1='318.0' x2='250.0' y2='268.0' stroke='%237353EA' stroke-width='1.5' stroke-linecap='round'/%3e%3cline xmlns='http://www.w3.org/2000/svg' x1='250.0' y1='172.0' x2='338.0' y2='222.0' stroke='%237353EA' stroke-width='1.5' stroke-linecap='round'/%3e%3cline xmlns='http://www.w3.org/2000/svg' x1='338.0' y1='222.0' x2='250.0' y2='272.0' stroke='%237353EA' stroke-width='1.5' stroke-linecap='round'/%3e%3cline xmlns='http://www.w3.org/2000/svg' x1='250.0' y1='272.0' x2='162.0' y2='222.0' stroke='%237353EA' stroke-width='1.5' stroke-linecap='round'/%3e%3cline xmlns='http://www.w3.org/2000/svg' x1='162.0' y1='222.0' x2='250.0' y2='172.0' stroke='%237353EA' stroke-width='1.5' stroke-linecap='round'/%3e%3cline xmlns='http://www.w3.org/2000/svg' x1='250.0' y1='268.0' x2='250.0' y2='172.0' stroke='%237353EA' stroke-width='1.5' stroke-linecap='round'/%3e%3cline xmlns='http://www.w3.org/2000/svg' x1='338.0' y1='318.0' x2='338.0' y2='222.0' stroke='%237353EA' stroke-width='1.5' stroke-linecap='round'/%3e%3cline xmlns='http://www.w3.org/2000/svg' x1='250.0' y1='368.0' x2='250.0' y2='272.0' stroke='%237353EA' stroke-width='1.5' stroke-linecap='round'/%3e%3cline xmlns='http://www.w3.org/2000/svg' x1='162.0' y1='318.0' x2='162.0' y2='222.0' stroke='%237353EA' stroke-width='1.5' stroke-linecap='round'/%3e%3c/g%3e%3cg%3e%3cg class='pc' data-k='0'%3e%3canimateTransform attributeName='transform' type='translate' dur='5.68s' repeatCount='indefinite' calcMode='spline' keyTimes='0%3b0.01761%3b0.02641%3b0.09683%3b0.83627%3b0.9243%3b0.92606%3b1' values='0%2c-60%3b0%2c-60%3b0%2c-56%3b0%2c0%3b0%2c0%3b0%2c0%3b0%2c-60%3b0%2c-60' keySplines='0 0 1 1%3b0 0 1 1%3b.16 .84 .32 1%3b0 0 1 1%3b0 0 1 1%3b0 0 1 1%3b0 0 1 1'/%3e%3canimate attributeName='opacity' dur='5.68s' repeatCount='indefinite' calcMode='linear' keyTimes='0%3b0.01761%3b0.02641%3b0.83627%3b0.9243%3b0.92606%3b1' values='0%3b0%3b1%3b1%3b0%3b0%3b0'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='294.0%2c293.0 250.0%2c318.0 250.0%2c270.0 294.0%2c245.0' fill='%239B7BF0'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='206.0%2c293.0 250.0%2c318.0 250.0%2c270.0 206.0%2c245.0' fill='%237353EA'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='250.0%2c220.0 294.0%2c245.0 250.0%2c270.0 206.0%2c245.0' fill='%23C9BAF8'/%3e%3cg class='seam'%3e%3canimate attributeName='opacity' dur='5.68s' repeatCount='indefinite' calcMode='linear' keyTimes='0%3b0.58979%3b0.67782%3b0.9243%3b0.95951%3b1' values='1%3b1%3b0%3b0%3b1%3b1'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='294.0%2c293.0 250.0%2c318.0 250.0%2c270.0 294.0%2c245.0' fill='none' stroke='rgba(255%2c255%2c255%2c.75)' stroke-width='1'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='206.0%2c293.0 250.0%2c318.0 250.0%2c270.0 206.0%2c245.0' fill='none' stroke='rgba(255%2c255%2c255%2c.75)' stroke-width='1'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='250.0%2c220.0 294.0%2c245.0 250.0%2c270.0 206.0%2c245.0' fill='none' stroke='rgba(255%2c255%2c255%2c.75)' stroke-width='1'/%3e%3c/g%3e%3c/g%3e%3cg class='pc' data-k='4'%3e%3canimateTransform attributeName='transform' type='translate' dur='5.68s' repeatCount='indefinite' calcMode='spline' keyTimes='0%3b0.2993%3b0.3081%3b0.37852%3b0.83627%3b0.9243%3b0.92606%3b1' values='0%2c-60%3b0%2c-60%3b0%2c-56%3b0%2c0%3b0%2c0%3b0%2c0%3b0%2c-60%3b0%2c-60' keySplines='0 0 1 1%3b0 0 1 1%3b.16 .84 .32 1%3b0 0 1 1%3b0 0 1 1%3b0 0 1 1%3b0 0 1 1'/%3e%3canimate attributeName='opacity' dur='5.68s' repeatCount='indefinite' calcMode='linear' keyTimes='0%3b0.2993%3b0.3081%3b0.83627%3b0.9243%3b0.92606%3b1' values='0%3b0%3b1%3b1%3b0%3b0%3b0'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='294.0%2c245.0 250.0%2c270.0 250.0%2c222.0 294.0%2c197.0' fill='%239B7BF0'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='206.0%2c245.0 250.0%2c270.0 250.0%2c222.0 206.0%2c197.0' fill='%237353EA'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='250.0%2c172.0 294.0%2c197.0 250.0%2c222.0 206.0%2c197.0' fill='%23C9BAF8'/%3e%3cg class='seam'%3e%3canimate attributeName='opacity' dur='5.68s' repeatCount='indefinite' calcMode='linear' keyTimes='0%3b0.58979%3b0.67782%3b0.9243%3b0.95951%3b1' values='1%3b1%3b0%3b0%3b1%3b1'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='294.0%2c245.0 250.0%2c270.0 250.0%2c222.0 294.0%2c197.0' fill='none' stroke='rgba(255%2c255%2c255%2c.75)' stroke-width='1'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='206.0%2c245.0 250.0%2c270.0 250.0%2c222.0 206.0%2c197.0' fill='none' stroke='rgba(255%2c255%2c255%2c.75)' stroke-width='1'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='250.0%2c172.0 294.0%2c197.0 250.0%2c222.0 206.0%2c197.0' fill='none' stroke='rgba(255%2c255%2c255%2c.75)' stroke-width='1'/%3e%3c/g%3e%3c/g%3e%3cg class='pc' data-k='1'%3e%3canimateTransform attributeName='transform' type='translate' dur='5.68s' repeatCount='indefinite' calcMode='spline' keyTimes='0%3b0.08803%3b0.09683%3b0.16725%3b0.83627%3b0.9243%3b0.92606%3b1' values='0%2c-60%3b0%2c-60%3b0%2c-56%3b0%2c0%3b0%2c0%3b0%2c0%3b0%2c-60%3b0%2c-60' keySplines='0 0 1 1%3b0 0 1 1%3b.16 .84 .32 1%3b0 0 1 1%3b0 0 1 1%3b0 0 1 1%3b0 0 1 1'/%3e%3canimate attributeName='opacity' dur='5.68s' repeatCount='indefinite' calcMode='linear' keyTimes='0%3b0.08803%3b0.09683%3b0.83627%3b0.9243%3b0.92606%3b1' values='0%3b0%3b1%3b1%3b0%3b0%3b0'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='338.0%2c318.0 294.0%2c343.0 294.0%2c295.0 338.0%2c270.0' fill='%239B7BF0'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='250.0%2c318.0 294.0%2c343.0 294.0%2c295.0 250.0%2c270.0' fill='%237353EA'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='294.0%2c245.0 338.0%2c270.0 294.0%2c295.0 250.0%2c270.0' fill='%23C9BAF8'/%3e%3cg class='seam'%3e%3canimate attributeName='opacity' dur='5.68s' repeatCount='indefinite' calcMode='linear' keyTimes='0%3b0.58979%3b0.67782%3b0.9243%3b0.95951%3b1' values='1%3b1%3b0%3b0%3b1%3b1'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='338.0%2c318.0 294.0%2c343.0 294.0%2c295.0 338.0%2c270.0' fill='none' stroke='rgba(255%2c255%2c255%2c.75)' stroke-width='1'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='250.0%2c318.0 294.0%2c343.0 294.0%2c295.0 250.0%2c270.0' fill='none' stroke='rgba(255%2c255%2c255%2c.75)' stroke-width='1'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='294.0%2c245.0 338.0%2c270.0 294.0%2c295.0 250.0%2c270.0' fill='none' stroke='rgba(255%2c255%2c255%2c.75)' stroke-width='1'/%3e%3c/g%3e%3c/g%3e%3cg class='pc' data-k='2'%3e%3canimateTransform attributeName='transform' type='translate' dur='5.68s' repeatCount='indefinite' calcMode='spline' keyTimes='0%3b0.15845%3b0.16725%3b0.23767%3b0.83627%3b0.9243%3b0.92606%3b1' values='0%2c-60%3b0%2c-60%3b0%2c-56%3b0%2c0%3b0%2c0%3b0%2c0%3b0%2c-60%3b0%2c-60' keySplines='0 0 1 1%3b0 0 1 1%3b.16 .84 .32 1%3b0 0 1 1%3b0 0 1 1%3b0 0 1 1%3b0 0 1 1'/%3e%3canimate attributeName='opacity' dur='5.68s' repeatCount='indefinite' calcMode='linear' keyTimes='0%3b0.15845%3b0.16725%3b0.83627%3b0.9243%3b0.92606%3b1' values='0%3b0%3b1%3b1%3b0%3b0%3b0'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='250.0%2c318.0 206.0%2c343.0 206.0%2c295.0 250.0%2c270.0' fill='%239B7BF0'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='162.0%2c318.0 206.0%2c343.0 206.0%2c295.0 162.0%2c270.0' fill='%237353EA'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='206.0%2c245.0 250.0%2c270.0 206.0%2c295.0 162.0%2c270.0' fill='%23C9BAF8'/%3e%3cg class='seam'%3e%3canimate attributeName='opacity' dur='5.68s' repeatCount='indefinite' calcMode='linear' keyTimes='0%3b0.58979%3b0.67782%3b0.9243%3b0.95951%3b1' values='1%3b1%3b0%3b0%3b1%3b1'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='250.0%2c318.0 206.0%2c343.0 206.0%2c295.0 250.0%2c270.0' fill='none' stroke='rgba(255%2c255%2c255%2c.75)' stroke-width='1'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='162.0%2c318.0 206.0%2c343.0 206.0%2c295.0 162.0%2c270.0' fill='none' stroke='rgba(255%2c255%2c255%2c.75)' stroke-width='1'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='206.0%2c245.0 250.0%2c270.0 206.0%2c295.0 162.0%2c270.0' fill='none' stroke='rgba(255%2c255%2c255%2c.75)' stroke-width='1'/%3e%3c/g%3e%3c/g%3e%3cg class='pc' data-k='5'%3e%3canimateTransform attributeName='transform' type='translate' dur='5.68s' repeatCount='indefinite' calcMode='spline' keyTimes='0%3b0.36972%3b0.37852%3b0.44894%3b0.83627%3b0.9243%3b0.92606%3b1' values='0%2c-60%3b0%2c-60%3b0%2c-56%3b0%2c0%3b0%2c0%3b0%2c0%3b0%2c-60%3b0%2c-60' keySplines='0 0 1 1%3b0 0 1 1%3b.16 .84 .32 1%3b0 0 1 1%3b0 0 1 1%3b0 0 1 1%3b0 0 1 1'/%3e%3canimate attributeName='opacity' dur='5.68s' repeatCount='indefinite' calcMode='linear' keyTimes='0%3b0.36972%3b0.37852%3b0.83627%3b0.9243%3b0.92606%3b1' values='0%3b0%3b1%3b1%3b0%3b0%3b0'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='338.0%2c270.0 294.0%2c295.0 294.0%2c247.0 338.0%2c222.0' fill='%239B7BF0'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='250.0%2c270.0 294.0%2c295.0 294.0%2c247.0 250.0%2c222.0' fill='%237353EA'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='294.0%2c197.0 338.0%2c222.0 294.0%2c247.0 250.0%2c222.0' fill='%23C9BAF8'/%3e%3cg class='seam'%3e%3canimate attributeName='opacity' dur='5.68s' repeatCount='indefinite' calcMode='linear' keyTimes='0%3b0.58979%3b0.67782%3b0.9243%3b0.95951%3b1' values='1%3b1%3b0%3b0%3b1%3b1'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='338.0%2c270.0 294.0%2c295.0 294.0%2c247.0 338.0%2c222.0' fill='none' stroke='rgba(255%2c255%2c255%2c.75)' stroke-width='1'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='250.0%2c270.0 294.0%2c295.0 294.0%2c247.0 250.0%2c222.0' fill='none' stroke='rgba(255%2c255%2c255%2c.75)' stroke-width='1'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='294.0%2c197.0 338.0%2c222.0 294.0%2c247.0 250.0%2c222.0' fill='none' stroke='rgba(255%2c255%2c255%2c.75)' stroke-width='1'/%3e%3c/g%3e%3c/g%3e%3cg class='pc' data-k='6'%3e%3canimateTransform attributeName='transform' type='translate' dur='5.68s' repeatCount='indefinite' calcMode='spline' keyTimes='0%3b0.44014%3b0.44894%3b0.51936%3b0.83627%3b0.9243%3b0.92606%3b1' values='0%2c-60%3b0%2c-60%3b0%2c-56%3b0%2c0%3b0%2c0%3b0%2c0%3b0%2c-60%3b0%2c-60' keySplines='0 0 1 1%3b0 0 1 1%3b.16 .84 .32 1%3b0 0 1 1%3b0 0 1 1%3b0 0 1 1%3b0 0 1 1'/%3e%3canimate attributeName='opacity' dur='5.68s' repeatCount='indefinite' calcMode='linear' keyTimes='0%3b0.44014%3b0.44894%3b0.83627%3b0.9243%3b0.92606%3b1' values='0%3b0%3b1%3b1%3b0%3b0%3b0'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='250.0%2c270.0 206.0%2c295.0 206.0%2c247.0 250.0%2c222.0' fill='%239B7BF0'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='162.0%2c270.0 206.0%2c295.0 206.0%2c247.0 162.0%2c222.0' fill='%237353EA'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='206.0%2c197.0 250.0%2c222.0 206.0%2c247.0 162.0%2c222.0' fill='%23C9BAF8'/%3e%3cg class='seam'%3e%3canimate attributeName='opacity' dur='5.68s' repeatCount='indefinite' calcMode='linear' keyTimes='0%3b0.58979%3b0.67782%3b0.9243%3b0.95951%3b1' values='1%3b1%3b0%3b0%3b1%3b1'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='250.0%2c270.0 206.0%2c295.0 206.0%2c247.0 250.0%2c222.0' fill='none' stroke='rgba(255%2c255%2c255%2c.75)' stroke-width='1'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='162.0%2c270.0 206.0%2c295.0 206.0%2c247.0 162.0%2c222.0' fill='none' stroke='rgba(255%2c255%2c255%2c.75)' stroke-width='1'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='206.0%2c197.0 250.0%2c222.0 206.0%2c247.0 162.0%2c222.0' fill='none' stroke='rgba(255%2c255%2c255%2c.75)' stroke-width='1'/%3e%3c/g%3e%3c/g%3e%3cg class='pc' data-k='3'%3e%3canimateTransform attributeName='transform' type='translate' dur='5.68s' repeatCount='indefinite' calcMode='spline' keyTimes='0%3b0.22887%3b0.23767%3b0.30809%3b0.83627%3b0.9243%3b0.92606%3b1' values='0%2c-60%3b0%2c-60%3b0%2c-56%3b0%2c0%3b0%2c0%3b0%2c0%3b0%2c-60%3b0%2c-60' keySplines='0 0 1 1%3b0 0 1 1%3b.16 .84 .32 1%3b0 0 1 1%3b0 0 1 1%3b0 0 1 1%3b0 0 1 1'/%3e%3canimate attributeName='opacity' dur='5.68s' repeatCount='indefinite' calcMode='linear' keyTimes='0%3b0.22887%3b0.23767%3b0.83627%3b0.9243%3b0.92606%3b1' values='0%3b0%3b1%3b1%3b0%3b0%3b0'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='294.0%2c343.0 250.0%2c368.0 250.0%2c320.0 294.0%2c295.0' fill='%239B7BF0'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='206.0%2c343.0 250.0%2c368.0 250.0%2c320.0 206.0%2c295.0' fill='%237353EA'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='250.0%2c270.0 294.0%2c295.0 250.0%2c320.0 206.0%2c295.0' fill='%23C9BAF8'/%3e%3cg class='seam'%3e%3canimate attributeName='opacity' dur='5.68s' repeatCount='indefinite' calcMode='linear' keyTimes='0%3b0.58979%3b0.67782%3b0.9243%3b0.95951%3b1' values='1%3b1%3b0%3b0%3b1%3b1'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='294.0%2c343.0 250.0%2c368.0 250.0%2c320.0 294.0%2c295.0' fill='none' stroke='rgba(255%2c255%2c255%2c.75)' stroke-width='1'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='206.0%2c343.0 250.0%2c368.0 250.0%2c320.0 206.0%2c295.0' fill='none' stroke='rgba(255%2c255%2c255%2c.75)' stroke-width='1'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='250.0%2c270.0 294.0%2c295.0 250.0%2c320.0 206.0%2c295.0' fill='none' stroke='rgba(255%2c255%2c255%2c.75)' stroke-width='1'/%3e%3c/g%3e%3c/g%3e%3cg class='pc' data-k='7'%3e%3canimateTransform attributeName='transform' type='translate' dur='5.68s' repeatCount='indefinite' calcMode='spline' keyTimes='0%3b0.51056%3b0.51936%3b0.58978%3b0.83627%3b0.9243%3b0.92606%3b1' values='0%2c-60%3b0%2c-60%3b0%2c-56%3b0%2c0%3b0%2c0%3b0%2c0%3b0%2c-60%3b0%2c-60' keySplines='0 0 1 1%3b0 0 1 1%3b.16 .84 .32 1%3b0 0 1 1%3b0 0 1 1%3b0 0 1 1%3b0 0 1 1'/%3e%3canimate attributeName='opacity' dur='5.68s' repeatCount='indefinite' calcMode='linear' keyTimes='0%3b0.51056%3b0.51936%3b0.83627%3b0.9243%3b0.92606%3b1' values='0%3b0%3b1%3b1%3b0%3b0%3b0'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='294.0%2c295.0 250.0%2c320.0 250.0%2c272.0 294.0%2c247.0' fill='%239B7BF0'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='206.0%2c295.0 250.0%2c320.0 250.0%2c272.0 206.0%2c247.0' fill='%237353EA'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='250.0%2c222.0 294.0%2c247.0 250.0%2c272.0 206.0%2c247.0' fill='%23C9BAF8'/%3e%3cg class='seam'%3e%3canimate attributeName='opacity' dur='5.68s' repeatCount='indefinite' calcMode='linear' keyTimes='0%3b0.58979%3b0.67782%3b0.9243%3b0.95951%3b1' values='1%3b1%3b0%3b0%3b1%3b1'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='294.0%2c295.0 250.0%2c320.0 250.0%2c272.0 294.0%2c247.0' fill='none' stroke='rgba(255%2c255%2c255%2c.75)' stroke-width='1'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='206.0%2c295.0 250.0%2c320.0 250.0%2c272.0 206.0%2c247.0' fill='none' stroke='rgba(255%2c255%2c255%2c.75)' stroke-width='1'/%3e%3cpolygon xmlns='http://www.w3.org/2000/svg' points='250.0%2c222.0 294.0%2c247.0 250.0%2c272.0 206.0%2c247.0' fill='none' stroke='rgba(255%2c255%2c255%2c.75)' stroke-width='1'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cg class='glow'%3e%3canimate attributeName='opacity' dur='5.68s' repeatCount='indefinite' calcMode='linear' keyTimes='0%3b0.58979%3b0.61092%3b0.69542%3b1' values='0%3b0%3b1%3b0%3b0'/%3e%3cg transform='translate(250 222)'%3e%3cg%3e%3canimateTransform attributeName='transform' type='scale' dur='5.68s' repeatCount='indefinite' calcMode='linear' keyTimes='0%3b0.58979%3b0.61092%3b0.69542%3b1' values='0.985%3b0.985%3b1.005%3b1.055%3b1.055'/%3e%3cg transform='translate(-250 -222)'%3e%3cg xmlns='http://www.w3.org/2000/svg' transform='translate(-250 -222)'%3e%3cline x1='250.0' y1='268.0' x2='338.0' y2='318.0' stroke='rgba(115%2c83%2c234%2c.34)' stroke-width='11' stroke-linecap='round' filter='url(%23gb)'/%3e%3cline x1='338.0' y1='318.0' x2='250.0' y2='368.0' stroke='rgba(115%2c83%2c234%2c.34)' stroke-width='11' stroke-linecap='round' filter='url(%23gb)'/%3e%3cline x1='250.0' y1='368.0' x2='162.0' y2='318.0' stroke='rgba(115%2c83%2c234%2c.34)' stroke-width='11' stroke-linecap='round' filter='url(%23gb)'/%3e%3cline x1='162.0' y1='318.0' x2='250.0' y2='268.0' stroke='rgba(115%2c83%2c234%2c.34)' stroke-width='11' stroke-linecap='round' filter='url(%23gb)'/%3e%3cline x1='250.0' y1='172.0' x2='338.0' y2='222.0' stroke='rgba(115%2c83%2c234%2c.34)' stroke-width='11' stroke-linecap='round' filter='url(%23gb)'/%3e%3cline x1='338.0' y1='222.0' x2='250.0' y2='272.0' stroke='rgba(115%2c83%2c234%2c.34)' stroke-width='11' stroke-linecap='round' filter='url(%23gb)'/%3e%3cline x1='250.0' y1='272.0' x2='162.0' y2='222.0' stroke='rgba(115%2c83%2c234%2c.34)' stroke-width='11' stroke-linecap='round' filter='url(%23gb)'/%3e%3cline x1='162.0' y1='222.0' x2='250.0' y2='172.0' stroke='rgba(115%2c83%2c234%2c.34)' stroke-width='11' stroke-linecap='round' filter='url(%23gb)'/%3e%3cline x1='250.0' y1='268.0' x2='250.0' y2='172.0' stroke='rgba(115%2c83%2c234%2c.34)' stroke-width='11' stroke-linecap='round' filter='url(%23gb)'/%3e%3cline x1='338.0' y1='318.0' x2='338.0' y2='222.0' stroke='rgba(115%2c83%2c234%2c.34)' stroke-width='11' stroke-linecap='round' filter='url(%23gb)'/%3e%3cline x1='250.0' y1='368.0' x2='250.0' y2='272.0' stroke='rgba(115%2c83%2c234%2c.34)' stroke-width='11' stroke-linecap='round' filter='url(%23gb)'/%3e%3cline x1='162.0' y1='318.0' x2='162.0' y2='222.0' stroke='rgba(115%2c83%2c234%2c.34)' stroke-width='11' stroke-linecap='round' filter='url(%23gb)'/%3e%3cline x1='250.0' y1='268.0' x2='338.0' y2='318.0' stroke='rgba(196%2c181%2c253%2c.7)' stroke-width='2' stroke-linecap='round' filter='url(%23gr)'/%3e%3cline x1='338.0' y1='318.0' x2='250.0' y2='368.0' stroke='rgba(196%2c181%2c253%2c.7)' stroke-width='2' stroke-linecap='round' filter='url(%23gr)'/%3e%3cline x1='250.0' y1='368.0' x2='162.0' y2='318.0' stroke='rgba(196%2c181%2c253%2c.7)' stroke-width='2' stroke-linecap='round' filter='url(%23gr)'/%3e%3cline x1='162.0' y1='318.0' x2='250.0' y2='268.0' stroke='rgba(196%2c181%2c253%2c.7)' stroke-width='2' stroke-linecap='round' filter='url(%23gr)'/%3e%3cline x1='250.0' y1='172.0' x2='338.0' y2='222.0' stroke='rgba(196%2c181%2c253%2c.7)' stroke-width='2' stroke-linecap='round' filter='url(%23gr)'/%3e%3cline x1='338.0' y1='222.0' x2='250.0' y2='272.0' stroke='rgba(196%2c181%2c253%2c.7)' stroke-width='2' stroke-linecap='round' filter='url(%23gr)'/%3e%3cline x1='250.0' y1='272.0' x2='162.0' y2='222.0' stroke='rgba(196%2c181%2c253%2c.7)' stroke-width='2' stroke-linecap='round' filter='url(%23gr)'/%3e%3cline x1='162.0' y1='222.0' x2='250.0' y2='172.0' stroke='rgba(196%2c181%2c253%2c.7)' stroke-width='2' stroke-linecap='round' filter='url(%23gr)'/%3e%3cline x1='250.0' y1='268.0' x2='250.0' y2='172.0' stroke='rgba(196%2c181%2c253%2c.7)' stroke-width='2' stroke-linecap='round' filter='url(%23gr)'/%3e%3cline x1='338.0' y1='318.0' x2='338.0' y2='222.0' stroke='rgba(196%2c181%2c253%2c.7)' stroke-width='2' stroke-linecap='round' filter='url(%23gr)'/%3e%3cline x1='250.0' y1='368.0' x2='250.0' y2='272.0' stroke='rgba(196%2c181%2c253%2c.7)' stroke-width='2' stroke-linecap='round' filter='url(%23gr)'/%3e%3cline x1='162.0' y1='318.0' x2='162.0' y2='222.0' stroke='rgba(196%2c181%2c253%2c.7)' stroke-width='2' stroke-linecap='round' filter='url(%23gr)'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+
+exports.default = img;

package/cjs/components/material-runbox/MaterialRunbox.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var intl = require('@elice/intl');
+var material = require('@mui/material');
 var MaterialRunboxContent = require('./MaterialRunboxContent.js');
+var theme = require('./theme.js');
 var en = require('./locales/en.json.js');
 var ko = require('./locales/ko.json.js');
 var MaterialRunboxContext = require('./contexts/MaterialRunboxContext.js');
@@ -28,16 +30,19 @@ var MaterialRunbox = function MaterialRunbox(_a) {
     eliceMaterialRunboxApiConfiguration = _a.eliceMaterialRunboxApiConfiguration,
     __intl = _a.__intl,
     contentProps = tslib.__rest(_a, ["enableAutoShutdownToggle", "enableUrlShare", "locale", "showMessenger", "eliceMaterialRunboxApiConfiguration", "__intl"]);
-  return jsxRuntime.jsx(intl.RawEliceIntlProvider, {
-    value: __intl,
-    children: jsxRuntime.jsx(MaterialRunboxContext.default, {
-      enableAutoShutdownToggle: enableAutoShutdownToggle,
-      enableUrlShare: enableUrlShare,
-      locale: locale,
-      showMessenger: showMessenger,
-      children: jsxRuntime.jsx(MaterialRunboxApiContext.default, {
-        eliceMaterialRunboxApiConfiguration: eliceMaterialRunboxApiConfiguration,
-        children: jsxRuntime.jsx(MaterialRunboxContent.default, Object.assign({}, contentProps))
+  return jsxRuntime.jsx(material.ThemeProvider, {
+    theme: theme.runboxDarkTheme,
+    children: jsxRuntime.jsx(intl.RawEliceIntlProvider, {
+      value: __intl,
+      children: jsxRuntime.jsx(MaterialRunboxContext.default, {
+        enableAutoShutdownToggle: enableAutoShutdownToggle,
+        enableUrlShare: enableUrlShare,
+        locale: locale,
+        showMessenger: showMessenger,
+        children: jsxRuntime.jsx(MaterialRunboxApiContext.default, {
+          eliceMaterialRunboxApiConfiguration: eliceMaterialRunboxApiConfiguration,
+          children: jsxRuntime.jsx(MaterialRunboxContent.default, Object.assign({}, contentProps))
+        })
       })
     })
   });

package/cjs/components/material-runbox/MaterialRunboxContent.js

@@ -16,9 +16,13 @@ var MaterialAdminRunboxConfirmDialog = require('./MaterialAdminRunboxConfirmDial
 var MaterialRunboxAlert = require('./MaterialRunboxAlert.js');
 var MaterialRunboxBody = require('./MaterialRunboxBody.js');
 var MaterialRunboxHeader = require('./MaterialRunboxHeader.js');
+var theme = require('./theme.js');
 var MaterialRunboxContext = require('./contexts/MaterialRunboxContext.js');
 var MaterialRunboxApiContext = require('./contexts/MaterialRunboxApiContext.js');
 var MaterialRunboxCommandContext = require('./contexts/MaterialRunboxCommandContext.js');
+var MaterialRunboxControlContext = require('./contexts/MaterialRunboxControlContext.js');
+var MaterialRunboxDiskUsageAlert = require('./disk/MaterialRunboxDiskUsageAlert.js');
+var MaterialRunboxDiskUsageDialog = require('./disk/MaterialRunboxDiskUsageDialog.js');
 var useMaterialRunboxRunboxIdStarterGet = require('./hooks/useMaterialRunboxRunboxIdStarterGet.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -157,66 +161,81 @@ var MaterialRunboxContent = function MaterialRunboxContent(_ref) {
   //
   //
   if (isInitialLoading || starterEnabled && isLoading) {
-    return jsxRuntime.jsx(StyledRunboxContainer, {
-      children: jsxRuntime.jsx(material.CircularProgress, {})
+    return jsxRuntime.jsx(material.ThemeProvider, {
+      theme: theme.runboxLightTheme,
+      children: jsxRuntime.jsx(StyledRunboxContainer, {
+        sx: {
+          backgroundColor: 'background.paper'
+        },
+        children: jsxRuntime.jsx(material.CircularProgress, {})
+      })
     });
   }
   if (isError) {
-    return jsxRuntime.jsx(StyledRunboxContainer, {
-      children: jsxRuntime.jsxs(material.Stack, {
-        gap: "1.5rem",
-        children: [jsxRuntime.jsx(material.Typography, {
-          variant: "h6",
-          children: intl$1.formatMessage({
-            id: 'runbox.runtime.message.startError'
-          })
-        }), jsxRuntime.jsxs(material.Stack, {
-          gap: "0.5rem",
-          children: [jsxRuntime.jsx(material.Button, {
-            startIcon: jsxRuntime.jsx(iconsMaterial.Refresh, {}),
-            onClick: function onClick() {
-              return refetch();
-            },
-            children: intl$1.formatMessage({
-              id: 'runbox.common.retry'
-            })
-          }), typeof showMessenger === 'function' ? jsxRuntime.jsx(material.Button, {
-            variant: "outlined",
-            onClick: function onClick() {
-              return showMessenger();
-            },
+    return jsxRuntime.jsx(material.ThemeProvider, {
+      theme: theme.runboxLightTheme,
+      children: jsxRuntime.jsx(StyledRunboxContainer, {
+        sx: {
+          backgroundColor: 'background.paper',
+          color: 'text.primary'
+        },
+        children: jsxRuntime.jsxs(material.Stack, {
+          gap: "1.5rem",
+          children: [jsxRuntime.jsx(material.Typography, {
+            variant: "h6",
             children: intl$1.formatMessage({
-              id: 'runbox.common.support'
+              id: 'runbox.runtime.message.startError'
             })
-          }) : null]
-        })]
+          }), jsxRuntime.jsxs(material.Stack, {
+            gap: "0.5rem",
+            children: [jsxRuntime.jsx(material.Button, {
+              startIcon: jsxRuntime.jsx(iconsMaterial.Refresh, {}),
+              onClick: function onClick() {
+                return refetch();
+              },
+              children: intl$1.formatMessage({
+                id: 'runbox.common.retry'
+              })
+            }), typeof showMessenger === 'function' ? jsxRuntime.jsx(material.Button, {
+              variant: "outlined",
+              onClick: function onClick() {
+                return showMessenger();
+              },
+              children: intl$1.formatMessage({
+                id: 'runbox.common.support'
+              })
+            }) : null]
+          })]
+        })
       })
     });
   }
   if (!enabledLxpPlan) {
-    return jsxRuntime.jsx(StyledRunboxContainer, {
-      sx: {
-        backgroundColor: function backgroundColor(theme) {
-          return theme.palette.background.paper;
-        }
-      },
-      children: jsxRuntime.jsxs(material.Stack, {
-        gap: "0.5rem",
-        textAlign: "center",
-        children: [jsxRuntime.jsx(material.Typography, {
-          variant: "h6",
-          color: "text.secondary",
-          children: intl$1.formatMessage({
-            id: 'runbox.runtime.message.runbox_unavailable'
-          })
-        }), jsxRuntime.jsx(material.Typography, {
-          variant: "body1",
-          whiteSpace: "pre-line",
-          color: "text.tertiary",
-          children: intl$1.formatMessage({
-            id: 'runbox.runtime.message.lxp_plan_required'
-          })
-        })]
+    return jsxRuntime.jsx(material.ThemeProvider, {
+      theme: theme.runboxLightTheme,
+      children: jsxRuntime.jsx(StyledRunboxContainer, {
+        sx: {
+          backgroundColor: 'background.paper',
+          color: 'text.primary'
+        },
+        children: jsxRuntime.jsxs(material.Stack, {
+          gap: "0.5rem",
+          textAlign: "center",
+          children: [jsxRuntime.jsx(material.Typography, {
+            variant: "h6",
+            color: "text.secondary",
+            children: intl$1.formatMessage({
+              id: 'runbox.runtime.message.runbox_unavailable'
+            })
+          }), jsxRuntime.jsx(material.Typography, {
+            variant: "body1",
+            whiteSpace: "pre-line",
+            color: "text.tertiary",
+            children: intl$1.formatMessage({
+              id: 'runbox.runtime.message.lxp_plan_required'
+            })
+          })]
+        })
       })
     });
   }
@@ -275,22 +294,30 @@ var MaterialRunboxContent = function MaterialRunboxContent(_ref) {
       },
       onRunboxRefetchRequest: refetch,
       children: jsxRuntime.jsx(StyledRunboxContainer, {
-        children: jsxRuntime.jsxs(muiXSnackbar.SnackbarProvider, {
+        children: jsxRuntime.jsx(muiXSnackbar.SnackbarProvider, {
           domRoot: snackbarRoot !== null && snackbarRoot !== void 0 ? snackbarRoot : document.body,
           classes: {
             containerRoot: SNACKBAR_CONTAINER_CLASS
           },
-          children: [jsxRuntime.jsx(MaterialRunboxHeader.default, Object.assign({}, props, {
-            hideTimerPopover: hideTimerPopover
-          })), jsxRuntime.jsx(MaterialRunboxAlert.default, {
-            runbox: runbox,
-            courseId: courseId,
-            studentUserId: studentUserId,
-            userId: userId,
-            isTutoring: isTutoring
-          }), jsxRuntime.jsx(MaterialRunboxBody.default, Object.assign({
-            setSnackbarRoot: setSnackbarRoot
-          }, props))]
+          children: jsxRuntime.jsxs(MaterialRunboxControlContext.default, Object.assign({}, props, {
+            children: [jsxRuntime.jsx(MaterialRunboxHeader.default, Object.assign({}, props, {
+              hideTimerPopover: hideTimerPopover
+            })), jsxRuntime.jsx(MaterialRunboxAlert.default, {
+              runbox: runbox,
+              courseId: courseId,
+              studentUserId: studentUserId,
+              userId: userId,
+              isTutoring: isTutoring
+            }), jsxRuntime.jsx(MaterialRunboxDiskUsageAlert.default, {
+              runtimeTemplateId: runtimeTemplate.id,
+              courseId: courseId,
+              userId: studentUserId
+            }), jsxRuntime.jsx(MaterialRunboxDiskUsageDialog.default, {
+              runboxId: runbox.id
+            }), jsxRuntime.jsx(MaterialRunboxBody.default, Object.assign({
+              setSnackbarRoot: setSnackbarRoot
+            }, props))]
+          }))
         })
       })
     })

package/cjs/components/material-runbox/MaterialRunboxHeader.js

@@ -22,8 +22,7 @@ var MaterialRunboxContext = require('./contexts/MaterialRunboxContext.js');
 var MaterialRunboxApiContext = require('./contexts/MaterialRunboxApiContext.js');
 var MaterialRunboxTimer = require('./timer/MaterialRunboxTimer.js');
 var MaterialRunboxStatusButton = require('./status/MaterialRunboxStatusButton.js');
-var MaterialRunboxDiskAlmostFullSnackbar = require('./disk/MaterialRunboxDiskAlmostFullSnackbar.js');
-var useRunboxControl = require('./hooks/useRunboxControl.js');
+var useBreakpoint = require('../shared/hooks/useBreakpoint.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -35,25 +34,28 @@ var StyledHeader = /*#__PURE__*/_styled__default.default("div", {
 })("position:relative;flex:0 0 3rem;display:flex;justify-content:flex-start;align-items:center;gap:1rem;padding:0 1rem;width:100%;border-bottom:1px solid ", function (_ref) {
   var theme = _ref.theme;
   return theme.palette.divider;
-}, ";overflow:hidden;background-color:", function (_ref2) {
+}, ";overflow:hidden;color:", function (_ref2) {
   var theme = _ref2.theme;
+  return theme.palette.text.primary;
+}, ";background-color:", function (_ref3) {
+  var theme = _ref3.theme;
   return theme.palette.background.paper;
 }, ";");
 //
 //
 //
-var MaterialRunboxHeader = function MaterialRunboxHeader(_ref3) {
-  var runbox = _ref3.runbox,
-    runtime = _ref3.runtime,
-    runtimeTemplate = _ref3.runtimeTemplate,
-    courseId = _ref3.courseId,
-    userId = _ref3.userId,
-    studentUserId = _ref3.studentUserId,
-    isTutoring = _ref3.isTutoring,
-    refetch = _ref3.refetch,
-    getAchievementColor = _ref3.getAchievementColor,
-    _ref3$hideTimerPopove = _ref3.hideTimerPopover,
-    hideTimerPopover = _ref3$hideTimerPopove === void 0 ? false : _ref3$hideTimerPopove;
+var MaterialRunboxHeader = function MaterialRunboxHeader(_ref4) {
+  var runbox = _ref4.runbox,
+    runtime = _ref4.runtime,
+    runtimeTemplate = _ref4.runtimeTemplate,
+    courseId = _ref4.courseId,
+    userId = _ref4.userId,
+    studentUserId = _ref4.studentUserId,
+    isTutoring = _ref4.isTutoring,
+    refetch = _ref4.refetch,
+    getAchievementColor = _ref4.getAchievementColor,
+    _ref4$hideTimerPopove = _ref4.hideTimerPopover,
+    hideTimerPopover = _ref4$hideTimerPopove === void 0 ? false : _ref4$hideTimerPopove;
   var intl$1 = intl.useRawEliceIntl();
   var _useMaterialRunboxCon = MaterialRunboxContext.useMaterialRunboxContext(),
     enableAutoShutdownToggle = _useMaterialRunboxCon.enableAutoShutdownToggle;
@@ -64,19 +66,10 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref3) {
     _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
     menuAnchorEl = _React$useState2[0],
     setMenuAnchorEl = _React$useState2[1];
+  var isSmallTabletOrSmaller = useBreakpoint.useBreakpoint('md', 'down');
   var _useEliceRunboxRunnin = runboxClient.useEliceRunboxRunning(),
     status = _useEliceRunboxRunnin.status;
   var isRunboxRunning = status === 'running';
-  var _useRunboxControl = useRunboxControl.useRunboxControl({
-      runbox: runbox,
-      runtime: runtime,
-      courseId: courseId,
-      refetch: refetch,
-      userId: userId,
-      studentUserId: studentUserId,
-      isTutoring: isTutoring
-    }),
-    stopRuntime = _useRunboxControl.stop;
   //
   var _useQuery = reactQuery.useQuery({
       queryKey: ['getGlobalOrganizationGet', orgNameShort],
@@ -104,8 +97,8 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref3) {
         courseId: courseId,
         runtime: runtime
       }],
-      queryFn: function queryFn(_ref4) {
-        var signal = _ref4.signal;
+      queryFn: function queryFn(_ref5) {
+        var signal = _ref5.signal;
         return materialRunboxApi.runbox.runboxRunboxIdSubmitInfoGet({
           eliceCourseId: courseId,
           runboxId: runtime === null || runtime === void 0 ? void 0 : runtime.runboxId
@@ -163,12 +156,29 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref3) {
       courseId: courseId
     });
   };
+  /**
+   *
+   */
+  var handleMenuButtonClick = function handleMenuButtonClick(e) {
+    if (menuAnchorEl) {
+      setMenuAnchorEl(null);
+    } else {
+      setMenuAnchorEl(e.currentTarget);
+    }
+  };
   /**
    *
    */
   var renderOptionMenu = function renderOptionMenu() {
     return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [jsxRuntime.jsx(material.Button, {
+      children: [isSmallTabletOrSmaller ? jsxRuntime.jsx(material.IconButton, {
+        size: "small",
+        disabled: !isRunboxRunning,
+        onClick: handleMenuButtonClick,
+        children: jsxRuntime.jsx(muiElements.EliceIcon, {
+          icon: proSolidSvgIcons.faEllipsisVertical
+        })
+      }) : jsxRuntime.jsx(material.Button, {
         disabled: !isRunboxRunning,
         startIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
           icon: proSolidSvgIcons.faEllipsisVertical
@@ -178,13 +188,7 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref3) {
         sx: {
           color: 'text.primary'
         },
-        onClick: function onClick(e) {
-          if (menuAnchorEl) {
-            setMenuAnchorEl(null);
-          } else {
-            setMenuAnchorEl(e.currentTarget);
-          }
-        },
+        onClick: handleMenuButtonClick,
         children: intl$1.formatMessage({
           id: 'runbox.action.menu.title'
         })
@@ -210,9 +214,7 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref3) {
     if (isTutoring) {
       return null;
     }
-    return jsxRuntime.jsx(MaterialRunboxActionDisconnect.default, {
-      stopRuntime: stopRuntime
-    });
+    return jsxRuntime.jsx(MaterialRunboxActionDisconnect.default, {});
   };
   //
   //
@@ -223,11 +225,12 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref3) {
       runboxId: runbox.id,
       userId: userId,
       headerElement: headerRef.current,
-      stopRuntime: stopRuntime,
       hideTimerPopover: hideTimerPopover,
       isTutoring: isTutoring
-    }) : null, jsxRuntime.jsx(MaterialRunboxStatusButton.default, {}), jsxRuntime.jsx(MaterialRunboxDiskAlmostFullSnackbar.default, {
-      runboxId: runbox.id
+    }) : null, jsxRuntime.jsx(MaterialRunboxStatusButton.default, {
+      runtimeTemplateId: runtimeTemplate.id,
+      courseId: courseId,
+      userId: studentUserId
     }), jsxRuntime.jsxs(material.Stack, {
       direction: "row",
       alignItems: "center",

package/cjs/components/material-runbox/actions/MaterialRunboxActionDisconnect.d.ts

@@ -1,6 +1,3 @@
 import React from 'react';
-interface MaterialRunboxActionDisconnectProps {
-    stopRuntime: () => Promise<void>;
-}
-declare const MaterialRunboxActionDisconnect: React.FC<MaterialRunboxActionDisconnectProps>;
+declare const MaterialRunboxActionDisconnect: React.FC;
 export default MaterialRunboxActionDisconnect;

package/cjs/components/material-runbox/actions/MaterialRunboxActionDisconnect.js

@@ -6,9 +6,13 @@ var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHel
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var intl = require('@elice/intl');
+var muiElements = require('@elice/mui-elements');
 var runboxClient = require('@elice/runbox-client');
+var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
 var material = require('@mui/material');
 var MaterialRunboxActionDisconnectDialog = require('./MaterialRunboxActionDisconnectDialog.js');
+var useBreakpoint = require('../../shared/hooks/useBreakpoint.js');
+var MaterialRunboxControlContext = require('../contexts/MaterialRunboxControlContext.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -17,12 +21,15 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 //
 //
 //
-var MaterialRunboxActionDisconnect = function MaterialRunboxActionDisconnect(_ref) {
-  var stopRuntime = _ref.stopRuntime;
+var MaterialRunboxActionDisconnect = function MaterialRunboxActionDisconnect() {
   var intl$1 = intl.useRawEliceIntl();
+  var isSmallTabletOrSmaller = useBreakpoint.useBreakpoint('md', 'down');
+  var isMobileOrSmaller = useBreakpoint.useBreakpoint('sm', 'down');
   var _useEliceRunboxRunnin = runboxClient.useEliceRunboxRunning(),
     status = _useEliceRunboxRunnin.status;
   var isRunboxTerminated = status === 'terminated';
+  var _useMaterialRunboxCon = MaterialRunboxControlContext.useMaterialRunboxControlContext(),
+    stopRuntime = _useMaterialRunboxCon.stop;
   var _React$useState = React__default.default.useState(false),
     _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
     isDisconnectDialogOpen = _React$useState2[0],
@@ -44,6 +51,23 @@ var MaterialRunboxActionDisconnect = function MaterialRunboxActionDisconnect(_re
    *
    */
   var renderActionButton = function renderActionButton() {
+    if (isSmallTabletOrSmaller) {
+      return jsxRuntime.jsx(material.Tooltip, {
+        title: intl$1.formatMessage({
+          id: 'runbox.action.disconnect.title'
+        }),
+        children: jsxRuntime.jsx("span", {
+          children: jsxRuntime.jsx(material.IconButton, {
+            size: "small",
+            disabled: isRunboxTerminated,
+            onClick: handleClickAction,
+            children: jsxRuntime.jsx(muiElements.EliceIcon, {
+              icon: proSolidSvgIcons.faLinkSlash
+            })
+          })
+        })
+      });
+    }
     return jsxRuntime.jsx(material.Button, {
       disabled: isRunboxTerminated,
       variant: "contained",
@@ -73,6 +97,9 @@ var MaterialRunboxActionDisconnect = function MaterialRunboxActionDisconnect(_re
   //
   //
   //
+  if (isMobileOrSmaller) {
+    return null;
+  }
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [renderActionButton(), renderDisconnectDialog()]
   });

package/cjs/components/material-runbox/actions/MaterialRunboxActionDisconnectMenuItem.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const MaterialRunboxActionDisconnectMenuItem: React.FC;
+export default MaterialRunboxActionDisconnectMenuItem;