@elice/material-runbox 1.260908.0 → 1.260910.0

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

@@ -0,0 +1,161 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+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 MaterialRunboxStatusConnectionItem = require('./MaterialRunboxStatusConnectionItem.js');
+var MaterialRunboxStatusResourceItem = require('./MaterialRunboxStatusResourceItem.js');
+var useRunboxNetworkStatus = require('../hooks/useRunboxNetworkStatus.js');
+var MaterialRunboxEnvResetButton = require('../disk/MaterialRunboxEnvResetButton.js');
+
+//
+//
+//
+var POPOVER_WIDTH = '15.25rem'; // 244px
+var NETWORK_ICON = Object.freeze(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, useRunboxNetworkStatus.RunboxNetworkStatus.Good, proSolidSvgIcons.faWifi), useRunboxNetworkStatus.RunboxNetworkStatus.NotGood, proSolidSvgIcons.faWifiFair), useRunboxNetworkStatus.RunboxNetworkStatus.Bad, proSolidSvgIcons.faWifiSlash));
+var NETWORK_COLOR = Object.freeze(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, useRunboxNetworkStatus.RunboxNetworkStatus.Good, 'success.main'), useRunboxNetworkStatus.RunboxNetworkStatus.NotGood, 'warning.main'), useRunboxNetworkStatus.RunboxNetworkStatus.Bad, 'error.main'));
+//
+//
+//
+var MaterialRunboxStatusPopover = function MaterialRunboxStatusPopover(_a) {
+  var open = _a.open,
+    onClose = _a.onClose,
+    runtimeTemplateId = _a.runtimeTemplateId,
+    courseId = _a.courseId,
+    userId = _a.userId,
+    props = tslib.__rest(_a, ["open", "onClose", "runtimeTemplateId", "courseId", "userId"]);
+  var intl$1 = intl.useRawEliceIntl();
+  var _useEliceRunboxRunnin = runboxClient.useEliceRunboxRunning(),
+    status = _useEliceRunboxRunnin.status;
+  var _useRunboxNetworkStat = useRunboxNetworkStatus.useRunboxNetworkStatus(),
+    networkStatus = _useRunboxNetworkStat.status;
+  var contStats = runboxClient.useEliceRunboxContainerStats();
+  var stats = contStats ? contStats[contStats.length - 1] : null;
+  var isRunboxConnecting = status === 'queued' || status === 'assigned';
+  var isRunboxRunning = status === 'running';
+  // No numbers to show while the runtime comes back up.
+  var preparing = intl$1.formatMessage({
+    id: 'runbox.status.resource.preparing'
+  });
+  //
+  //
+  //
+  return jsxRuntime.jsx(material.Popover, Object.assign({
+    open: open,
+    TransitionComponent: material.Fade,
+    onClose: onClose
+  }, props, {
+    children: jsxRuntime.jsxs(material.Stack, {
+      direction: "column",
+      gap: "0.75rem",
+      padding: "0.75rem",
+      width: POPOVER_WIDTH,
+      bgcolor: "background.paper",
+      children: [jsxRuntime.jsxs(material.Stack, {
+        direction: "column",
+        children: [networkStatus ? jsxRuntime.jsx(MaterialRunboxStatusConnectionItem.default, {
+          icon: jsxRuntime.jsx(muiElements.EliceIcon, {
+            icon: NETWORK_ICON[networkStatus],
+            fontSize: "small"
+          }),
+          label: intl$1.formatMessage({
+            id: 'runbox.status.network'
+          }),
+          color: NETWORK_COLOR[networkStatus]
+        }) : null, jsxRuntime.jsx(MaterialRunboxStatusConnectionItem.default, {
+          icon: isRunboxConnecting ? jsxRuntime.jsx(material.CircularProgress, {
+            color: "inherit",
+            size: "1rem"
+          }) : jsxRuntime.jsx(muiElements.EliceIcon, {
+            icon: isRunboxRunning ? proSolidSvgIcons.faLinkSimple : proSolidSvgIcons.faLinkSimpleSlash,
+            fontSize: "small"
+          }),
+          label: intl$1.formatMessage({
+            id: isRunboxConnecting ? 'runbox.status.runtime.connecting' : isRunboxRunning ? 'runbox.status.runtime.connected' : 'runbox.status.runtime.disconnected'
+          }),
+          color: isRunboxRunning ? 'success.main' : 'text.disabled'
+        })]
+      }), stats || isRunboxConnecting ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(material.Divider, {}), jsxRuntime.jsxs(material.Stack, {
+          direction: "column",
+          children: [jsxRuntime.jsx(MaterialRunboxStatusResourceItem.default, {
+            icon: jsxRuntime.jsx(muiElements.EliceIcon, {
+              icon: proSolidSvgIcons.faMicrochip,
+              fontSize: "small"
+            }),
+            label: "CPU",
+            value: stats ? intl$1.formatNumber(stats.avgCpu, {
+              style: 'percent',
+              maximumFractionDigits: 2
+            }) : preparing
+          }), jsxRuntime.jsx(MaterialRunboxStatusResourceItem.default, {
+            icon: jsxRuntime.jsx(muiElements.EliceIcon, {
+              icon: proSolidSvgIcons.faMemory,
+              fontSize: "small"
+            }),
+            label: "Memory",
+            value: stats ? "".concat(intl$1.formatDataSize(stats.memCurrent, {
+              unitSystem: 'iec',
+              maximumFractionDigits: 2
+            }), " / ").concat(intl$1.formatDataSize(stats.memTotal, {
+              unitSystem: 'iec',
+              maximumFractionDigits: 2
+            })) : preparing
+          }), jsxRuntime.jsx(MaterialRunboxStatusResourceItem.default, {
+            icon: jsxRuntime.jsx(muiElements.EliceIcon, {
+              icon: proSolidSvgIcons.faArrowUpRight,
+              fontSize: "small"
+            }),
+            label: "UP",
+            value: stats ? "".concat(intl$1.formatDataSize(stats.netOutPsec, {
+              unitSystem: 'iec'
+            }), "/s") : preparing
+          }), jsxRuntime.jsx(MaterialRunboxStatusResourceItem.default, {
+            icon: jsxRuntime.jsx(muiElements.EliceIcon, {
+              icon: proSolidSvgIcons.faArrowDownLeft,
+              fontSize: "small"
+            }),
+            label: "DOWN",
+            value: stats ? "".concat(intl$1.formatDataSize(stats.netInPsec, {
+              unitSystem: 'iec'
+            }), "/s") : preparing
+          }), jsxRuntime.jsx(MaterialRunboxStatusResourceItem.default, {
+            icon: jsxRuntime.jsx(muiElements.EliceIcon, {
+              icon: proSolidSvgIcons.faDiscDrive,
+              fontSize: "small"
+            }),
+            label: "DISK",
+            value: stats ? "".concat(intl$1.formatDataSize(stats.diskCurrent, {
+              unitSystem: 'iec',
+              maximumFractionDigits: 2
+            }), " / ").concat(intl$1.formatDataSize(stats.diskTotal, {
+              unitSystem: 'iec',
+              maximumFractionDigits: 2
+            })) : preparing
+          })]
+        })]
+      }) : null, jsxRuntime.jsx(MaterialRunboxEnvResetButton.default, {
+        fullWidth: true,
+        variant: "contained",
+        color: "error",
+        disabled: !isRunboxRunning,
+        startIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
+          icon: proSolidSvgIcons.faArrowsRotate
+        }),
+        runtimeTemplateId: runtimeTemplateId,
+        courseId: courseId,
+        userId: userId,
+        onSuccess: onClose
+      })]
+    })
+  }));
+};
+
+exports.default = MaterialRunboxStatusPopover;

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

