@elice/material-runbox 1.260908.0 → 1.260910.0

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

@@ -12,8 +12,12 @@ 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 MaterialRunboxAlmostEndSnackbars = require('./MaterialRunboxAlmostEndSnackbars.js');
+var useRunboxSessionEndWarning = require('../hooks/useRunboxSessionEndWarning.js');
+var MaterialRunboxQuotaAlmostEndDialog = require('./MaterialRunboxQuotaAlmostEndDialog.js');
+var MaterialRunboxQuotaPerSessionAlmostEndDialog = require('./MaterialRunboxQuotaPerSessionAlmostEndDialog.js');
 var MaterialRunboxTimerDetailPopover = require('./MaterialRunboxTimerDetailPopover.js');
+var MaterialRunboxControlContext = require('../contexts/MaterialRunboxControlContext.js');
+var useBreakpoint = require('../../shared/hooks/useBreakpoint.js');
 var time = require('../../../utils/time.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -21,10 +25,6 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-//
-//
-//
-var QUOTA_ALMOST_END_MINUTES = 30;
 //
 //
 //
@@ -44,15 +44,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$1 = intl.useRawEliceIntl();
+  var isSmallTabletOrSmaller = useBreakpoint.useBreakpoint('md', 'down');
   var _useEliceRunboxRunnin = runboxClient.useEliceRunboxRunning(),
     status = _useEliceRunboxRunnin.status;
   var isRunboxRunning = status === 'running';
   var _useEliceRunboxQuota = runboxClient.useEliceRunboxQuota(),
     quotaInfo = _useEliceRunboxQuota.quotaInfo;
+  var _useMaterialRunboxCon = MaterialRunboxControlContext.useMaterialRunboxControlContext(),
+    stopRuntime = _useMaterialRunboxCon.stop;
+  var _useRunboxSessionEndW = useRunboxSessionEndWarning.useRunboxSessionEndWarning({
+      runboxId: runboxId,
+      disabled: isTutoring || !isRunboxRunning
+    }),
+    warning = _useRunboxSessionEndW.warning,
+    dismiss = _useRunboxSessionEndW.dismiss;
   var _React$useState = React__default.default.useState(false),
     _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
     isTimerDetailPopoverOpen = _React$useState2[0],
@@ -82,7 +92,7 @@ var MaterialRunboxTimer = function MaterialRunboxTimer(_ref3) {
     var hoursString = hours.toString().padStart(2, '0');
     var minutesString = minutes.toString().padStart(2, '0');
     var timeString = "".concat(hoursString, " : ").concat(minutesString);
-    var isAlmostEnd = !quotaInfo.isUnlimited && quotaInfo.remainingQuota <= QUOTA_ALMOST_END_MINUTES;
+    var isAlmostEnd = !quotaInfo.isUnlimited && quotaInfo.remainingQuota <= useRunboxSessionEndWarning.QUOTA_ALMOST_END_MINUTES;
     return jsxRuntime.jsx(material.Tooltip, {
       arrow: true,
       placement: "bottom",
@@ -107,7 +117,7 @@ var MaterialRunboxTimer = function MaterialRunboxTimer(_ref3) {
       children: jsxRuntime.jsx(StyledChip, {
         variant: isAlmostEnd ? 'filled' : 'outlined',
         color: isAlmostEnd ? 'warning' : 'default',
-        size: "medium",
+        size: isSmallTabletOrSmaller ? 'small' : 'medium',
         icon: jsxRuntime.jsx(muiElements.EliceIcon, {
           icon: proSolidSvgIcons.faTimer
         }),
@@ -160,19 +170,17 @@ var MaterialRunboxTimer = function MaterialRunboxTimer(_ref3) {
       }
     });
   };
-  var renderAlmostEndSnackbars = function renderAlmostEndSnackbars() {
-    return jsxRuntime.jsx(MaterialRunboxAlmostEndSnackbars.default, {
-      runboxId: runboxId,
-      onClickDetail: function onClickDetail() {
-        return setTimerDetailPopoverOpen(true);
-      }
-    });
-  };
   if (!isRunboxRunning) {
     return null;
   }
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [renderTimer(), renderTimerDetailPopover(), renderAlmostEndSnackbars()]
+    children: [renderTimer(), renderTimerDetailPopover(), jsxRuntime.jsx(MaterialRunboxQuotaAlmostEndDialog.default, {
+      open: warning === 'quota',
+      onClose: dismiss
+    }), jsxRuntime.jsx(MaterialRunboxQuotaPerSessionAlmostEndDialog.default, {
+      open: warning === 'quotaPerSession',
+      onClose: dismiss
+    })]
   });
 };
 

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

@@ -13,13 +13,12 @@ var runboxClient = require('@elice/runbox-client');
 var proRegularSvgIcons = require('@fortawesome/pro-regular-svg-icons');
 var material = require('@mui/material');
 var reactQuery = require('@tanstack/react-query');
-var time = require('../../../utils/time.js');
+var useRunboxSessionEndWarning = require('../hooks/useRunboxSessionEndWarning.js');
+var MaterialRunboxQuotaAmount = require('./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';
 //
 //
@@ -118,48 +117,6 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
       })]
     });
   };
