@elice/material-runbox 1.260930.0 → 1.261005.0

package/cjs/components/material-runbox/timer/MaterialRunboxQuotaPerSessionAlmostEndDialog.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');
@@ -34,12 +34,12 @@ var MaterialRunboxQuotaPerSessionAlmostEndDialog = function MaterialRunboxQuotaP
     remainingMinutes = _getTimeParts.minutes;
   var isQuotaAlmostEnd = !quotaInfo.isUnlimited && quotaInfo.remainingQuota <= useRunboxSessionEndWarning.QUOTA_ALMOST_END_MINUTES;
   var isQuotaPerSessionAlmostEnd = quotaPerSessionInfo.remainingQuota <= useRunboxSessionEndWarning.QUOTA_PER_SESSION_ALMOST_END_MINUTES;
-  return jsxRuntime.jsxs(material.Dialog, {
+  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_per_session.title'
       }, {
@@ -53,30 +53,38 @@ var MaterialRunboxQuotaPerSessionAlmostEndDialog = function MaterialRunboxQuotaP
           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'
               })
-            }), quotaInfo.isUnlimited ? jsxRuntime.jsx(material.Typography, {
+            }), quotaInfo.isUnlimited ? jsxRuntime.jsx(edsMaterial.Typography, {
               component: "span",
               variant: "h5",
-              fontWeight: "extraBold",
+              sx: {
+                fontWeight: 'extraBold'
+              },
               children: intl$1.formatMessage({
                 id: 'runbox.timer.unlimited'
               })
@@ -85,14 +93,18 @@ var MaterialRunboxQuotaPerSessionAlmostEndDialog = function MaterialRunboxQuotaP
               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'
               })
@@ -102,16 +114,18 @@ var MaterialRunboxQuotaPerSessionAlmostEndDialog = function MaterialRunboxQuotaP
               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_per_session.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/MaterialRunboxQuotaTimePart.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');
 
 //
 //