@@ -0,0 +1,11 @@
+import type React from 'react';
+export interface MaterialRunboxStatusResourceItemProps {
+    /** Leading icon element. */
+    icon: React.ReactNode;
+    /** Resource label, e.g. `CPU`. */
+    label: React.ReactNode;
+    /** Formatted value, e.g. `438.33 MiB / 4 GiB`. */
+    value: React.ReactNode;
+}
+declare const MaterialRunboxStatusResourceItem: React.FC<MaterialRunboxStatusResourceItemProps>;
+export default MaterialRunboxStatusResourceItem;

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

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+
+//
+//
+//
+var MaterialRunboxStatusResourceItem = function MaterialRunboxStatusResourceItem(_ref) {
+  var icon = _ref.icon,
+    label = _ref.label,
+    value = _ref.value;
+  return jsxRuntime.jsxs(material.Stack, {
+    direction: "row",
+    alignItems: "center",
+    gap: "0.75rem",
+    padding: "0.375rem 0.75rem",
+    children: [jsxRuntime.jsx(material.Typography, {
+      component: "span",
+      display: "inline-flex",
+      color: "text.tertiary",
+      children: icon
+    }), jsxRuntime.jsxs(material.Stack, {
+      direction: "column",
+      children: [jsxRuntime.jsx(material.Typography, {
+        variant: "body2",
+        color: "text.tertiary",
+        children: label
+      }), jsxRuntime.jsx(material.Typography, {
+        variant: "caption",
+        color: "text.tertiary",
+        fontFamily: "'JetBrains Mono', monospace",
+        children: value
+      })]
+    })]
+  });
+};
+
+exports.default = MaterialRunboxStatusResourceItem;

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

