@elice/material-runbox 1.260908.0 → 1.260910.0

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

@@ -0,0 +1,121 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRawEliceIntl } from '@elice/intl';
+import { useEliceRunboxQuota } from '@elice/runbox-client';
+import { Dialog, DialogTitle, DialogContent, Stack, Card, Typography, Divider, DialogActions, Button } from '@mui/material';
+import { QUOTA_ALMOST_END_MINUTES, QUOTA_PER_SESSION_ALMOST_END_MINUTES } from '../hooks/useRunboxSessionEndWarning.js';
+import MaterialRunboxQuotaAmount from './MaterialRunboxQuotaAmount.js';
+import { getTimeParts } from '../../../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 = useRawEliceIntl();
+  var _useEliceRunboxQuota = useEliceRunboxQuota(),
+    quotaInfo = _useEliceRunboxQuota.quotaInfo,
+    quotaPerSessionInfo = _useEliceRunboxQuota.quotaPerSessionInfo;
+  if (quotaInfo.isUnlimited) {
+    return null;
+  }
+  var _getTimeParts = getTimeParts(quotaInfo.remainingQuota * 60),
+    remainingHours = _getTimeParts.hours,
+    remainingMinutes = _getTimeParts.minutes;
+  var isQuotaAlmostEnd = quotaInfo.remainingQuota <= QUOTA_ALMOST_END_MINUTES;
+  var isQuotaPerSessionAlmostEnd = !quotaPerSessionInfo.isUnlimited && quotaPerSessionInfo.remainingQuota <= QUOTA_PER_SESSION_ALMOST_END_MINUTES;
+  return jsxs(Dialog, {
+    fullWidth: true,
+    maxWidth: "xs",
+    open: open,
+    onClose: onClose,
+    children: [jsx(DialogTitle, {
+      children: intl.formatMessage({
+        id: 'runbox.timer.almost_end.dialog.quota.title'
+      }, {
+        time: [remainingHours > 0 ? intl.formatNumber(remainingHours, {
+          style: 'unit',
+          unit: 'hour',
+          unitDisplay: 'short'
+        }) : null, remainingMinutes > 0 || remainingHours === 0 ? intl.formatNumber(remainingMinutes, {
+          style: 'unit',
+          unit: 'minute',
+          unitDisplay: 'short'
+        }) : null].filter(Boolean).join(' ')
+      })
+    }), jsx(DialogContent, {
+      children: jsxs(Stack, {
+        direction: "column",
+        gap: "1.5rem",
+        children: [jsxs(Card, {
+          elevation: 0,
+          sx: {
+            bgcolor: 'background.neutral'
+          },
+          children: [jsxs(Stack, {
+            direction: "column",
+            gap: "0.5rem",
+            padding: "1rem",
+            bgcolor: isQuotaAlmostEnd ? 'warning.opacity03' : undefined,
+            children: [jsx(Typography, {
+              variant: "body2",
+              fontWeight: "bold",
+              children: intl.formatMessage({
+                id: 'runbox.timer.popover.quota.title'
+              })
+            }), jsx(MaterialRunboxQuotaAmount, {
+              remainingQuota: quotaInfo.remainingQuota,
+              quota: quotaInfo.quota,
+              color: isQuotaAlmostEnd ? 'warning.main' : 'success.main'
+            })]
+          }), jsx(Divider, {}), jsxs(Stack, {
+            direction: "column",
+            gap: "0.5rem",
+            padding: "1rem",
+            bgcolor: isQuotaPerSessionAlmostEnd ? 'warning.opacity03' : undefined,
+            children: [jsx(Typography, {
+              variant: "body2",
+              fontWeight: "bold",
+              children: intl.formatMessage({
+                id: 'runbox.timer.popover.quota_per_session.title'
+              })
+            }), quotaPerSessionInfo.isUnlimited ? jsx(Typography, {
+              component: "span",
+              variant: "h5",
+              fontWeight: "extraBold",
+              children: intl.formatMessage({
+                id: 'runbox.timer.unlimited'
+              })
+            }) : jsx(MaterialRunboxQuotaAmount, {
+              remainingQuota: quotaPerSessionInfo.remainingQuota,
+              quota: quotaPerSessionInfo.quota,
+              color: isQuotaPerSessionAlmostEnd ? 'warning.main' : 'success.main'
+            })]
+          })]
+        }), jsx(Typography, {
+          variant: "body2",
+          whiteSpace: "pre-line",
+          children: intl.formatMessage({
+            id: 'runbox.timer.almost_end.dialog.quota.description'
+          })
+        })]
+      })
+    }), jsx(DialogActions, {
+      children: jsx(Button, {
+        variant: "contained",
+        color: "inherit",
+        onClick: onClose,
+        children: intl.formatMessage({
+          id: 'runbox.timer.almost_end.dialog.confirm'
+        })
+      })
+    })]
+  });
+};
+
+export { MaterialRunboxQuotaAlmostEndDialog as default };