-  /**
-   *
-   */
-  var formatTimePart = function formatTimePart(value, unit) {
-    return intl$1.formatNumber(value, {
-      style: 'unit',
-      unit: unit,
-      unitDisplay: 'short'
-    });
-  };
-  /**
-   *
-   */
-  var renderQuotaTimePart = function renderQuotaTimePart(value, unit, color) {
-    if (value === 0) {
-      return null;
-    }
-    var parts = intl$1.formatNumberToParts(value, {
-      style: 'unit',
-      unit: unit,
-      unitDisplay: 'short'
-    });
-    return jsxRuntime.jsx(material.Typography, {
-      component: "span",
-      variant: "h5",
-      fontWeight: "extraBold",
-      color: color,
-      children: parts.map(function (part, index) {
-        if (part.type === 'unit') {
-          return jsxRuntime.jsx(material.Typography, {
-            component: "span",
-            variant: "body2",
-            fontWeight: "regular",
-            children: part.value
-          }, index);
-        }
-        return jsxRuntime.jsx("span", {
-          children: part.value
-        }, index);
-      })
-    });
-  };
   /**
    *
    */
@@ -185,15 +142,8 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
         })]
       });
     }
-    // Sync UI with the timer.
-    var _getTimeParts = time.getTimeParts(quotaInfo.remainingQuota * 60),
-      remainingHours = _getTimeParts.hours,
-      remainingMinutes = _getTimeParts.minutes;
-    var _getTimeParts2 = time.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';
+    var quotaColor = quotaInfo.remainingQuota > useRunboxSessionEndWarning.QUOTA_ALMOST_END_MINUTES ? 'success.main' : 'warning.main';
+    var quotaBgColor = quotaInfo.remainingQuota > useRunboxSessionEndWarning.QUOTA_ALMOST_END_MINUTES ? undefined : 'warning.opacity03';
     return jsxRuntime.jsxs(material.Stack, {
       direction: "column",
       gap: "0.5rem",
@@ -205,15 +155,10 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
         children: intl$1.formatMessage({
           id: 'runbox.timer.popover.quota.title'
         })
-      }), jsxRuntime.jsxs(material.Typography, {
-        variant: "body2",
-        children: [jsxRuntime.jsxs(material.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(' ')]
+      }), jsxRuntime.jsx(MaterialRunboxQuotaAmount.default, {
+        remainingQuota: quotaInfo.remainingQuota,
+        quota: quotaInfo.quota,
+        color: quotaColor
       })]
     });
   };
@@ -232,14 +177,8 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
         })]
       });
     }