@@ -0,0 +1,4 @@
+export { default as MaterialRunboxStatusButton } from './MaterialRunboxStatusButton';
+export { default as MaterialRunboxStatusPopover } from './MaterialRunboxStatusPopover';
+export type { MaterialRunboxStatusButtonProps } from './MaterialRunboxStatusButton';
+export type { MaterialRunboxStatusPopoverProps } from './MaterialRunboxStatusPopover';

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var MaterialRunboxStatusButton = require('./MaterialRunboxStatusButton.js');
+var MaterialRunboxStatusPopover = require('./MaterialRunboxStatusPopover.js');
+
+
+
+exports.MaterialRunboxStatusButton = MaterialRunboxStatusButton.default;
+exports.MaterialRunboxStatusPopover = MaterialRunboxStatusPopover.default;

package/cjs/components/material-runbox/theme.d.ts

@@ -0,0 +1,2 @@
+export declare const runboxDarkTheme: import("@mui/material").Theme;
+export declare const runboxLightTheme: import("@mui/material").Theme;

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

@@ -0,0 +1,15 @@
+'use strict';
+
+var muiSystem = require('@elice/mui-system');
+
+var runboxDarkTheme = muiSystem.createEliceTheme({
+  paletteName: 'purple',
+  paletteMode: 'dark'
+});
+var runboxLightTheme = muiSystem.createEliceTheme({
+  paletteName: 'purple',
+  paletteMode: 'light'
+});
+
+exports.runboxDarkTheme = runboxDarkTheme;
+exports.runboxLightTheme = runboxLightTheme;

package/cjs/components/material-runbox/timer/MaterialRunboxQuotaAlmostEndDialog.d.ts

@@ -0,0 +1,11 @@
+interface MaterialRunboxQuotaAlmostEndDialogProps {
+    open: boolean;
+    onClose: () => void;
+}
+/**
+ * Warns the learner that the *total* available time is about to run out.
+ *
+ * Once it does, the practice ends for good — there is no reconnecting.
+ */
+declare const MaterialRunboxQuotaAlmostEndDialog: React.FC<MaterialRunboxQuotaAlmostEndDialogProps>;
+export default MaterialRunboxQuotaAlmostEndDialog;

package/cjs/components/material-runbox/timer/MaterialRunboxQuotaAlmostEndDialog.js