package/es/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/es/components/material-runbox/timer/MaterialRunboxQuotaAmount.js

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRawEliceIntl } from '@elice/intl';
+import { Typography, Stack } from '@mui/material';
+import MaterialRunboxQuotaTimePart from './MaterialRunboxQuotaTimePart.js';
+import { getTimeParts } from '../../../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 = useRawEliceIntl();
+  var _getTimeParts = getTimeParts(remainingQuota * 60),
+    remainingHours = _getTimeParts.hours,
+    remainingMinutes = _getTimeParts.minutes;
+  var _getTimeParts2 = getTimeParts(quota * 60),
+    totalHours = _getTimeParts2.hours,
+    totalMinutes = _getTimeParts2.minutes;
+  return jsxs(Typography, {
+    variant: "body2",
+    children: [jsxs(Stack, {
+      component: "span",
+      display: "inline-flex",
+      direction: "row",
+      gap: "0.25rem",
+      children: [jsx(MaterialRunboxQuotaTimePart, {
+        value: remainingHours,
+        unit: "hour",
+        color: color
+      }), jsx(MaterialRunboxQuotaTimePart, {
+        value: remainingMinutes,
+        unit: "minute",
+        color: color
+      })]
+    }), " / ", [totalHours > 0 ? intl.formatNumber(totalHours, {
+      style: 'unit',
+      unit: 'hour',
+      unitDisplay: 'short'
+    }) : null, totalMinutes > 0 ? intl.formatNumber(totalMinutes, {
+      style: 'unit',
+      unit: 'minute',
+      unitDisplay: 'short'
+    }) : null].filter(Boolean).join(' ')]
+  });
+};
+
+export { MaterialRunboxQuotaAmount as default };

package/es/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/es/components/material-runbox/timer/MaterialRunboxQuotaPerSessionAlmostEndDialog.js