-    var _getTimeParts3 = time.getTimeParts(quotaPerSessionInfo.remainingQuota * 60),
-      remainingHours = _getTimeParts3.hours,
-      remainingMinutes = _getTimeParts3.minutes;
-    var _getTimeParts4 = time.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';
+    var perSessionColor = quotaPerSessionInfo.remainingQuota > useRunboxSessionEndWarning.QUOTA_PER_SESSION_ALMOST_END_MINUTES ? 'success.main' : 'warning.main';
+    var perSessionBgColor = quotaPerSessionInfo.remainingQuota > useRunboxSessionEndWarning.QUOTA_PER_SESSION_ALMOST_END_MINUTES ? undefined : 'warning.opacity03';
     return jsxRuntime.jsxs(material.Stack, {
       direction: "column",
       gap: "0.5rem",
@@ -251,28 +190,28 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
         children: intl$1.formatMessage({
           id: 'runbox.timer.popover.quota_per_session.title'
         })
-      }), jsxRuntime.jsxs(material.Typography, {
-        variant: "body2",
-        children: [jsxRuntime.jsxs(material.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(' ')]
+      }), jsxRuntime.jsx(MaterialRunboxQuotaAmount.default, {
+        remainingQuota: quotaPerSessionInfo.remainingQuota,
+        quota: quotaPerSessionInfo.quota,
+        color: perSessionColor
       }), jsxRuntime.jsx(material.Typography, {
         variant: "body2",
         color: "text.tertiary",
         children: intl$1.formatMessage({
           id: 'runbox.timer.popover.quota_per_session.description'
         }, {
-          time: formatTimePart(quotaPerSessionInfo.quota, 'minute')
+          time: intl$1.formatNumber(quotaPerSessionInfo.quota, {
+            style: 'unit',
+            unit: 'minute',
+            unitDisplay: 'short'
+          })
         })
       })]
     });
   };
   return jsxRuntime.jsx(material.Popover, Object.assign({
     open: open,
+    TransitionComponent: material.Fade,
     onClose: onClose
   }, props, {
     children: jsxRuntime.jsxs(material.Stack, {
@@ -283,6 +222,7 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
       width: "22rem",
       bgcolor: "background.paper",
       children: [renderHeader(), renderCloseButton(), jsxRuntime.jsxs(material.Card, {
+        elevation: 0,
         sx: {
           bgcolor: 'background.neutral'
         },

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

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

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

@@ -0,0 +1,7 @@
+'use strict';
+
+var useBreakpoint = require('./useBreakpoint.js');
+
+
+
+exports.useBreakpoint = useBreakpoint.useBreakpoint;

package/cjs/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/cjs/components/shared/hooks/useBreakpoint.js

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

package/es/_virtual/_rollupPluginBabelHelpers.js

@@ -6,6 +6,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),
@@ -39,6 +42,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) {
@@ -69,6 +75,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,
@@ -187,6 +196,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];
@@ -209,4 +221,4 @@ function _unsupportedIterableToArray(r, a) {
   }
 }
 
-export { _arrayLikeToArray as arrayLikeToArray, _arrayWithHoles as arrayWithHoles, _asyncToGenerator as asyncToGenerator, _defineProperty as defineProperty, _iterableToArrayLimit as iterableToArrayLimit, _nonIterableRest as nonIterableRest, _regenerator as regenerator, _regeneratorDefine as regeneratorDefine, _slicedToArray as slicedToArray, _taggedTemplateLiteral as taggedTemplateLiteral, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey, _unsupportedIterableToArray as unsupportedIterableToArray };
+export { _arrayLikeToArray as arrayLikeToArray, _arrayWithHoles as arrayWithHoles, _arrayWithoutHoles as arrayWithoutHoles, _asyncToGenerator as asyncToGenerator, _defineProperty as defineProperty, _iterableToArray as iterableToArray, _iterableToArrayLimit as iterableToArrayLimit, _nonIterableRest as nonIterableRest, _nonIterableSpread as nonIterableSpread, _regenerator as regenerator, _regeneratorDefine as regeneratorDefine, _slicedToArray as slicedToArray, _taggedTemplateLiteral as taggedTemplateLiteral, _toConsumableArray as toConsumableArray, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey, _unsupportedIterableToArray as unsupportedIterableToArray };

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

@@ -0,0 +1,3 @@
+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";
+
+export { img as default };

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

@@ -1,7 +1,9 @@
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
+import { ThemeProvider } from '@mui/material';
 import MaterialRunboxContent from './MaterialRunboxContent.js';
+import { runboxDarkTheme } from './theme.js';
 import messageEn from './locales/en.json.js';
 import messageKo from './locales/ko.json.js';
 import MaterialRunboxContextProvider from './contexts/MaterialRunboxContext.js';
@@ -25,17 +27,20 @@ var MaterialRunbox = function MaterialRunbox(_a) {
     eliceMaterialRunboxApiConfiguration = _a.eliceMaterialRunboxApiConfiguration,
     __intl = _a.__intl,
     contentProps = __rest(_a, ["enableAutoShutdownToggle", "enableUrlShare", "locale", "showMessenger", "getRunningRunboxLinkProps", "eliceMaterialRunboxApiConfiguration", "__intl"]);
-  return jsx(RawEliceIntlProvider, {
-    value: __intl,
-    children: jsx(MaterialRunboxContextProvider, {
-      enableAutoShutdownToggle: enableAutoShutdownToggle,
-      enableUrlShare: enableUrlShare,
-      locale: locale,
-      showMessenger: showMessenger,
-      getRunningRunboxLinkProps: getRunningRunboxLinkProps,
-      children: jsx(MaterialRunboxApiContextProvider, {
-        eliceMaterialRunboxApiConfiguration: eliceMaterialRunboxApiConfiguration,
-        children: jsx(MaterialRunboxContent, Object.assign({}, contentProps))
+  return jsx(ThemeProvider, {
+    theme: runboxDarkTheme,
+    children: jsx(RawEliceIntlProvider, {
+      value: __intl,
+      children: jsx(MaterialRunboxContextProvider, {
+        enableAutoShutdownToggle: enableAutoShutdownToggle,
+        enableUrlShare: enableUrlShare,
+        locale: locale,
+        showMessenger: showMessenger,
+        getRunningRunboxLinkProps: getRunningRunboxLinkProps,
+        children: jsx(MaterialRunboxApiContextProvider, {
+          eliceMaterialRunboxApiConfiguration: eliceMaterialRunboxApiConfiguration,
+          children: jsx(MaterialRunboxContent, Object.assign({}, contentProps))
+        })
       })
     })
   });

package/es/components/material-runbox/MaterialRunboxContent.d.ts

@@ -26,6 +26,8 @@ export interface MaterialRunboxContentProps extends Pick<MaterialRunboxHeaderPro
     isTutoring: boolean;
     /** Used for submit log score tag color. */
     getAchievementColor?: GetAchievementColor;
+    /** Notified when the runbox running (session) ID changes. */
+    onRunboxRunningIdChange?: (runboxRunningId: number | null) => void;
 }
 declare const MaterialRunboxContent: React.FC<MaterialRunboxContentProps>;
 export default MaterialRunboxContent;