@@ -0,0 +1,125 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var intl = require('@elice/intl');
+var runboxClient = require('@elice/runbox-client');
+var material = require('@mui/material');
+var useRunboxSessionEndWarning = require('../hooks/useRunboxSessionEndWarning.js');
+var MaterialRunboxQuotaAmount = require('./MaterialRunboxQuotaAmount.js');
+var time = require('../../../utils/time.js');
+
+//
+//
+//
+/**
+ * Warns the learner that the *total* available time is about to run out.
+ *
+ * Once it does, the practice ends for good — there is no reconnecting.
+ */
+var MaterialRunboxQuotaAlmostEndDialog = function MaterialRunboxQuotaAlmostEndDialog(_ref) {
+  var open = _ref.open,
+    onClose = _ref.onClose;
+  var intl$1 = intl.useRawEliceIntl();
+  var _useEliceRunboxQuota = runboxClient.useEliceRunboxQuota(),
+    quotaInfo = _useEliceRunboxQuota.quotaInfo,
+    quotaPerSessionInfo = _useEliceRunboxQuota.quotaPerSessionInfo;
+  if (quotaInfo.isUnlimited) {
+    return null;
+  }
+  var _getTimeParts = time.getTimeParts(quotaInfo.remainingQuota * 60),
+    remainingHours = _getTimeParts.hours,
+    remainingMinutes = _getTimeParts.minutes;
+  var isQuotaAlmostEnd = quotaInfo.remainingQuota <= useRunboxSessionEndWarning.QUOTA_ALMOST_END_MINUTES;
+  var isQuotaPerSessionAlmostEnd = !quotaPerSessionInfo.isUnlimited && quotaPerSessionInfo.remainingQuota <= useRunboxSessionEndWarning.QUOTA_PER_SESSION_ALMOST_END_MINUTES;
+  return jsxRuntime.jsxs(material.Dialog, {
+    fullWidth: true,
+    maxWidth: "xs",
+    open: open,
+    onClose: onClose,
+    children: [jsxRuntime.jsx(material.DialogTitle, {
+      children: intl$1.formatMessage({
+        id: 'runbox.timer.almost_end.dialog.quota.title'
+      }, {
+        time: [remainingHours > 0 ? intl$1.formatNumber(remainingHours, {
+          style: 'unit',
+          unit: 'hour',
+          unitDisplay: 'short'
+        }) : null, remainingMinutes > 0 || remainingHours === 0 ? intl$1.formatNumber(remainingMinutes, {
+          style: 'unit',
+          unit: 'minute',
+          unitDisplay: 'short'
+        }) : null].filter(Boolean).join(' ')
+      })
+    }), jsxRuntime.jsx(material.DialogContent, {
+      children: jsxRuntime.jsxs(material.Stack, {
+        direction: "column",
+        gap: "1.5rem",
+        children: [jsxRuntime.jsxs(material.Card, {
+          elevation: 0,
+          sx: {
+            bgcolor: 'background.neutral'
+          },
+          children: [jsxRuntime.jsxs(material.Stack, {
+            direction: "column",
+            gap: "0.5rem",
+            padding: "1rem",
+            bgcolor: isQuotaAlmostEnd ? 'warning.opacity03' : undefined,
+            children: [jsxRuntime.jsx(material.Typography, {
+              variant: "body2",
+              fontWeight: "bold",
+              children: intl$1.formatMessage({
+                id: 'runbox.timer.popover.quota.title'
+              })
+            }), jsxRuntime.jsx(MaterialRunboxQuotaAmount.default, {
+              remainingQuota: quotaInfo.remainingQuota,
+              quota: quotaInfo.quota,
+              color: isQuotaAlmostEnd ? 'warning.main' : 'success.main'
+            })]
+          }), jsxRuntime.jsx(material.Divider, {}), jsxRuntime.jsxs(material.Stack, {
+            direction: "column",
+            gap: "0.5rem",
+            padding: "1rem",
+            bgcolor: isQuotaPerSessionAlmostEnd ? 'warning.opacity03' : undefined,
+            children: [jsxRuntime.jsx(material.Typography, {
+              variant: "body2",
+              fontWeight: "bold",
+              children: intl$1.formatMessage({
+                id: 'runbox.timer.popover.quota_per_session.title'
+              })
+            }), quotaPerSessionInfo.isUnlimited ? jsxRuntime.jsx(material.Typography, {
+              component: "span",
+              variant: "h5",
+              fontWeight: "extraBold",
+              children: intl$1.formatMessage({
+                id: 'runbox.timer.unlimited'
+              })
+            }) : jsxRuntime.jsx(MaterialRunboxQuotaAmount.default, {
+              remainingQuota: quotaPerSessionInfo.remainingQuota,
+              quota: quotaPerSessionInfo.quota,
+              color: isQuotaPerSessionAlmostEnd ? 'warning.main' : 'success.main'
+            })]
+          })]
+        }), jsxRuntime.jsx(material.Typography, {
+          variant: "body2",
+          whiteSpace: "pre-line",
+          children: intl$1.formatMessage({
+            id: 'runbox.timer.almost_end.dialog.quota.description'
+          })
+        })]
+      })
+    }), jsxRuntime.jsx(material.DialogActions, {
+      children: jsxRuntime.jsx(material.Button, {
+        variant: "contained",
+        color: "inherit",
+        onClick: onClose,
+        children: intl$1.formatMessage({
+          id: 'runbox.timer.almost_end.dialog.confirm'
+        })
+      })
+    })]
+  });
+};
+
+exports.default = MaterialRunboxQuotaAlmostEndDialog;