@@ -0,0 +1,122 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRawEliceIntl } from '@elice/intl';
+import { useEliceRunboxQuota } from '@elice/runbox-client';
+import { Dialog, DialogTitle, DialogContent, Stack, Card, Typography, Divider, DialogActions, Button } from '@mui/material';
+import { QUOTA_ALMOST_END_MINUTES, QUOTA_PER_SESSION_ALMOST_END_MINUTES } from '../hooks/useRunboxSessionEndWarning.js';
+import MaterialRunboxQuotaAmount from './MaterialRunboxQuotaAmount.js';
+import { getTimeParts } from '../../../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 = useRawEliceIntl();
+  var _useEliceRunboxQuota = useEliceRunboxQuota(),
+    quotaInfo = _useEliceRunboxQuota.quotaInfo,
+    quotaPerSessionInfo = _useEliceRunboxQuota.quotaPerSessionInfo;
+  if (quotaPerSessionInfo.isUnlimited) {
+    return null;
+  }
+  var _getTimeParts = getTimeParts(quotaPerSessionInfo.remainingQuota * 60),
+    remainingHours = _getTimeParts.hours,
+    remainingMinutes = _getTimeParts.minutes;
+  var isQuotaAlmostEnd = !quotaInfo.isUnlimited && quotaInfo.remainingQuota <= QUOTA_ALMOST_END_MINUTES;
+  var isQuotaPerSessionAlmostEnd = quotaPerSessionInfo.remainingQuota <= QUOTA_PER_SESSION_ALMOST_END_MINUTES;
+  return jsxs(Dialog, {
+    fullWidth: true,
+    maxWidth: "xs",
+    open: open,
+    onClose: onClose,
+    children: [jsx(DialogTitle, {
+      children: intl.formatMessage({
+        id: 'runbox.timer.almost_end.dialog.quota_per_session.title'
+      }, {
+        time: [remainingHours > 0 ? intl.formatNumber(remainingHours, {
+          style: 'unit',
+          unit: 'hour',
+          unitDisplay: 'short'
+        }) : null, remainingMinutes > 0 || remainingHours === 0 ? intl.formatNumber(remainingMinutes, {
+          style: 'unit',
+          unit: 'minute',
+          unitDisplay: 'short'
+        }) : null].filter(Boolean).join(' ')
+      })
+    }), jsx(DialogContent, {
+      children: jsxs(Stack, {
+        direction: "column",
+        gap: "1.5rem",
+        children: [jsxs(Card, {
+          elevation: 0,
+          sx: {
+            bgcolor: 'background.neutral'
+          },
+          children: [jsxs(Stack, {
+            direction: "column",
+            gap: "0.5rem",
+            padding: "1rem",
+            bgcolor: isQuotaAlmostEnd ? 'warning.opacity03' : undefined,
+            children: [jsx(Typography, {
+              variant: "body2",
+              fontWeight: "bold",
+              children: intl.formatMessage({
+                id: 'runbox.timer.popover.quota.title'
+              })
+            }), quotaInfo.isUnlimited ? jsx(Typography, {
+              component: "span",
+              variant: "h5",
+              fontWeight: "extraBold",
+              children: intl.formatMessage({
+                id: 'runbox.timer.unlimited'
+              })
+            }) : jsx(MaterialRunboxQuotaAmount, {
+              remainingQuota: quotaInfo.remainingQuota,
+              quota: quotaInfo.quota,
+              color: isQuotaAlmostEnd ? 'warning.main' : 'success.main'
+            })]
+          }), jsx(Divider, {}), jsxs(Stack, {
+            direction: "column",
+            gap: "0.5rem",
+            padding: "1rem",
+            bgcolor: isQuotaPerSessionAlmostEnd ? 'warning.opacity03' : undefined,
+            children: [jsx(Typography, {
+              variant: "body2",
+              fontWeight: "bold",
+              children: intl.formatMessage({
+                id: 'runbox.timer.popover.quota_per_session.title'
+              })
+            }), jsx(MaterialRunboxQuotaAmount, {
+              remainingQuota: quotaPerSessionInfo.remainingQuota,
+              quota: quotaPerSessionInfo.quota,
+              color: isQuotaPerSessionAlmostEnd ? 'warning.main' : 'success.main'
+            })]
+          })]
+        }), jsx(Typography, {
+          variant: "body2",
+          whiteSpace: "pre-line",
+          children: intl.formatMessage({
+            id: 'runbox.timer.almost_end.dialog.quota_per_session.description'
+          })
+        })]
+      })
+    }), jsx(DialogActions, {
+      children: jsx(Button, {
+        variant: "contained",
+        color: "inherit",
+        onClick: onClose,
+        children: intl.formatMessage({
+          id: 'runbox.timer.almost_end.dialog.confirm'
+        })
+      })
+    })]
+  });
+};
+
+export { MaterialRunboxQuotaPerSessionAlmostEndDialog as default };

package/es/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/es/components/material-runbox/timer/MaterialRunboxQuotaTimePart.js

@@ -0,0 +1,46 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRawEliceIntl } from '@elice/intl';
+import { Typography } from '@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 = useRawEliceIntl();
+  if (value === 0) {
+    return null;
+  }
+  return jsx(Typography, {
+    component: "span",
+    variant: "h5",
+    fontWeight: "extraBold",
+    color: color,
+    children: intl.formatNumberToParts(value, {
+      style: 'unit',
+      unit: unit,
+      unitDisplay: 'short'
+    }).map(function (part, index) {
+      return part.type === 'unit' ? jsx(Typography, {
+        component: "span",
+        variant: "body2",
+        fontWeight: "regular",
+        children: part.value
+      }, index) : jsx("span", {
+        children: part.value
+      }, index);
+    })
+  });
+};
+
+export { MaterialRunboxQuotaTimePart as default };

package/es/components/material-runbox/timer/MaterialRunboxTimer.d.ts

@@ -3,12 +3,17 @@ export interface MaterialRunboxTimerProps {
     runboxId: string;
     userId: number | undefined;
     headerElement: HTMLElement | null;
-    stopRuntime: () => Promise<void>;
     /**
      * Hide timer detail popover?
      * @default false
      */
     hideTimerPopover?: boolean;
+    /**
+     * Tutoring mode? Session-end warnings are for the learner, not for the tutor
+     * looking at their runbox.
+     * @default false
+     */
+    isTutoring?: boolean;
 }
 declare const MaterialRunboxTimer: React.FC<MaterialRunboxTimerProps>;
 export default MaterialRunboxTimer;

