@elice/material-runbox 1.260908.0 → 1.260910.0

package/cjs/components/material-runbox/runtime/RuntimeOverlayTerminated.js

@@ -5,26 +5,32 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var intl = require('@elice/intl');
 var muiElements = require('@elice/mui-elements');
-var muiSystem = require('@elice/mui-system');
 var runboxClient = require('@elice/runbox-client');
 var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
 var material = require('@mui/material');
+var theme = require('../theme.js');
 var terminated = require('../../../assets/terminated.png.js');
 var en = require('../locales/en.json.js');
 var ko = require('../locales/ko.json.js');
+var MaterialRunboxControlContext = require('../contexts/MaterialRunboxControlContext.js');
 var MaterialRunboxContext = require('../contexts/MaterialRunboxContext.js');
+var MaterialRunboxEnvResetButton = require('../disk/MaterialRunboxEnvResetButton.js');
 
 //
 //
 //
 var RuntimeOverlayTerminated = function RuntimeOverlayTerminated(_ref) {
-  var intl = _ref.__intl,
+  var intl$1 = _ref.__intl,
     reason = _ref.reason,
-    startRuntime = _ref.startRuntime;
+    runtimeTemplateId = _ref.runtimeTemplateId,
+    courseId = _ref.courseId,
+    studentUserId = _ref.studentUserId;
   var _useEliceRunboxQuota = runboxClient.useEliceRunboxQuota(),
     quotaInfo = _useEliceRunboxQuota.quotaInfo;
-  var _useMaterialRunboxCon = MaterialRunboxContext.useMaterialRunboxContext(),
-    showMessenger = _useMaterialRunboxCon.showMessenger;
+  var _useMaterialRunboxCon = MaterialRunboxControlContext.useMaterialRunboxControlContext(),
+    startRuntime = _useMaterialRunboxCon.start;
+  var _useMaterialRunboxCon2 = MaterialRunboxContext.useMaterialRunboxContext(),
+    showMessenger = _useMaterialRunboxCon2.showMessenger;
   /**
    *
    */
@@ -35,23 +41,22 @@ var RuntimeOverlayTerminated = function RuntimeOverlayTerminated(_ref) {
    *
    */
   var renderConnectButton = function renderConnectButton() {
-    return jsxRuntime.jsx(material.Button, {
-      variant: "contained",
-      startIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
-        icon: proSolidSvgIcons.faLinkSimple
-      }),
+    return jsxRuntime.jsx(material.Box, {
       sx: {
         width: '20rem',
-        maxWidth: '100%',
-        color: 'text.primary',
-        bgcolor: muiSystem.colors.elicepurple[700],
-        '&:hover': {
-          bgcolor: muiSystem.colors.elicepurple[800]
-        }
+        maxWidth: '100%'
       },
-      onClick: handleClickConnect,
-      children: intl.formatMessage({
-        id: 'runbox.runtime.overlay.terminated.connect'
+      children: jsxRuntime.jsx(material.Button, {
+        fullWidth: true,
+        variant: "contained",
+        color: "primary",
+        startIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
+          icon: proSolidSvgIcons.faLinkSimple
+        }),
+        onClick: handleClickConnect,
+        children: intl$1.formatMessage({
+          id: 'runbox.runtime.overlay.terminated.connect'
+        })
       })
     });
   };
@@ -62,11 +67,8 @@ var RuntimeOverlayTerminated = function RuntimeOverlayTerminated(_ref) {
     return jsxRuntime.jsx(material.Button, {
       variant: "text",
       color: "primary",
-      sx: {
-        color: muiSystem.colors.elicepurple[700]
-      },
       onClick: showMessenger,
-      children: intl.formatMessage({
+      children: intl$1.formatMessage({
         id: 'runbox.runtime.overlay.terminated.contact'
       })
     });
@@ -80,7 +82,7 @@ var RuntimeOverlayTerminated = function RuntimeOverlayTerminated(_ref) {
       sx: {
         width: '20rem',
         maxWidth: '100%',
-        color: 'secondary.contrastText',
+        color: 'text.primary',
         bgcolor: 'grey.100',
         padding: '1rem'
       },
@@ -114,37 +116,51 @@ var RuntimeOverlayTerminated = function RuntimeOverlayTerminated(_ref) {
    *
    */
   var renderOverlay = function renderOverlay(args) {
-    return jsxRuntime.jsx(material.Box, {
-      sx: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '100%',
-        height: '100%'
-      },
-      children: jsxRuntime.jsxs(material.Stack, {
-        gap: "1.5rem",
-        alignItems: "center",
-        children: [jsxRuntime.jsx(material.Box, {
-          component: "img",
-          src: terminated.default,
-          alt: "terminated",
-          sx: {
-            maxWidth: '10rem',
-            height: 'auto'
-          }
-        }), jsxRuntime.jsx(material.Typography, {
-          variant: "h6",
-          textAlign: "center",
-          children: args.title
-        }), jsxRuntime.jsx(material.Typography, {
-          variant: "body1",
-          textAlign: "center",
-          whiteSpace: "pre-line",
-          children: args.description
-        }), args.body]
+    return (
+      // EliceRunboxView shadows the consumer intl context with the runbox-client
+      // bundle, so re-provide this package's messages for descendants that call
+      // useRawEliceIntl (e.g. MaterialRunboxEnvResetButton and its dialog).
+      jsxRuntime.jsx(intl.RawEliceIntlProvider, {
+        value: intl$1,
+        children: jsxRuntime.jsx(material.ThemeProvider, {
+          theme: theme.runboxLightTheme,
+          children: jsxRuntime.jsx(material.Box, {
+            sx: {
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              width: '100%',
+              height: '100%',
+              backgroundColor: 'background.paper',
+              color: 'text.primary'
+            },
+            children: jsxRuntime.jsxs(material.Stack, {
+              gap: "1.5rem",
+              alignItems: "center",
+              children: [jsxRuntime.jsx(material.Box, {
+                component: "img",
+                src: terminated.default,
+                alt: "terminated",
+                sx: {
+                  maxWidth: '10rem',
+                  height: 'auto'
+                }
+              }), jsxRuntime.jsx(material.Typography, {
+                variant: "h6",
+                textAlign: "center",
+                whiteSpace: "pre-line",
+                children: args.title
+              }), jsxRuntime.jsx(material.Typography, {
+                variant: "body1",
+                textAlign: "center",
+                whiteSpace: "pre-line",
+                children: args.description
+              }), args.body]
+            })
+          })
+        })
       })
-    });
+    );
   };
   //
   //
@@ -152,22 +168,28 @@ var RuntimeOverlayTerminated = function RuntimeOverlayTerminated(_ref) {
   // Handle specific cases.
   if (reason === 'os_disk_is_full') {
     return renderOverlay({
-      title: intl.formatMessage({
-        id: 'runbox.runtime.overlay.terminated.title'
+      title: intl$1.formatMessage({
+        id: 'runbox.runtime.overlay.terminated.title.os_disk_is_full'
       }),
-      description: intl.formatMessage({
+      description: intl$1.formatMessage({
         id: 'runbox.runtime.overlay.terminated.description.os_disk_is_full'
       }),
-      body:
-      // TODO: Add disk usage information.
-      renderContactButton()
+      body: jsxRuntime.jsx(MaterialRunboxEnvResetButton.default, {
+        variant: "contained",
+        startIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
+          icon: proSolidSvgIcons.faArrowsRotate
+        }),
+        runtimeTemplateId: runtimeTemplateId,
+        courseId: courseId,
+        userId: studentUserId
+      })
     });
   } else if (reason === 'quota_exceeded') {
     return renderOverlay({
-      title: intl.formatMessage({
+      title: intl$1.formatMessage({
         id: 'runbox.runtime.overlay.terminated.title'
       }),
-      description: intl.formatMessage({
+      description: intl$1.formatMessage({
         id: 'runbox.runtime.overlay.terminated.description.quota_exceeded'
       }),
       body: renderContactButton()
@@ -175,36 +197,36 @@ var RuntimeOverlayTerminated = function RuntimeOverlayTerminated(_ref) {
   }
   // Default.
   return renderOverlay({
-    title: intl.formatMessage({
+    title: intl$1.formatMessage({
       id: 'runbox.runtime.overlay.terminated.title'
     }),
-    description: intl.formatMessage({
+    description: intl$1.formatMessage({
       id: 'runbox.runtime.overlay.terminated.description.default'
     }),
     body: jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [renderConnectButton(), renderUsageCard({
         items: quotaInfo.isUnlimited ? [{
-          title: intl.formatMessage({
+          title: intl$1.formatMessage({
             id: 'runbox.runtime.overlay.terminated.quota.total'
           }),
-          value: intl.formatMessage({
+          value: intl$1.formatMessage({
             id: 'runbox.runtime.overlay.terminated.unlimited'
           })
         }] : [{
-          title: intl.formatMessage({
+          title: intl$1.formatMessage({
             id: 'runbox.runtime.overlay.terminated.quota.total'
           }),
           // TODO: Replace with `intl.formatDuration()` adding it to elice-intl.
-          value: intl.formatNumber(quotaInfo.quota, {
+          value: intl$1.formatNumber(quotaInfo.quota, {
             style: 'unit',
             unit: 'minute',
             unitDisplay: 'short'
           })
         }, {
-          title: intl.formatMessage({
+          title: intl$1.formatMessage({
             id: 'runbox.runtime.overlay.terminated.quota.used'
           }),
-          value: intl.formatNumber(quotaInfo.usedQuota, {
+          value: intl$1.formatNumber(quotaInfo.usedQuota, {
             style: 'unit',
             unit: 'minute',
             unitDisplay: 'short'

package/cjs/components/material-runbox/runtime/runtime-loading-tips.d.ts

@@ -0,0 +1,7 @@
+import type { EliceIconDefinition } from '@elice/mui-elements';
+export interface RuntimeLoadingTip {
+    icon: EliceIconDefinition;
+    titleId: string;
+    descriptionId: string;
+}
+export declare const getRuntimeLoadingTips: (containerImageName?: string) => RuntimeLoadingTip[];

package/cjs/components/material-runbox/runtime/runtime-loading-tips.js

@@ -0,0 +1,148 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var proRegularSvgIcons = require('@fortawesome/pro-regular-svg-icons');
+
+//
+//
+//
+/** Shown first, always. Not knowing these two is what costs a learner work. */
+var INTRO_TIPS = [{
+  icon: proRegularSvgIcons.faDisplayArrowDown,
+  titleId: 'runbox.runtime.loading.note.environment.title',
+  descriptionId: 'runbox.runtime.loading.note.environment.description'
+}, {
+  icon: proRegularSvgIcons.faFloppyDisk,
+  titleId: 'runbox.runtime.loading.note.save.title',
+  descriptionId: 'runbox.runtime.loading.note.save.description'
+}];
+/**
+ * Matched against the container image name, in order -- `VNC-VSCode` carries
+ * two keywords, and the editor is what the learner works in.
+ *
+ * The name is a display name an operator typed (`Jupyter Notebook`,
+ * `JupyterNotebook`, `VSCode`), so it is matched loosely rather than listed.
+ */
+var TIP_GROUPS = [{
+  keywords: ['jupyter'],
+  tips: [{
+    icon: proRegularSvgIcons.faListOl,
+    titleId: 'runbox.runtime.loading.tip.jupyter.cell_order.title',
+    descriptionId: 'runbox.runtime.loading.tip.jupyter.cell_order.description'
+  }, {
+    icon: proRegularSvgIcons.faSquareTerminal,
+    titleId: 'runbox.runtime.loading.tip.jupyter.run_cell.title',
+    descriptionId: 'runbox.runtime.loading.tip.jupyter.run_cell.description'
+  }, {
+    icon: proRegularSvgIcons.faRotate,
+    titleId: 'runbox.runtime.loading.tip.jupyter.restart_kernel.title',
+    descriptionId: 'runbox.runtime.loading.tip.jupyter.restart_kernel.description'
+  }, {
+    icon: proRegularSvgIcons.faListOl,
+    titleId: 'runbox.runtime.loading.tip.jupyter.cell_number.title',
+    descriptionId: 'runbox.runtime.loading.tip.jupyter.cell_number.description'
+  }]
+}, {
+  keywords: ['vscode', 'codeserver'],
+  tips: [{
+    icon: proRegularSvgIcons.faFloppyDisk,
+    titleId: 'runbox.runtime.loading.tip.vscode.save_before_run.title',
+    descriptionId: 'runbox.runtime.loading.tip.vscode.save_before_run.description'
+  }, {
+    icon: proRegularSvgIcons.faSquareTerminal,
+    titleId: 'runbox.runtime.loading.tip.vscode.terminal.title',
+    descriptionId: 'runbox.runtime.loading.tip.vscode.terminal.description'
+  }, {
+    icon: proRegularSvgIcons.faTriangleExclamation,
+    titleId: 'runbox.runtime.loading.tip.vscode.browser_shortcut.title',
+    descriptionId: 'runbox.runtime.loading.tip.vscode.browser_shortcut.description'
+  }, {
+    icon: proRegularSvgIcons.faSitemap,
+    titleId: 'runbox.runtime.loading.tip.vscode.explorer.title',
+    descriptionId: 'runbox.runtime.loading.tip.vscode.explorer.description'
+  }]
+}, {
+  keywords: ['orange'],
+  tips: [{
+    icon: proRegularSvgIcons.faTableCells,
+    titleId: 'runbox.runtime.loading.tip.orange.widget.title',
+    descriptionId: 'runbox.runtime.loading.tip.orange.widget.description'
+  }, {
+    icon: proRegularSvgIcons.faDiagramProject,
+    titleId: 'runbox.runtime.loading.tip.orange.connect.title',
+    descriptionId: 'runbox.runtime.loading.tip.orange.connect.description'
+  }, {
+    icon: proRegularSvgIcons.faTableCells,
+    titleId: 'runbox.runtime.loading.tip.orange.load_data.title',
+    descriptionId: 'runbox.runtime.loading.tip.orange.load_data.description'
+  }, {
+    icon: proRegularSvgIcons.faWindowRestore,
+    titleId: 'runbox.runtime.loading.tip.orange.open_settings.title',
+    descriptionId: 'runbox.runtime.loading.tip.orange.open_settings.description'
+  }]
+}, {
+  keywords: ['dify', 'n8n', 'comfyui', 'openwebui', 'sonarqube'],
+  tips: [{
+    icon: proRegularSvgIcons.faDisplayArrowDown,
+    titleId: 'runbox.runtime.loading.tip.app.web_service.title',
+    descriptionId: 'runbox.runtime.loading.tip.app.web_service.description'
+  }, {
+    icon: proRegularSvgIcons.faHourglassHalf,
+    titleId: 'runbox.runtime.loading.tip.app.slow_start.title',
+    descriptionId: 'runbox.runtime.loading.tip.app.slow_start.description'
+  }, {
+    icon: proRegularSvgIcons.faFloppyDisk,
+    titleId: 'runbox.runtime.loading.tip.app.persisted.title',
+    descriptionId: 'runbox.runtime.loading.tip.app.persisted.description'
+  }]
+}, {
+  keywords: ['vnc', 'unityhub', 'pyqt', 'libreoffice', 'flutter', 'codap', 'jmeter'],
+  tips: [{
+    icon: proRegularSvgIcons.faWindowRestore,
+    titleId: 'runbox.runtime.loading.tip.gui.desktop.title',
+    descriptionId: 'runbox.runtime.loading.tip.gui.desktop.description'
+  }, {
+    icon: proRegularSvgIcons.faCopy,
+    titleId: 'runbox.runtime.loading.tip.gui.clipboard.title',
+    descriptionId: 'runbox.runtime.loading.tip.gui.clipboard.description'
+  }, {
+    icon: proRegularSvgIcons.faArrowsUpDownLeftRight,
+    titleId: 'runbox.runtime.loading.tip.gui.move_window.title',
+    descriptionId: 'runbox.runtime.loading.tip.gui.move_window.description'
+  }, {
+    icon: proRegularSvgIcons.faHourglassHalf,
+    titleId: 'runbox.runtime.loading.tip.gui.slow_start.title',
+    descriptionId: 'runbox.runtime.loading.tip.gui.slow_start.description'
+  }]
+}];
+/** Closes out every environment, and stands alone when no group matched. */
+var COMMON_TIPS = [{
+  icon: proRegularSvgIcons.faTriangleExclamation,
+  titleId: 'runbox.runtime.loading.tip.common.conflict.title',
+  descriptionId: 'runbox.runtime.loading.tip.common.conflict.description'
+}, {
+  icon: proRegularSvgIcons.faHardDrive,
+  titleId: 'runbox.runtime.loading.tip.common.disk.title',
+  descriptionId: 'runbox.runtime.loading.tip.common.disk.description'
+}, {
+  icon: proRegularSvgIcons.faClock,
+  titleId: 'runbox.runtime.loading.tip.common.quota.title',
+  descriptionId: 'runbox.runtime.loading.tip.common.quota.description'
+}];
+//
+//
+//
+var getRuntimeLoadingTips = function getRuntimeLoadingTips() {
+  var containerImageName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var _a;
+  var name = containerImageName.toLowerCase().replace(/[^a-z0-9]/g, '');
+  var group = TIP_GROUPS.find(function (_ref) {
+    var keywords = _ref.keywords;
+    return keywords.some(function (keyword) {
+      return name.includes(keyword);
+    });
+  });
+  return [].concat(INTRO_TIPS, _rollupPluginBabelHelpers.toConsumableArray((_a = group === null || group === void 0 ? void 0 : group.tips) !== null && _a !== void 0 ? _a : []), COMMON_TIPS);
+};
+
+exports.getRuntimeLoadingTips = getRuntimeLoadingTips;

package/cjs/components/material-runbox/status/MaterialRunboxStatusButton.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface MaterialRunboxStatusButtonProps {
+    runtimeTemplateId: string;
+    courseId: number;
+    /** User ID for tutoring. */
+    userId?: number;
+}
+/**
+ * Opens the runbox connection/resource status popover.
+ *
+ * Replaces the always-visible resource stats of the removed footer,
+ * so the numbers are only shown on explicit request. (`[R-5]` `[R-6]`)
+ */
+declare const MaterialRunboxStatusButton: React.FC<MaterialRunboxStatusButtonProps>;
+export default MaterialRunboxStatusButton;

package/cjs/components/material-runbox/status/MaterialRunboxStatusButton.js

@@ -0,0 +1,117 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+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 MaterialRunboxStatusPopover = require('./MaterialRunboxStatusPopover.js');
+var useBreakpoint = require('../../shared/hooks/useBreakpoint.js');
+var useRunboxDiskUsage = require('../hooks/useRunboxDiskUsage.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+//
+//
+//
+/**
+ * Opens the runbox connection/resource status popover.
+ *
+ * Replaces the always-visible resource stats of the removed footer,
+ * so the numbers are only shown on explicit request. (`[R-5]` `[R-6]`)
+ */
+var MaterialRunboxStatusButton = function MaterialRunboxStatusButton(_ref) {
+  var runtimeTemplateId = _ref.runtimeTemplateId,
+    courseId = _ref.courseId,
+    userId = _ref.userId;
+  var intl$1 = intl.useRawEliceIntl();
+  var isSmallTabletOrSmaller = useBreakpoint.useBreakpoint('md', 'down');
+  var _useEliceRunboxRunnin = runboxClient.useEliceRunboxRunning(),
+    status = _useEliceRunboxRunnin.status;
+  var _useRunboxDiskUsage = useRunboxDiskUsage.useRunboxDiskUsage(),
+    severity = _useRunboxDiskUsage.severity,
+    diskCurrent = _useRunboxDiskUsage.diskCurrent,
+    diskTotal = _useRunboxDiskUsage.diskTotal;
+  var _React$useState = React__default.default.useState(null),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    anchorEl = _React$useState2[0],
+    setAnchorEl = _React$useState2[1];
+  var isRunboxRunning = status === 'running';
+  /**
+   * Over threshold the button turns into a disk gauge, so the learner sees the
+   * number that matters without opening the popover.
+   */
+  var buttonProps = severity ? {
+    color: severity,
+    startIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
+      icon: proSolidSvgIcons.faDiscDrive
+    }),
+    children: isSmallTabletOrSmaller ? undefined : "DISK ".concat(intl$1.formatDataSize(diskCurrent, {
+      unitSystem: 'iec',
+      maximumFractionDigits: 2
+    }), " / ").concat(intl$1.formatDataSize(diskTotal, {
+      unitSystem: 'iec',
+      maximumFractionDigits: 2
+    }))
+  } : {
+    color: 'inherit',
+    startIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
+      icon: proSolidSvgIcons.faWifi
+    }),
+    // The label follows the header, but the icon keeps reporting the runtime.
+    sx: _rollupPluginBabelHelpers.defineProperty({}, "& .".concat(material.buttonClasses.startIcon), {
+      color: isRunboxRunning ? 'success.main' : 'text.disabled'
+    }),
+    children: isSmallTabletOrSmaller ? undefined : intl$1.formatMessage({
+      id: 'runbox.status.button.title'
+    })
+  };
+  /**
+   *
+   */
+  var handleClose = function handleClose() {
+    setAnchorEl(null);
+  };
+  //
+  //
+  //
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(material.Button, Object.assign({
+      variant: "text",
+      size: "small",
+      endIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
+        icon: proSolidSvgIcons.faAngleDown
+      }),
+      onClick: function onClick(e) {
+        return setAnchorEl(e.currentTarget);
+      }
+    }, buttonProps)), jsxRuntime.jsx(MaterialRunboxStatusPopover.default, {
+      open: Boolean(anchorEl),
+      anchorEl: anchorEl,
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'left'
+      },
+      sx: {
+        marginTop: '0.5rem'
+      },
+      runtimeTemplateId: runtimeTemplateId,
+      courseId: courseId,
+      userId: userId,
+      onClose: handleClose
+    })]
+  });
+};
+
+exports.default = MaterialRunboxStatusButton;

package/cjs/components/material-runbox/status/MaterialRunboxStatusConnectionItem.d.ts

@@ -0,0 +1,12 @@
+import type { TypographyProps } from '@mui/material';
+import type React from 'react';
+export interface MaterialRunboxStatusConnectionItemProps {
+    /** Leading icon element, or a progress indicator while connecting. */
+    icon: React.ReactNode;
+    /** Row label. */
+    label: React.ReactNode;
+    /** Palette color for the icon, e.g. `success.main`. */
+    color?: TypographyProps['color'];
+}
+declare const MaterialRunboxStatusConnectionItem: React.FC<MaterialRunboxStatusConnectionItemProps>;
+export default MaterialRunboxStatusConnectionItem;

package/cjs/components/material-runbox/status/MaterialRunboxStatusConnectionItem.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+
+//
+//
+//
+var MaterialRunboxStatusConnectionItem = function MaterialRunboxStatusConnectionItem(_ref) {
+  var icon = _ref.icon,
+    label = _ref.label,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'text.disabled' : _ref$color;
+  return jsxRuntime.jsxs(material.Stack, {
+    direction: "row",
+    alignItems: "center",
+    gap: "0.75rem",
+    minHeight: "2.5rem",
+    padding: "0 0.75rem",
+    children: [jsxRuntime.jsx(material.Typography, {
+      component: "span",
+      display: "inline-flex",
+      color: color,
+      children: icon
+    }), jsxRuntime.jsx(material.Typography, {
+      variant: "body2",
+      color: "text.tertiary",
+      children: label
+    })]
+  });
+};
+
+exports.default = MaterialRunboxStatusConnectionItem;

package/cjs/components/material-runbox/status/MaterialRunboxStatusPopover.d.ts

@@ -0,0 +1,14 @@
+import type { PopoverProps } from '@mui/material';
+import type React from 'react';
+export interface MaterialRunboxStatusPopoverProps extends Omit<PopoverProps, 'open' | 'onClose' | 'children'> {
+    /** Whether the popover is open. */
+    open: boolean;
+    /** Called when the popover requests to be closed. */
+    onClose: () => void;
+    runtimeTemplateId: string;
+    courseId: number;
+    /** User ID for tutoring. */
+    userId?: number;
+}
+declare const MaterialRunboxStatusPopover: React.FC<MaterialRunboxStatusPopoverProps>;
+export default MaterialRunboxStatusPopover;