package/cjs/components/material-runbox/timer/MaterialRunboxQuotaAmount.d.ts

@@ -0,0 +1,13 @@
+export interface MaterialRunboxQuotaAmountProps {
+    /** Remaining time, in minutes. */
+    remainingQuota: number;
+    /** Total granted time, in minutes. */
+    quota: number;
+    /** Color of the remaining time. */
+    color?: string;
+}
+/**
+ * Renders `<remaining> / <total>`, e.g. `4시간 11분 / 5시간`.
+ */
+declare const MaterialRunboxQuotaAmount: React.FC<MaterialRunboxQuotaAmountProps>;
+export default MaterialRunboxQuotaAmount;

package/cjs/components/material-runbox/timer/MaterialRunboxQuotaAmount.js

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var intl = require('@elice/intl');
+var material = require('@mui/material');
+var MaterialRunboxQuotaTimePart = require('./MaterialRunboxQuotaTimePart.js');
+var time = require('../../../utils/time.js');
+
+//
+//
+//
+/**
+ * Renders `<remaining> / <total>`, e.g. `4시간 11분 / 5시간`.
+ */
+var MaterialRunboxQuotaAmount = function MaterialRunboxQuotaAmount(_ref) {
+  var remainingQuota = _ref.remainingQuota,
+    quota = _ref.quota,
+    color = _ref.color;
+  var intl$1 = intl.useRawEliceIntl();
+  var _getTimeParts = time.getTimeParts(remainingQuota * 60),
+    remainingHours = _getTimeParts.hours,
+    remainingMinutes = _getTimeParts.minutes;
+  var _getTimeParts2 = time.getTimeParts(quota * 60),
+    totalHours = _getTimeParts2.hours,
+    totalMinutes = _getTimeParts2.minutes;
+  return jsxRuntime.jsxs(material.Typography, {
+    variant: "body2",
+    children: [jsxRuntime.jsxs(material.Stack, {
+      component: "span",
+      display: "inline-flex",
+      direction: "row",
+      gap: "0.25rem",
+      children: [jsxRuntime.jsx(MaterialRunboxQuotaTimePart.default, {
+        value: remainingHours,
+        unit: "hour",
+        color: color
+      }), jsxRuntime.jsx(MaterialRunboxQuotaTimePart.default, {
+        value: remainingMinutes,
+        unit: "minute",
+        color: color
+      })]
+    }), " / ", [totalHours > 0 ? intl$1.formatNumber(totalHours, {
+      style: 'unit',
+      unit: 'hour',
+      unitDisplay: 'short'
+    }) : null, totalMinutes > 0 ? intl$1.formatNumber(totalMinutes, {
+      style: 'unit',
+      unit: 'minute',
+      unitDisplay: 'short'
+    }) : null].filter(Boolean).join(' ')]
+  });
+};
+
+exports.default = MaterialRunboxQuotaAmount;

package/cjs/components/material-runbox/timer/MaterialRunboxQuotaPerSessionAlmostEndDialog.d.ts

@@ -0,0 +1,12 @@
+interface MaterialRunboxQuotaPerSessionAlmostEndDialogProps {
+    open: boolean;
+    onClose: () => void;
+}
+/**
+ * Warns the learner that the time granted to *this connection* is about to run out.
+ *
+ * Unlike the total quota, the learner can reconnect and keep going as long as total
+ * time is left — so this dialog is about saving work, not about the practice ending.
+ */
+declare const MaterialRunboxQuotaPerSessionAlmostEndDialog: React.FC<MaterialRunboxQuotaPerSessionAlmostEndDialogProps>;
+export default MaterialRunboxQuotaPerSessionAlmostEndDialog;