package/es/components/material-runbox/timer/MaterialRunboxTimer.js

@@ -8,14 +8,14 @@ import { EliceIcon } from '@elice/mui-elements';
 import { useEliceRunboxRunning, useEliceRunboxQuota } from '@elice/runbox-client';
 import { faTimer } from '@fortawesome/pro-solid-svg-icons';
 import { Chip, chipClasses, Tooltip, Typography } from '@mui/material';
-import MaterialRunboxAlmostEndSnackbars from './MaterialRunboxAlmostEndSnackbars.js';
+import { useRunboxSessionEndWarning, QUOTA_ALMOST_END_MINUTES } from '../hooks/useRunboxSessionEndWarning.js';
+import MaterialRunboxQuotaAlmostEndDialog from './MaterialRunboxQuotaAlmostEndDialog.js';
+import MaterialRunboxQuotaPerSessionAlmostEndDialog from './MaterialRunboxQuotaPerSessionAlmostEndDialog.js';
 import MaterialRunboxTimerDetailPopover, { QUOTA_POPOVER_NOT_SHOW_ON_START } from './MaterialRunboxTimerDetailPopover.js';
+import { useMaterialRunboxControlContext } from '../contexts/MaterialRunboxControlContext.js';
+import { useBreakpoint } from '../../shared/hooks/useBreakpoint.js';
 import { getTimeParts } from '../../../utils/time.js';
 
-//
-//
-//
-var QUOTA_ALMOST_END_MINUTES = 30;
 //
 //
 //
@@ -35,15 +35,25 @@ var MaterialRunboxTimer = function MaterialRunboxTimer(_ref3) {
   var runboxId = _ref3.runboxId,
     userId = _ref3.userId,
     headerElement = _ref3.headerElement,
-    stopRuntime = _ref3.stopRuntime,
     _ref3$hideTimerPopove = _ref3.hideTimerPopover,
-    hideTimerPopover = _ref3$hideTimerPopove === void 0 ? false : _ref3$hideTimerPopove;
+    hideTimerPopover = _ref3$hideTimerPopove === void 0 ? false : _ref3$hideTimerPopove,
+    _ref3$isTutoring = _ref3.isTutoring,
+    isTutoring = _ref3$isTutoring === void 0 ? false : _ref3$isTutoring;
   var intl = useRawEliceIntl();
+  var isSmallTabletOrSmaller = useBreakpoint('md', 'down');
   var _useEliceRunboxRunnin = useEliceRunboxRunning(),
     status = _useEliceRunboxRunnin.status;
   var isRunboxRunning = status === 'running';
   var _useEliceRunboxQuota = useEliceRunboxQuota(),
     quotaInfo = _useEliceRunboxQuota.quotaInfo;
+  var _useMaterialRunboxCon = useMaterialRunboxControlContext(),
+    stopRuntime = _useMaterialRunboxCon.stop;
+  var _useRunboxSessionEndW = useRunboxSessionEndWarning({
+      runboxId: runboxId,
+      disabled: isTutoring || !isRunboxRunning
+    }),
+    warning = _useRunboxSessionEndW.warning,
+    dismiss = _useRunboxSessionEndW.dismiss;
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isTimerDetailPopoverOpen = _React$useState2[0],
@@ -98,7 +108,7 @@ var MaterialRunboxTimer = function MaterialRunboxTimer(_ref3) {
       children: jsx(StyledChip, {
         variant: isAlmostEnd ? 'filled' : 'outlined',
         color: isAlmostEnd ? 'warning' : 'default',
-        size: "medium",
+        size: isSmallTabletOrSmaller ? 'small' : 'medium',
         icon: jsx(EliceIcon, {
           icon: faTimer
         }),
@@ -151,19 +161,17 @@ var MaterialRunboxTimer = function MaterialRunboxTimer(_ref3) {
       }
     });
   };
-  var renderAlmostEndSnackbars = function renderAlmostEndSnackbars() {
-    return jsx(MaterialRunboxAlmostEndSnackbars, {
-      runboxId: runboxId,
-      onClickDetail: function onClickDetail() {
-        return setTimerDetailPopoverOpen(true);
-      }
-    });
-  };
   if (!isRunboxRunning) {
     return null;
   }
   return jsxs(Fragment, {
-    children: [renderTimer(), renderTimerDetailPopover(), renderAlmostEndSnackbars()]
+    children: [renderTimer(), renderTimerDetailPopover(), jsx(MaterialRunboxQuotaAlmostEndDialog, {
+      open: warning === 'quota',
+      onClose: dismiss
+    }), jsx(MaterialRunboxQuotaPerSessionAlmostEndDialog, {
+      open: warning === 'quotaPerSession',
+      onClose: dismiss
+    })]
   });
 };
 