@@ -25,20 +25,24 @@ var MaterialRunboxQuotaTimePart = function MaterialRunboxQuotaTimePart(_ref) {
   if (value === 0) {
     return null;
   }
-  return jsxRuntime.jsx(material.Typography, {
+  return jsxRuntime.jsx(edsMaterial.Typography, {
     component: "span",
     variant: "h5",
-    fontWeight: "extraBold",
     color: color,
+    sx: {
+      fontWeight: 'extraBold'
+    },
     children: intl$1.formatNumberToParts(value, {
       style: 'unit',
       unit: unit,
       unitDisplay: 'short'
     }).map(function (part, index) {
-      return part.type === 'unit' ? jsxRuntime.jsx(material.Typography, {
+      return part.type === 'unit' ? jsxRuntime.jsx(edsMaterial.Typography, {
         component: "span",
         variant: "body2",
-        fontWeight: "regular",
+        sx: {
+          fontWeight: 'regular'
+        },
         children: part.value
       }, index) : jsxRuntime.jsx("span", {
         children: part.value

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

@@ -7,11 +7,11 @@ var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactUse = require('react-use');
+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 useRunboxSessionEndWarning = require('../hooks/useRunboxSessionEndWarning.js');
 var MaterialRunboxQuotaAlmostEndDialog = require('./MaterialRunboxQuotaAlmostEndDialog.js');
 var MaterialRunboxQuotaPerSessionAlmostEndDialog = require('./MaterialRunboxQuotaPerSessionAlmostEndDialog.js');
@@ -28,9 +28,9 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 //
 //
 //
-var StyledChip = /*#__PURE__*/_styled__default.default(material.Chip, {
+var StyledChip = /*#__PURE__*/_styled__default.default(edsMaterial.Chip, {
   target: "e15iaxbx0"
-})("&[data-active='true']:not(.", material.chipClasses.colorWarning, "){background-color:", function (_ref) {
+})("&[data-active='true']:not(.", edsMaterial.chipClasses.colorWarning, "){background-color:", function (_ref) {
   var theme = _ref.theme;
   return theme.palette.action.focus;
 }, ";color:", function (_ref2) {
@@ -93,11 +93,13 @@ var MaterialRunboxTimer = function MaterialRunboxTimer(_ref3) {
     var minutesString = minutes.toString().padStart(2, '0');
     var timeString = "".concat(hoursString, " : ").concat(minutesString);
     var isAlmostEnd = !quotaInfo.isUnlimited && quotaInfo.remainingQuota <= useRunboxSessionEndWarning.QUOTA_ALMOST_END_MINUTES;
-    return jsxRuntime.jsx(material.Tooltip, {
+    return jsxRuntime.jsx(edsMaterial.Tooltip, {
       arrow: true,
       placement: "bottom",
-      title: jsxRuntime.jsx(material.Typography, {
-        color: "text.primary",
+      title: jsxRuntime.jsx(edsMaterial.Typography, {
+        sx: {
+          color: 'text.primary'
+        },
         children: intl$1.formatMessage({
           id: 'runbox.timer.tooltip.title'
         })
@@ -118,23 +120,25 @@ var MaterialRunboxTimer = function MaterialRunboxTimer(_ref3) {
         variant: isAlmostEnd ? 'filled' : 'outlined',
         color: isAlmostEnd ? 'warning' : 'default',
         size: isSmallTabletOrSmaller ? 'small' : 'medium',
-        icon: jsxRuntime.jsx(muiElements.EliceIcon, {
+        icon: jsxRuntime.jsx(edsKit.FaIcon, {
           icon: proSolidSvgIcons.faTimer
         }),
         "data-active": isTimerDetailPopoverOpen,
         label: jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [jsxRuntime.jsx(material.Typography, {
+          children: [jsxRuntime.jsx(edsMaterial.Typography, {
             component: "span",
             variant: "body1",
             children: intl$1.formatMessage({
               id: 'runbox.timer.title'
             })
-          }), jsxRuntime.jsx(material.Typography, {
+          }), jsxRuntime.jsx(edsMaterial.Typography, {
             component: "span",
             variant: "body1",
-            fontWeight: "bold",
-            whiteSpace: "pre",
-            display: "inline-block",
+            sx: {
+              display: 'inline-block',
+              whiteSpace: 'pre',
+              fontWeight: 'bold'
+            },
             children: quotaInfo.isUnlimited ? " : ".concat(intl$1.formatMessage({
               id: 'runbox.timer.unlimited'
             })) : " ".concat(timeString)

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

@@ -1,4 +1,4 @@
-import type { PopoverProps } from '@mui/material';
+import type { PopoverProps } from '@elice/eds-material';
 interface MaterialRunboxTimerDetailPopoverProps extends PopoverProps {
     userId: number | undefined;
     open: boolean;

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

@@ -7,11 +7,11 @@ var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var reactUse = require('react-use');
 var apiClient = require('@elice/api-client');
+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 proRegularSvgIcons = require('@fortawesome/pro-regular-svg-icons');
-var material = require('@mui/material');
 var reactQuery = require('@tanstack/react-query');
 var useRunboxSessionEndWarning = require('../hooks/useRunboxSessionEndWarning.js');
 var MaterialRunboxQuotaAmount = require('./MaterialRunboxQuotaAmount.js');
@@ -79,13 +79,13 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
    *
    */
   var renderCloseButton = function renderCloseButton() {
-    return jsxRuntime.jsx(material.IconButton, {
+    return jsxRuntime.jsx(edsMaterial.IconButton, {
       sx: {
         position: 'absolute',
         top: '1rem',
         right: '1rem'
       },
-      children: jsxRuntime.jsx(muiElements.EliceIcon, {
+      children: jsxRuntime.jsx(edsKit.FaIcon, {
         icon: proRegularSvgIcons.faXmarkLarge,
         onClick: handleClickClose
       })
@@ -96,19 +96,25 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
    */
   var renderHeader = function renderHeader() {
     var _a;
-    return jsxRuntime.jsxs(material.Stack, {
+    return jsxRuntime.jsxs(edsMaterial.Stack, {
       direction: "column",
-      width: "100%",
-      gap: "0.5rem",
-      children: [jsxRuntime.jsx(material.Typography, {
+      sx: {
+        gap: '0.5rem',
+        width: '100%'
+      },
+      children: [jsxRuntime.jsx(edsMaterial.Typography, {
         variant: "subtitle2",
-        fontWeight: "extraBold",
+        sx: {
+          fontWeight: 'extraBold'
+        },
         children: intl$1.formatMessage({
           id: 'runbox.timer.popover.title'
         })
-      }), jsxRuntime.jsx(material.Typography, {
+      }), jsxRuntime.jsx(edsMaterial.Typography, {
         variant: "body2",
-        whiteSpace: "pre-line",
+        sx: {
+          whiteSpace: 'pre-line'
+        },
         children: intl$1.formatMessage({
           id: 'runbox.timer.popover.description'
         }, {
@@ -122,20 +128,26 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
    */
   var renderQuotaTotal = function renderQuotaTotal() {
     if (quotaInfo.isUnlimited) {
-      return jsxRuntime.jsxs(material.Stack, {
+      return jsxRuntime.jsxs(edsMaterial.Stack, {
         direction: "column",
-        gap: "0.5rem",
-        padding: "1rem",
-        children: [jsxRuntime.jsx(material.Typography, {
+        sx: {
+          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'
           })
-        }), jsxRuntime.jsx(material.Typography, {
+        }), jsxRuntime.jsx(edsMaterial.Typography, {
           component: "span",
           variant: "h5",
-          fontWeight: "extraBold",
+          sx: {
+            fontWeight: 'extraBold'
+          },
           children: intl$1.formatMessage({
             id: 'runbox.timer.unlimited'
           })
@@ -144,14 +156,18 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
     }
     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, {
+    return jsxRuntime.jsxs(edsMaterial.Stack, {
       direction: "column",
-      gap: "0.5rem",
-      padding: "1rem",
-      bgcolor: quotaBgColor,
-      children: [jsxRuntime.jsx(material.Typography, {
+      sx: {
+        bgcolor: quotaBgColor,
+        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'
         })
@@ -167,9 +183,11 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
    */
   var renderQuotaPerSession = function renderQuotaPerSession() {
     if (quotaPerSessionInfo.isUnlimited) {
-      return jsxRuntime.jsxs(material.Typography, {
+      return jsxRuntime.jsxs(edsMaterial.Typography, {
         variant: "body2",
-        fontWeight: "bold",
+        sx: {
+          fontWeight: 'bold'
+        },
         children: [intl$1.formatMessage({
           id: 'runbox.timer.popover.quota_per_session.title'
         }), " : ", intl$1.formatMessage({
@@ -179,14 +197,18 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
     }
     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, {
+    return jsxRuntime.jsxs(edsMaterial.Stack, {
       direction: "column",
-      gap: "0.5rem",
-      padding: "1rem",
-      bgcolor: perSessionBgColor,
-      children: [jsxRuntime.jsx(material.Typography, {
+      sx: {
+        bgcolor: perSessionBgColor,
+        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'
         })
@@ -194,9 +216,11 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
         remainingQuota: quotaPerSessionInfo.remainingQuota,
         quota: quotaPerSessionInfo.quota,
         color: perSessionColor
-      }), jsxRuntime.jsx(material.Typography, {
+      }), jsxRuntime.jsx(edsMaterial.Typography, {
         variant: "body2",
-        color: "text.tertiary",
+        sx: {
+          color: 'text.tertiary'
+        },
         children: intl$1.formatMessage({
           id: 'runbox.timer.popover.quota_per_session.description'
         }, {
@@ -209,25 +233,29 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
       })]
     });
   };
-  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, {
-      position: "relative",
+    slots: {
+      transition: edsMaterial.Fade
+    },
+    children: jsxRuntime.jsxs(edsMaterial.Stack, {
       direction: "column",
-      padding: "1.5rem",
-      gap: "1rem",
-      width: "22rem",
-      bgcolor: "background.paper",
-      children: [renderHeader(), renderCloseButton(), jsxRuntime.jsxs(material.Card, {
+      sx: {
+        bgcolor: 'background.paper',
+        width: '22rem',
+        gap: '1rem',
+        padding: '1.5rem',
+        position: 'relative'
+      },
+      children: [renderHeader(), renderCloseButton(), jsxRuntime.jsxs(edsMaterial.Card, {
         elevation: 0,
         sx: {
           bgcolor: 'background.neutral'
         },
-        children: [renderQuotaTotal(), jsxRuntime.jsx(material.Divider, {}), renderQuotaPerSession()]
-      }), jsxRuntime.jsx(material.Button, {
+        children: [renderQuotaTotal(), jsxRuntime.jsx(edsMaterial.Divider, {}), renderQuotaPerSession()]
+      }), jsxRuntime.jsx(edsMaterial.Button, {
         fullWidth: true,
         variant: "contained",
         size: "medium",
@@ -236,15 +264,15 @@ var MaterialRunboxTimerDetailPopover = function MaterialRunboxTimerDetailPopover
         children: intl$1.formatMessage({
           id: 'runbox.timer.popover.quota.disconnect'
         })
-      }), jsxRuntime.jsx(material.FormControlLabel, {
-        control: jsxRuntime.jsx(material.Checkbox, {
+      }), jsxRuntime.jsx(edsMaterial.FormControlLabel, {
+        control: jsxRuntime.jsx(edsMaterial.Checkbox, {
           size: "small",
           checked: notShowTimerDetailPopoverOnStart,
           onChange: function onChange(event) {
             return setNotShowTimerDetailPopoverOnStart(event.target.checked);
           }
         }),
-        label: jsxRuntime.jsx(material.Typography, {
+        label: jsxRuntime.jsx(edsMaterial.Typography, {
           variant: "body2",
           children: intl$1.formatMessage({
             id: 'runbox.timer.popover.do_not_open'

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

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

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

@@ -1,11 +1,11 @@
 'use strict';
 
-var material = require('@mui/material');
+var edsMaterial = require('@elice/eds-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));
+  var theme = edsMaterial.useTheme();
+  var matches = edsMaterial.useMediaQuery(theme.breakpoints[query](key));
   return matches;
 };
 

package/cjs/components/shared/material-runbox-snackbar/MaterialRunboxSnackbar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SxProps, Theme } from '@mui/material';
+import type { SxProps, Theme } from '@elice/eds-material';
 interface MaterialRunboxSnackbarProps {
     snackbarKey: string;
     runboxId: string;

package/cjs/components/shared/material-runbox-snackbar/MaterialRunboxSnackbar.js

@@ -6,10 +6,10 @@ var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHel
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactUse = require('react-use');
-var muiElements = require('@elice/mui-elements');
-var muiXSnackbar = require('@elice/mui-x-snackbar');
+var edsKit = require('@elice/eds-kit');
+var edsMaterial = require('@elice/eds-material');
+var edsXSnackbar = require('@elice/eds-x-snackbar');
 var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
-var material = require('@mui/material');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -29,7 +29,7 @@ var MaterialRunboxSnackbar = function MaterialRunboxSnackbar(_ref) {
     open = _ref.open,
     once = _ref.once,
     sx = _ref.sx;
-  var _useSnackbar = muiXSnackbar.useSnackbar(),
+  var _useSnackbar = edsXSnackbar.useSnackbar(),
     enqueueSnackbar = _useSnackbar.enqueueSnackbar,
     closeSnackbar = _useSnackbar.closeSnackbar;
   var _useLocalStorage = reactUse.useLocalStorage("MaterialRunboxSnackbar.".concat(snackbarKey, ".wasOpened"), {}),
@@ -49,21 +49,22 @@ var MaterialRunboxSnackbar = function MaterialRunboxSnackbar(_ref) {
         });
       }
     }
-    enqueueSnackbar(jsxRuntime.jsxs(material.Stack, {
+    enqueueSnackbar(jsxRuntime.jsxs(edsMaterial.Stack, {
       direction: "row",
-      alignItems: "center",
-      gap: "0.75rem",
-      sx: sx,
-      children: [jsxRuntime.jsx(muiElements.EliceIcon, {
+      sx: [{
+        alignItems: 'center',
+        gap: '0.75rem'
+      }].concat(_rollupPluginBabelHelpers.toConsumableArray(Array.isArray(sx) ? sx : [sx])),
+      children: [jsxRuntime.jsx(edsKit.FaIcon, {
         color: "warning",
         icon: proSolidSvgIcons.faWarning
-      }), message, jsxRuntime.jsx(material.IconButton, {
+      }), message, jsxRuntime.jsx(edsMaterial.IconButton, {
         size: "medium",
         color: "inherit",
         onClick: function onClick() {
           return closeSnackbar(snackbarKey);
         },
-        children: jsxRuntime.jsx(muiElements.EliceIcon, {
+        children: jsxRuntime.jsx(edsKit.FaIcon, {
           icon: proSolidSvgIcons.faXmark,
           sx: {
             margin: 'auto !important'

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

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
-import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
 
 //
 //

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

@@ -1,7 +1,7 @@
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
+import { ThemeProvider } from '@elice/eds-material';
 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';

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

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
+import { Alert, AlertTitle } from '@elice/eds-material';
 import { useRawEliceIntl } from '@elice/intl';
-import { Alert, AlertTitle } from '@mui/material';
 import { useMaterialRunboxRunboxIdStarterGet } from './hooks/useMaterialRunboxRunboxIdStarterGet.js';
 
 var MaterialRunboxAlert = function MaterialRunboxAlert(_ref) {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { TagProps } from '@elice/mui-elements';
+import type { TagProps } from '@elice/eds-kit';
 import type { MaterialRunboxHeaderProps } from './MaterialRunboxHeader';
 export type GetAchievementColor = {
     (params: {