package/cjs/components/material-runbox/timer/MaterialRunboxQuotaPerSessionAlmostEndDialog.js

@@ -0,0 +1,126 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var intl = require('@elice/intl');
+var runboxClient = require('@elice/runbox-client');
+var material = require('@mui/material');
+var useRunboxSessionEndWarning = require('../hooks/useRunboxSessionEndWarning.js');
+var MaterialRunboxQuotaAmount = require('./MaterialRunboxQuotaAmount.js');
+var time = require('../../../utils/time.js');
+
+//
+//
+//
+/**
+ * Warns the learner that the time granted to *this connection* is about to run out.
+ *
+ * Unlike the total quota, the learner can reconnect and keep going as long as total
+ * time is left — so this dialog is about saving work, not about the practice ending.
+ */
+var MaterialRunboxQuotaPerSessionAlmostEndDialog = function MaterialRunboxQuotaPerSessionAlmostEndDialog(_ref) {
+  var open = _ref.open,
+    onClose = _ref.onClose;
+  var intl$1 = intl.useRawEliceIntl();
+  var _useEliceRunboxQuota = runboxClient.useEliceRunboxQuota(),
+    quotaInfo = _useEliceRunboxQuota.quotaInfo,
+    quotaPerSessionInfo = _useEliceRunboxQuota.quotaPerSessionInfo;
+  if (quotaPerSessionInfo.isUnlimited) {
+    return null;
+  }
+  var _getTimeParts = time.getTimeParts(quotaPerSessionInfo.remainingQuota * 60),
+    remainingHours = _getTimeParts.hours,
+    remainingMinutes = _getTimeParts.minutes;
+  var isQuotaAlmostEnd = !quotaInfo.isUnlimited && quotaInfo.remainingQuota <= useRunboxSessionEndWarning.QUOTA_ALMOST_END_MINUTES;
+  var isQuotaPerSessionAlmostEnd = quotaPerSessionInfo.remainingQuota <= useRunboxSessionEndWarning.QUOTA_PER_SESSION_ALMOST_END_MINUTES;
+  return jsxRuntime.jsxs(material.Dialog, {
+    fullWidth: true,
+    maxWidth: "xs",
+    open: open,
+    onClose: onClose,
+    children: [jsxRuntime.jsx(material.DialogTitle, {
+      children: intl$1.formatMessage({
+        id: 'runbox.timer.almost_end.dialog.quota_per_session.title'
+      }, {
+        time: [remainingHours > 0 ? intl$1.formatNumber(remainingHours, {
+          style: 'unit',
+          unit: 'hour',
+          unitDisplay: 'short'
+        }) : null, remainingMinutes > 0 || remainingHours === 0 ? intl$1.formatNumber(remainingMinutes, {
+          style: 'unit',
+          unit: 'minute',
+          unitDisplay: 'short'
+        }) : null].filter(Boolean).join(' ')
+      })
+    }), jsxRuntime.jsx(material.DialogContent, {
+      children: jsxRuntime.jsxs(material.Stack, {
+        direction: "column",
+        gap: "1.5rem",
+        children: [jsxRuntime.jsxs(material.Card, {
+          elevation: 0,
+          sx: {
+            bgcolor: 'background.neutral'
+          },
+          children: [jsxRuntime.jsxs(material.Stack, {
+            direction: "column",
+            gap: "0.5rem",
+            padding: "1rem",
+            bgcolor: isQuotaAlmostEnd ? 'warning.opacity03' : undefined,
+            children: [jsxRuntime.jsx(material.Typography, {
+              variant: "body2",
+              fontWeight: "bold",
+              children: intl$1.formatMessage({
+                id: 'runbox.timer.popover.quota.title'
+              })
+            }), quotaInfo.isUnlimited ? jsxRuntime.jsx(material.Typography, {
+              component: "span",
+              variant: "h5",
+              fontWeight: "extraBold",
+              children: intl$1.formatMessage({
+                id: 'runbox.timer.unlimited'
+              })
+            }) : jsxRuntime.jsx(MaterialRunboxQuotaAmount.default, {
+              remainingQuota: quotaInfo.remainingQuota,
+              quota: quotaInfo.quota,
+              color: isQuotaAlmostEnd ? 'warning.main' : 'success.main'
+            })]
+          }), jsxRuntime.jsx(material.Divider, {}), jsxRuntime.jsxs(material.Stack, {
+            direction: "column",
+            gap: "0.5rem",
+            padding: "1rem",
+            bgcolor: isQuotaPerSessionAlmostEnd ? 'warning.opacity03' : undefined,
+            children: [jsxRuntime.jsx(material.Typography, {
+              variant: "body2",
+              fontWeight: "bold",
+              children: intl$1.formatMessage({
+                id: 'runbox.timer.popover.quota_per_session.title'
+              })
+            }), jsxRuntime.jsx(MaterialRunboxQuotaAmount.default, {
+              remainingQuota: quotaPerSessionInfo.remainingQuota,
+              quota: quotaPerSessionInfo.quota,
+              color: isQuotaPerSessionAlmostEnd ? 'warning.main' : 'success.main'
+            })]
+          })]
+        }), jsxRuntime.jsx(material.Typography, {
+          variant: "body2",
+          whiteSpace: "pre-line",
+          children: intl$1.formatMessage({
+            id: 'runbox.timer.almost_end.dialog.quota_per_session.description'
+          })
+        })]
+      })
+    }), jsxRuntime.jsx(material.DialogActions, {
+      children: jsxRuntime.jsx(material.Button, {
+        variant: "contained",
+        color: "inherit",
+        onClick: onClose,
+        children: intl$1.formatMessage({
+          id: 'runbox.timer.almost_end.dialog.confirm'
+        })
+      })
+    })]
+  });
+};
+
+exports.default = MaterialRunboxQuotaPerSessionAlmostEndDialog;