package/es/components/material-runbox/timer/MaterialRunboxTimerDetailPopover.js

@@ -7,15 +7,14 @@ import { useRawEliceIntl } from '@elice/intl';
 import { EliceIcon } from '@elice/mui-elements';
 import { useEliceRunboxQuota } from '@elice/runbox-client';
 import { faXmarkLarge } from '@fortawesome/pro-regular-svg-icons';
-import { Popover, Stack, Card, Divider, Button, FormControlLabel, Typography, Checkbox, IconButton } from '@mui/material';
+import { Popover, Fade, Stack, Card, Divider, Button, FormControlLabel, Typography, Checkbox, IconButton } from '@mui/material';
 import { useQuery } from '@tanstack/react-query';
-import { getTimeParts } from '../../../utils/time.js';
+import { QUOTA_ALMOST_END_MINUTES, QUOTA_PER_SESSION_ALMOST_END_MINUTES } from '../hooks/useRunboxSessionEndWarning.js';
+import MaterialRunboxQuotaAmount from './MaterialRunboxQuotaAmount.js';
 
 //
 //
 //
-var QUOTA_ALMOST_END_MINUTES = 30;
-var QUOTA_PER_SESSION_ALMOST_END_MINUTES = 10;
 var QUOTA_POPOVER_NOT_SHOW_ON_START = 'MaterialRunboxTimer.timerDetailPopover.notShowOnStart';
 //
 //
@@ -114,48 +113,6 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
       })]
     });
   };
-  /**
-   *
-   */
-  var formatTimePart = function formatTimePart(value, unit) {
-    return intl.formatNumber(value, {
-      style: 'unit',
-      unit: unit,
-      unitDisplay: 'short'
-    });
-  };
-  /**
-   *
-   */
-  var renderQuotaTimePart = function renderQuotaTimePart(value, unit, color) {
-    if (value === 0) {
-      return null;
-    }
-    var parts = intl.formatNumberToParts(value, {
-      style: 'unit',
-      unit: unit,
-      unitDisplay: 'short'
-    });
-    return jsx(Typography, {
-      component: "span",
-      variant: "h5",
-      fontWeight: "extraBold",
-      color: color,
-      children: parts.map(function (part, index) {
-        if (part.type === 'unit') {
-          return jsx(Typography, {
-            component: "span",
-            variant: "body2",
-            fontWeight: "regular",
-            children: part.value
-          }, index);
-        }
-        return jsx("span", {
-          children: part.value
-        }, index);
-      })
-    });
-  };
   /**
    *
    */
@@ -181,13 +138,6 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
         })]
       });
     }
-    // Sync UI with the timer.
-    var _getTimeParts = getTimeParts(quotaInfo.remainingQuota * 60),
-      remainingHours = _getTimeParts.hours,
-      remainingMinutes = _getTimeParts.minutes;
-    var _getTimeParts2 = getTimeParts(quotaInfo.quota * 60),
-      totalHours = _getTimeParts2.hours,
-      totalMinutes = _getTimeParts2.minutes;
     var quotaColor = quotaInfo.remainingQuota > QUOTA_ALMOST_END_MINUTES ? 'success.main' : 'warning.main';
     var quotaBgColor = quotaInfo.remainingQuota > QUOTA_ALMOST_END_MINUTES ? undefined : 'warning.opacity03';
     return jsxs(Stack, {
@@ -201,15 +151,10 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
         children: intl.formatMessage({
           id: 'runbox.timer.popover.quota.title'
         })
-      }), jsxs(Typography, {
-        variant: "body2",
-        children: [jsxs(Stack, {
-          component: "span",
-          display: "inline-flex",
-          direction: "row",
-          gap: "0.25rem",
-          children: [renderQuotaTimePart(remainingHours, 'hour', quotaColor), renderQuotaTimePart(remainingMinutes, 'minute', quotaColor)]
-        }), [" / ", totalHours > 0 ? formatTimePart(totalHours, 'hour') : null, totalMinutes > 0 ? formatTimePart(totalMinutes, 'minute') : null].filter(Boolean).join(' ')]
+      }), jsx(MaterialRunboxQuotaAmount, {
+        remainingQuota: quotaInfo.remainingQuota,
+        quota: quotaInfo.quota,
+        color: quotaColor
       })]
     });
   };
