@elice/material-runbox 1.260923.0-testhelpychat.4 → 1.261005.0

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var edsKit = require('@elice/eds-kit');
+var edsMaterial = require('@elice/eds-material');
 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 theme = require('../theme.js');
 var terminated = require('../../../assets/terminated.png.js');
 var en = require('../locales/en.json.js');
@@ -41,16 +41,16 @@ var RuntimeOverlayTerminated = function RuntimeOverlayTerminated(_ref) {
    *
    */
   var renderConnectButton = function renderConnectButton() {
-    return jsxRuntime.jsx(material.Box, {
+    return jsxRuntime.jsx(edsMaterial.Box, {
       sx: {
         width: '20rem',
         maxWidth: '100%'
       },
-      children: jsxRuntime.jsx(material.Button, {
+      children: jsxRuntime.jsx(edsMaterial.Button, {
         fullWidth: true,
         variant: "contained",
         color: "primary",
-        startIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
+        startIcon: jsxRuntime.jsx(edsKit.FaIcon, {
           icon: proSolidSvgIcons.faLinkSimple
         }),
         onClick: handleClickConnect,
@@ -64,7 +64,7 @@ var RuntimeOverlayTerminated = function RuntimeOverlayTerminated(_ref) {
    *
    */
   var renderContactButton = function renderContactButton() {
-    return jsxRuntime.jsx(material.Button, {
+    return jsxRuntime.jsx(edsMaterial.Button, {
       variant: "text",
       color: "primary",
       onClick: showMessenger,
@@ -77,7 +77,7 @@ var RuntimeOverlayTerminated = function RuntimeOverlayTerminated(_ref) {
    *
    */
   var renderUsageCard = function renderUsageCard(args) {
-    return jsxRuntime.jsx(material.Card, {
+    return jsxRuntime.jsx(edsMaterial.Card, {
       elevation: 0,
       sx: {
         width: '20rem',
@@ -86,24 +86,26 @@ var RuntimeOverlayTerminated = function RuntimeOverlayTerminated(_ref) {
         bgcolor: 'grey.100',
         padding: '1rem'
       },
-      children: jsxRuntime.jsx(material.Stack, {
+      children: jsxRuntime.jsx(edsMaterial.Stack, {
         direction: "row",
-        alignItems: "center",
-        gap: "1.5rem",
-        divider: jsxRuntime.jsx(material.Divider, {
+        divider: jsxRuntime.jsx(edsMaterial.Divider, {
           flexItem: true,
           orientation: "vertical",
           sx: {
             borderColor: 'grey.200'
           }
         }),
+        sx: {
+          gap: '1.5rem',
+          alignItems: 'center'
+        },
         children: args.items.map(function (item, index) {
-          return jsxRuntime.jsxs(material.Stack, {
+          return jsxRuntime.jsxs(edsMaterial.Stack, {
             direction: "column",
-            children: [jsxRuntime.jsx(material.Typography, {
+            children: [jsxRuntime.jsx(edsMaterial.Typography, {
               variant: "body2",
               children: item.title
-            }), jsxRuntime.jsx(material.Typography, {
+            }), jsxRuntime.jsx(edsMaterial.Typography, {
               variant: "subtitle1",
               children: item.value
             })]
@@ -122,9 +124,9 @@ var RuntimeOverlayTerminated = function RuntimeOverlayTerminated(_ref) {
       // useRawEliceIntl (e.g. MaterialRunboxEnvResetButton and its dialog).
       jsxRuntime.jsx(intl.RawEliceIntlProvider, {
         value: intl$1,
-        children: jsxRuntime.jsx(material.ThemeProvider, {
+        children: jsxRuntime.jsx(edsMaterial.ThemeProvider, {
           theme: theme.runboxLightTheme,
-          children: jsxRuntime.jsx(material.Box, {
+          children: jsxRuntime.jsx(edsMaterial.Box, {
             sx: {
               display: 'flex',
               justifyContent: 'center',
@@ -134,10 +136,12 @@ var RuntimeOverlayTerminated = function RuntimeOverlayTerminated(_ref) {
               backgroundColor: 'background.paper',
               color: 'text.primary'
             },
-            children: jsxRuntime.jsxs(material.Stack, {
-              gap: "1.5rem",
-              alignItems: "center",
-              children: [jsxRuntime.jsx(material.Box, {
+            children: jsxRuntime.jsxs(edsMaterial.Stack, {
+              sx: {
+                alignItems: 'center',
+                gap: '1.5rem'
+              },
+              children: [jsxRuntime.jsx(edsMaterial.Box, {
                 component: "img",
                 src: terminated.default,
                 alt: "terminated",
@@ -145,15 +149,19 @@ var RuntimeOverlayTerminated = function RuntimeOverlayTerminated(_ref) {
                   maxWidth: '10rem',
                   height: 'auto'
                 }
-              }), jsxRuntime.jsx(material.Typography, {
+              }), jsxRuntime.jsx(edsMaterial.Typography, {
                 variant: "h6",
-                textAlign: "center",
-                whiteSpace: "pre-line",
+                sx: {
+                  whiteSpace: 'pre-line',
+                  textAlign: 'center'
+                },
                 children: args.title
-              }), jsxRuntime.jsx(material.Typography, {
+              }), jsxRuntime.jsx(edsMaterial.Typography, {
                 variant: "body1",
-                textAlign: "center",
-                whiteSpace: "pre-line",
+                sx: {
+                  whiteSpace: 'pre-line',
+                  textAlign: 'center'
+                },
                 children: args.description
               }), args.body]
             })
@@ -176,7 +184,7 @@ var RuntimeOverlayTerminated = function RuntimeOverlayTerminated(_ref) {
       }),
       body: jsxRuntime.jsx(MaterialRunboxEnvResetButton.default, {
         variant: "contained",
-        startIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
+        startIcon: jsxRuntime.jsx(edsKit.FaIcon, {
           icon: proSolidSvgIcons.faArrowsRotate
         }),
         runtimeTemplateId: runtimeTemplateId,

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

@@ -1,6 +1,6 @@
-import type { EliceIconDefinition } from '@elice/mui-elements';
+import type { FaIconDefinition } from '@elice/eds-kit';
 export interface RuntimeLoadingTip {
-    icon: EliceIconDefinition;
+    icon: FaIconDefinition;
     titleId: string;
     descriptionId: string;
 }

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

@@ -5,11 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var edsKit = require('@elice/eds-kit');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
-var muiElements = require('@elice/mui-elements');
 var runboxClient = require('@elice/runbox-client');
 var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
-var material = require('@mui/material');
 var MaterialRunboxStatusPopover = require('./MaterialRunboxStatusPopover.js');
 var useBreakpoint = require('../../shared/hooks/useBreakpoint.js');
 var useRunboxDiskUsage = require('../hooks/useRunboxDiskUsage.js');
@@ -50,7 +50,7 @@ var MaterialRunboxStatusButton = function MaterialRunboxStatusButton(_ref) {
    */
   var buttonProps = severity ? {
     color: severity,
-    startIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
+    startIcon: jsxRuntime.jsx(edsKit.FaIcon, {
       icon: proSolidSvgIcons.faDiscDrive
     }),
     children: isSmallTabletOrSmaller ? undefined : "DISK ".concat(intl$1.formatDataSize(diskCurrent, {
@@ -62,11 +62,11 @@ var MaterialRunboxStatusButton = function MaterialRunboxStatusButton(_ref) {
     }))
   } : {
     color: 'inherit',
-    startIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
+    startIcon: jsxRuntime.jsx(edsKit.FaIcon, {
       icon: proSolidSvgIcons.faWifi
     }),
     // The label follows the header, but the icon keeps reporting the runtime.
-    sx: _rollupPluginBabelHelpers.defineProperty({}, "& .".concat(material.buttonClasses.startIcon), {
+    sx: _rollupPluginBabelHelpers.defineProperty({}, "& .".concat(edsMaterial.buttonClasses.startIcon), {
       color: isRunboxRunning ? 'success.main' : 'text.disabled'
     }),
     children: isSmallTabletOrSmaller ? undefined : intl$1.formatMessage({
@@ -83,10 +83,10 @@ var MaterialRunboxStatusButton = function MaterialRunboxStatusButton(_ref) {
   //
   //
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(material.Button, Object.assign({
+    children: [jsxRuntime.jsx(edsMaterial.Button, Object.assign({
       variant: "text",
       size: "small",
-      endIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
+      endIcon: jsxRuntime.jsx(edsKit.FaIcon, {
         icon: proSolidSvgIcons.faAngleDown
       }),
       onClick: function onClick(e) {

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

@@ -1,4 +1,4 @@
-import type { TypographyProps } from '@mui/material';
+import type { TypographyProps } from '@elice/eds-material';
 import type React from 'react';
 export interface MaterialRunboxStatusConnectionItemProps {
     /** Leading icon element, or a progress indicator while connecting. */

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

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

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

@@ -1,4 +1,4 @@
-import type { PopoverProps } from '@mui/material';
+import type { PopoverProps } from '@elice/eds-material';
 import type React from 'react';
 export interface MaterialRunboxStatusPopoverProps extends Omit<PopoverProps, 'open' | 'onClose' | 'children'> {
     /** Whether the popover is open. */

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

@@ -5,11 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
+var edsKit = require('@elice/eds-kit');
+var edsMaterial = require('@elice/eds-material');
 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');
@@ -47,21 +47,25 @@ var MaterialRunboxStatusPopover = function MaterialRunboxStatusPopover(_a) {
   //
   //
   //
-  return jsxRuntime.jsx(material.Popover, Object.assign({
+  return jsxRuntime.jsx(edsMaterial.Popover, Object.assign({
     open: open,
-    TransitionComponent: material.Fade,
     onClose: onClose
   }, props, {
-    children: jsxRuntime.jsxs(material.Stack, {
+    slots: {
+      transition: edsMaterial.Fade
+    },
+    children: jsxRuntime.jsxs(edsMaterial.Stack, {
       direction: "column",
-      gap: "0.75rem",
-      padding: "0.75rem",
-      width: POPOVER_WIDTH,
-      bgcolor: "background.paper",
-      children: [jsxRuntime.jsxs(material.Stack, {
+      sx: {
+        bgcolor: 'background.paper',
+        width: POPOVER_WIDTH,
+        padding: '0.75rem',
+        gap: '0.75rem'
+      },
+      children: [jsxRuntime.jsxs(edsMaterial.Stack, {
         direction: "column",
         children: [networkStatus ? jsxRuntime.jsx(MaterialRunboxStatusConnectionItem.default, {
-          icon: jsxRuntime.jsx(muiElements.EliceIcon, {
+          icon: jsxRuntime.jsx(edsKit.FaIcon, {
             icon: NETWORK_ICON[networkStatus],
             fontSize: "small"
           }),
@@ -70,10 +74,10 @@ var MaterialRunboxStatusPopover = function MaterialRunboxStatusPopover(_a) {
           }),
           color: NETWORK_COLOR[networkStatus]
         }) : null, jsxRuntime.jsx(MaterialRunboxStatusConnectionItem.default, {
-          icon: isRunboxConnecting ? jsxRuntime.jsx(material.CircularProgress, {
+          icon: isRunboxConnecting ? jsxRuntime.jsx(edsMaterial.CircularProgress, {
             color: "inherit",
             size: "1rem"
-          }) : jsxRuntime.jsx(muiElements.EliceIcon, {
+          }) : jsxRuntime.jsx(edsKit.FaIcon, {
             icon: isRunboxRunning ? proSolidSvgIcons.faLinkSimple : proSolidSvgIcons.faLinkSimpleSlash,
             fontSize: "small"
           }),
@@ -83,10 +87,10 @@ var MaterialRunboxStatusPopover = function MaterialRunboxStatusPopover(_a) {
           color: isRunboxRunning ? 'success.main' : 'text.disabled'
         })]
       }), stats || isRunboxConnecting ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [jsxRuntime.jsx(material.Divider, {}), jsxRuntime.jsxs(material.Stack, {
+        children: [jsxRuntime.jsx(edsMaterial.Divider, {}), jsxRuntime.jsxs(edsMaterial.Stack, {
           direction: "column",
           children: [jsxRuntime.jsx(MaterialRunboxStatusResourceItem.default, {
-            icon: jsxRuntime.jsx(muiElements.EliceIcon, {
+            icon: jsxRuntime.jsx(edsKit.FaIcon, {
               icon: proSolidSvgIcons.faMicrochip,
               fontSize: "small"
             }),
@@ -96,7 +100,7 @@ var MaterialRunboxStatusPopover = function MaterialRunboxStatusPopover(_a) {
               maximumFractionDigits: 2
             }) : preparing
           }), jsxRuntime.jsx(MaterialRunboxStatusResourceItem.default, {
-            icon: jsxRuntime.jsx(muiElements.EliceIcon, {
+            icon: jsxRuntime.jsx(edsKit.FaIcon, {
               icon: proSolidSvgIcons.faMemory,
               fontSize: "small"
             }),
@@ -109,7 +113,7 @@ var MaterialRunboxStatusPopover = function MaterialRunboxStatusPopover(_a) {
               maximumFractionDigits: 2
             })) : preparing
           }), jsxRuntime.jsx(MaterialRunboxStatusResourceItem.default, {
-            icon: jsxRuntime.jsx(muiElements.EliceIcon, {
+            icon: jsxRuntime.jsx(edsKit.FaIcon, {
               icon: proSolidSvgIcons.faArrowUpRight,
               fontSize: "small"
             }),
@@ -118,7 +122,7 @@ var MaterialRunboxStatusPopover = function MaterialRunboxStatusPopover(_a) {
               unitSystem: 'iec'
             }), "/s") : preparing
           }), jsxRuntime.jsx(MaterialRunboxStatusResourceItem.default, {
-            icon: jsxRuntime.jsx(muiElements.EliceIcon, {
+            icon: jsxRuntime.jsx(edsKit.FaIcon, {
               icon: proSolidSvgIcons.faArrowDownLeft,
               fontSize: "small"
             }),
@@ -127,7 +131,7 @@ var MaterialRunboxStatusPopover = function MaterialRunboxStatusPopover(_a) {
               unitSystem: 'iec'
             }), "/s") : preparing
           }), jsxRuntime.jsx(MaterialRunboxStatusResourceItem.default, {
-            icon: jsxRuntime.jsx(muiElements.EliceIcon, {
+            icon: jsxRuntime.jsx(edsKit.FaIcon, {
               icon: proSolidSvgIcons.faDiscDrive,
               fontSize: "small"
             }),
@@ -146,7 +150,7 @@ var MaterialRunboxStatusPopover = function MaterialRunboxStatusPopover(_a) {
         variant: "contained",
         color: "error",
         disabled: !isRunboxRunning,
-        startIcon: jsxRuntime.jsx(muiElements.EliceIcon, {
+        startIcon: jsxRuntime.jsx(edsKit.FaIcon, {
           icon: proSolidSvgIcons.faArrowsRotate
         }),
         runtimeTemplateId: runtimeTemplateId,

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

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

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

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

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

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

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var edsMaterial = require('@elice/eds-material');
 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');
@@ -33,12 +33,12 @@ var MaterialRunboxQuotaAlmostEndDialog = function MaterialRunboxQuotaAlmostEndDi
     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, {
+  return jsxRuntime.jsxs(edsMaterial.Dialog, {
     fullWidth: true,
     maxWidth: "xs",
     open: open,
     onClose: onClose,
-    children: [jsxRuntime.jsx(material.DialogTitle, {
+    children: [jsxRuntime.jsx(edsMaterial.DialogTitle, {
       children: intl$1.formatMessage({
         id: 'runbox.timer.almost_end.dialog.quota.title'
       }, {
@@ -52,23 +52,29 @@ var MaterialRunboxQuotaAlmostEndDialog = function MaterialRunboxQuotaAlmostEndDi
           unitDisplay: 'short'
         }) : null].filter(Boolean).join(' ')
       })
-    }), jsxRuntime.jsx(material.DialogContent, {
-      children: jsxRuntime.jsxs(material.Stack, {
+    }), jsxRuntime.jsx(edsMaterial.DialogContent, {
+      children: jsxRuntime.jsxs(edsMaterial.Stack, {
         direction: "column",
-        gap: "1.5rem",
-        children: [jsxRuntime.jsxs(material.Card, {
+        sx: {
+          gap: '1.5rem'
+        },
+        children: [jsxRuntime.jsxs(edsMaterial.Card, {
           elevation: 0,
           sx: {
             bgcolor: 'background.neutral'
           },
-          children: [jsxRuntime.jsxs(material.Stack, {
+          children: [jsxRuntime.jsxs(edsMaterial.Stack, {
             direction: "column",
-            gap: "0.5rem",
-            padding: "1rem",
-            bgcolor: isQuotaAlmostEnd ? 'warning.opacity03' : undefined,
-            children: [jsxRuntime.jsx(material.Typography, {
+            sx: {
+              bgcolor: isQuotaAlmostEnd ? 'warning.opacity03' : undefined,
+              padding: '1rem',
+              gap: '0.5rem'
+            },
+            children: [jsxRuntime.jsx(edsMaterial.Typography, {
               variant: "body2",
-              fontWeight: "bold",
+              sx: {
+                fontWeight: 'bold'
+              },
               children: intl$1.formatMessage({
                 id: 'runbox.timer.popover.quota.title'
               })
@@ -77,21 +83,27 @@ var MaterialRunboxQuotaAlmostEndDialog = function MaterialRunboxQuotaAlmostEndDi
               quota: quotaInfo.quota,
               color: isQuotaAlmostEnd ? 'warning.main' : 'success.main'
             })]
-          }), jsxRuntime.jsx(material.Divider, {}), jsxRuntime.jsxs(material.Stack, {
+          }), jsxRuntime.jsx(edsMaterial.Divider, {}), jsxRuntime.jsxs(edsMaterial.Stack, {
             direction: "column",
-            gap: "0.5rem",
-            padding: "1rem",
-            bgcolor: isQuotaPerSessionAlmostEnd ? 'warning.opacity03' : undefined,
-            children: [jsxRuntime.jsx(material.Typography, {
+            sx: {
+              bgcolor: isQuotaPerSessionAlmostEnd ? 'warning.opacity03' : undefined,
+              padding: '1rem',
+              gap: '0.5rem'
+            },
+            children: [jsxRuntime.jsx(edsMaterial.Typography, {
               variant: "body2",
-              fontWeight: "bold",
+              sx: {
+                fontWeight: 'bold'
+              },
               children: intl$1.formatMessage({
                 id: 'runbox.timer.popover.quota_per_session.title'
               })
-            }), quotaPerSessionInfo.isUnlimited ? jsxRuntime.jsx(material.Typography, {
+            }), quotaPerSessionInfo.isUnlimited ? jsxRuntime.jsx(edsMaterial.Typography, {
               component: "span",
               variant: "h5",
-              fontWeight: "extraBold",
+              sx: {
+                fontWeight: 'extraBold'
+              },
               children: intl$1.formatMessage({
                 id: 'runbox.timer.unlimited'
               })
@@ -101,16 +113,18 @@ var MaterialRunboxQuotaAlmostEndDialog = function MaterialRunboxQuotaAlmostEndDi
               color: isQuotaPerSessionAlmostEnd ? 'warning.main' : 'success.main'
             })]
           })]
-        }), jsxRuntime.jsx(material.Typography, {
+        }), jsxRuntime.jsx(edsMaterial.Typography, {
           variant: "body2",
-          whiteSpace: "pre-line",
+          sx: {
+            whiteSpace: 'pre-line'
+          },
           children: intl$1.formatMessage({
             id: 'runbox.timer.almost_end.dialog.quota.description'
           })
         })]
       })
-    }), jsxRuntime.jsx(material.DialogActions, {
-      children: jsxRuntime.jsx(material.Button, {
+    }), jsxRuntime.jsx(edsMaterial.DialogActions, {
+      children: jsxRuntime.jsx(edsMaterial.Button, {
         variant: "contained",
         color: "inherit",
         onClick: onClose,

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var edsMaterial = require('@elice/eds-material');
 var intl = require('@elice/intl');
-var material = require('@mui/material');
 var MaterialRunboxQuotaTimePart = require('./MaterialRunboxQuotaTimePart.js');
 var time = require('../../../utils/time.js');
 
@@ -25,13 +25,15 @@ var MaterialRunboxQuotaAmount = function MaterialRunboxQuotaAmount(_ref) {
   var _getTimeParts2 = time.getTimeParts(quota * 60),
     totalHours = _getTimeParts2.hours,
     totalMinutes = _getTimeParts2.minutes;
-  return jsxRuntime.jsxs(material.Typography, {
+  return jsxRuntime.jsxs(edsMaterial.Typography, {
     variant: "body2",
-    children: [jsxRuntime.jsxs(material.Stack, {
+    children: [jsxRuntime.jsxs(edsMaterial.Stack, {
       component: "span",
-      display: "inline-flex",
       direction: "row",
-      gap: "0.25rem",
+      sx: {
+        gap: '0.25rem',
+        display: 'inline-flex'
+      },
       children: [jsxRuntime.jsx(MaterialRunboxQuotaTimePart.default, {
         value: remainingHours,
         unit: "hour",