package/cjs/components/material-runbox/timer/MaterialRunboxQuotaTimePart.d.ts

@@ -0,0 +1,15 @@
+export interface MaterialRunboxQuotaTimePartProps {
+    value: number;
+    unit: 'hour' | 'minute';
+    color?: string;
+}
+/**
+ * A single `4시간` / `11분` part, with the unit rendered smaller than the number.
+ *
+ * The number and its unit are split with `formatNumberToParts` rather than by hand,
+ * because where the unit sits and how it is written differs per locale.
+ *
+ * Renders nothing when `value` is 0, so `29분` does not come out as `0시간 29분`.
+ */
+declare const MaterialRunboxQuotaTimePart: React.FC<MaterialRunboxQuotaTimePartProps>;
+export default MaterialRunboxQuotaTimePart;

package/cjs/components/material-runbox/timer/MaterialRunboxQuotaTimePart.js

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var intl = require('@elice/intl');
+var material = require('@mui/material');
+
+//
+//
+//
+/**
+ * A single `4시간` / `11분` part, with the unit rendered smaller than the number.
+ *
+ * The number and its unit are split with `formatNumberToParts` rather than by hand,
+ * because where the unit sits and how it is written differs per locale.
+ *
+ * Renders nothing when `value` is 0, so `29분` does not come out as `0시간 29분`.
+ */
+var MaterialRunboxQuotaTimePart = function MaterialRunboxQuotaTimePart(_ref) {
+  var value = _ref.value,
+    unit = _ref.unit,
+    color = _ref.color;
+  var intl$1 = intl.useRawEliceIntl();
+  if (value === 0) {
+    return null;
+  }
+  return jsxRuntime.jsx(material.Typography, {
+    component: "span",
+    variant: "h5",
+    fontWeight: "extraBold",
+    color: color,
+    children: intl$1.formatNumberToParts(value, {
+      style: 'unit',
+      unit: unit,
+      unitDisplay: 'short'
+    }).map(function (part, index) {
+      return part.type === 'unit' ? jsxRuntime.jsx(material.Typography, {
+        component: "span",
+        variant: "body2",
+        fontWeight: "regular",
+        children: part.value
+      }, index) : jsxRuntime.jsx("span", {
+        children: part.value
+      }, index);
+    })
+  });
+};
+
+exports.default = MaterialRunboxQuotaTimePart;