@@ -228,12 +173,6 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
         })]
       });
     }
-    var _getTimeParts3 = getTimeParts(quotaPerSessionInfo.remainingQuota * 60),
-      remainingHours = _getTimeParts3.hours,
-      remainingMinutes = _getTimeParts3.minutes;
-    var _getTimeParts4 = getTimeParts(quotaPerSessionInfo.quota * 60),
-      totalHours = _getTimeParts4.hours,
-      totalMinutes = _getTimeParts4.minutes;
     var perSessionColor = quotaPerSessionInfo.remainingQuota > QUOTA_PER_SESSION_ALMOST_END_MINUTES ? 'success.main' : 'warning.main';
     var perSessionBgColor = quotaPerSessionInfo.remainingQuota > QUOTA_PER_SESSION_ALMOST_END_MINUTES ? undefined : 'warning.opacity03';
     return jsxs(Stack, {
@@ -247,28 +186,28 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
         children: intl.formatMessage({
           id: 'runbox.timer.popover.quota_per_session.title'
         })
-      }), jsxs(Typography, {
-        variant: "body2",
-        children: [jsxs(Stack, {
-          component: "span",
-          display: "inline-flex",
-          direction: "row",
-          gap: "0.25rem",
-          children: [renderQuotaTimePart(remainingHours, 'hour', perSessionColor), renderQuotaTimePart(remainingMinutes, 'minute', perSessionColor)]
-        }), [" / ", totalHours > 0 ? formatTimePart(totalHours, 'hour') : null, totalMinutes > 0 ? formatTimePart(totalMinutes, 'minute') : null].filter(Boolean).join(' ')]
+      }), jsx(MaterialRunboxQuotaAmount, {
+        remainingQuota: quotaPerSessionInfo.remainingQuota,
+        quota: quotaPerSessionInfo.quota,
+        color: perSessionColor
       }), jsx(Typography, {
         variant: "body2",
         color: "text.tertiary",
         children: intl.formatMessage({
           id: 'runbox.timer.popover.quota_per_session.description'
         }, {
-          time: formatTimePart(quotaPerSessionInfo.quota, 'minute')
+          time: intl.formatNumber(quotaPerSessionInfo.quota, {
+            style: 'unit',
+            unit: 'minute',
+            unitDisplay: 'short'
+          })
         })
       })]
     });
   };
   return jsx(Popover, Object.assign({
     open: open,
+    TransitionComponent: Fade,
     onClose: onClose
   }, props, {
     children: jsxs(Stack, {
@@ -279,6 +218,7 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
       width: "22rem",
       bgcolor: "background.paper",
       children: [renderHeader(), renderCloseButton(), jsxs(Card, {
+        elevation: 0,
         sx: {
           bgcolor: 'background.neutral'
         },

package/es/components/shared/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useBreakpoint';

package/es/components/shared/hooks/index.js

@@ -0,0 +1 @@
+export { useBreakpoint } from './useBreakpoint.js';

package/es/components/shared/hooks/useBreakpoint.d.ts

@@ -0,0 +1,4 @@
+import type { Breakpoint, Breakpoints } from '@mui/material';
+type Query = Exclude<keyof Breakpoints, 'keys' | 'values' | 'between' | 'unit'>;
+export declare const useBreakpoint: (key: Breakpoint, query?: Query) => boolean;
+export {};

package/es/components/shared/hooks/useBreakpoint.js

@@ -0,0 +1,10 @@
+import { useTheme, useMediaQuery } from '@mui/material';
+
+var useBreakpoint = function useBreakpoint(key) {
+  var query = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'up';
+  var theme = useTheme();
+  var matches = useMediaQuery(theme.breakpoints[query](key));
+  return matches;
+};
+
+export { useBreakpoint };