@elice/material-external 1.251120.1 → 1.260128.0-rc.0

package/cjs/_virtual/_rollupPluginBabelHelpers.js

@@ -1,51 +1,50 @@
 'use strict';
 
-function _iterableToArrayLimit(arr, i) {
-  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
-  if (null != _i) {
-    var _s,
-      _e,
-      _x,
-      _r,
-      _arr = [],
-      _n = !0,
-      _d = !1;
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
     try {
-      if (_x = (_i = _i.call(arr)).next, 0 === i) ; else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
-    } catch (err) {
-      _d = !0, _e = err;
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
     } finally {
       try {
-        if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
       } finally {
-        if (_d) throw _e;
+        if (o) throw n;
       }
     }
-    return _arr;
+    return a;
   }
 }
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
 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 _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
 
 exports.arrayLikeToArray = _arrayLikeToArray;
 exports.arrayWithHoles = _arrayWithHoles;

package/cjs/components/material-external/MaterialExternal.d.ts

@@ -1,6 +1,7 @@
-import React from 'react';
 import type { WithIntlComponentBuilderProps } from '@elice/intl';
-export interface MaterialExternalProps {
+import type React from 'react';
+import type { MaterialExternalIframeSDKCommunicationProps } from './MaterialExternalIframe';
+export interface MaterialExternalProps extends MaterialExternalIframeSDKCommunicationProps {
     className?: string;
     materialExternalId: number;
     /** metadata logging */

package/cjs/components/material-external/MaterialExternal.js

@@ -2,29 +2,51 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var intl = require('@elice/intl');
 var classnames = require('classnames');
-var en = require('./locales/en.json.js');
-var ko = require('./locales/ko.json.js');
 var MaterialExternalAdminContent = require('./MaterialExternalAdminContent.js');
 var MaterialExternalContent = require('./MaterialExternalContent.js');
-var MaterialExternal_styled = require('./MaterialExternal.styled.js');
+var en = require('./locales/en.json.js');
+var ko = require('./locales/ko.json.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 var classnames__default = /*#__PURE__*/_interopDefaultCompat(classnames);
 
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+//
+//
+//
+var ExternalContainer = /*#__PURE__*/_styled__default.default("div", {
+  target: "edzebp10"
+})("production" === "production" ? {
+  name: "1b2cl51",
+  styles: "display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;background-color:#fff"
+} : {
+  name: "1b2cl51",
+  styles: "display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;background-color:#fff",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+//
+//
+//
 var MaterialExternal = function MaterialExternal(_ref) {
   var materialExternalId = _ref.materialExternalId,
     userId = _ref.userId,
     className = _ref.className,
     courseId = _ref.courseId,
+    hasNextLecturePage = _ref.hasNextLecturePage,
+    hasPreviousLecturePage = _ref.hasPreviousLecturePage,
+    onNavigateNextLecturePage = _ref.onNavigateNextLecturePage,
+    onNavigatePreviousLecturePage = _ref.onNavigatePreviousLecturePage,
     __intl = _ref.__intl;
   var prefixCls = 'em-material-external';
   return jsxRuntime.jsx(intl.RawEliceIntlProvider, {
     value: __intl,
-    children: jsxRuntime.jsx(MaterialExternal_styled.StyledExternalWrap, {
+    children: jsxRuntime.jsx(ExternalContainer, {
       className: classnames__default.default(prefixCls, className),
       children: userId ? jsxRuntime.jsx(MaterialExternalAdminContent.default, {
         materialExternalId: materialExternalId,
@@ -32,11 +54,15 @@ var MaterialExternal = function MaterialExternal(_ref) {
         userId: userId
       }) : jsxRuntime.jsx(MaterialExternalContent.default, {
         materialExternalId: materialExternalId,
-        courseId: courseId
+        courseId: courseId,
+        hasNextLecturePage: hasNextLecturePage,
+        hasPreviousLecturePage: hasPreviousLecturePage,
+        onNavigateNextLecturePage: onNavigateNextLecturePage,
+        onNavigatePreviousLecturePage: onNavigatePreviousLecturePage
       })
     })
   });
 };
-var MaterialExternal$1 = new intl.IntlComponentBuilder(MaterialExternal).add('en', en.default).add('ko', ko.default).addAsync('th', Promise.resolve().then(function () { return require('./locales/th.json.js'); })).addAsync('ja', Promise.resolve().then(function () { return require('./locales/ja.json.js'); })).build();
+var MaterialExternal_default = new intl.IntlComponentBuilder(MaterialExternal).add('en', en.default).add('ko', ko.default).addAsync('th', Promise.resolve().then(function () { return require('./locales/th.json.js'); })).addAsync('ja', Promise.resolve().then(function () { return require('./locales/ja.json.js'); })).build();
 
-exports.default = MaterialExternal$1;
+exports.default = MaterialExternal_default;

package/cjs/components/material-external/MaterialExternalAdminContent.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-export interface MaterialExternalContentProps {
+import type React from 'react';
+export interface MaterialExternalAdminContentProps {
     materialExternalId: number;
     userId: number;
     courseId?: number;
 }
-declare const MaterialExternalContent: React.FC<MaterialExternalContentProps>;
-export default MaterialExternalContent;
+declare const MaterialExternalAdminContent: React.FC<MaterialExternalAdminContentProps>;
+export default MaterialExternalAdminContent;

package/cjs/components/material-external/MaterialExternalAdminContent.js

@@ -2,51 +2,47 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var apiClient = require('@elice/api-client');
-var blocks = require('@elice/blocks');
 var intl = require('@elice/intl');
+var material = require('@mui/material');
+var reactQuery = require('@tanstack/react-query');
 var MaterialExternalIframe = require('./MaterialExternalIframe.js');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-var MaterialExternalContent = function MaterialExternalContent(_ref) {
+//
+//
+//
+var MaterialExternalAdminContent = function MaterialExternalAdminContent(_ref) {
   var materialExternalId = _ref.materialExternalId,
     userId = _ref.userId,
     courseId = _ref.courseId;
   var intl$1 = intl.useRawEliceIntl();
-  var _React$useState = React__default.default.useState(''),
-    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
-    externalUrl = _React$useState2[0],
-    setExternalUrl = _React$useState2[1];
-  var _React$useState3 = React__default.default.useState('idle'),
-    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
-    externalGetStatus = _React$useState4[0],
-    setExternalGetStatus = _React$useState4[1];
-  React__default.default.useEffect(function () {
-    if (materialExternalId && userId) {
-      setExternalGetStatus('pending');
-      apiClient.getOrgMaterialExternalTutorExternalUrlGet({
-        materialExternalId: materialExternalId,
-        userId: userId
-      }).then(function (value) {
-        setExternalUrl(value.externalUrl);
-        setExternalGetStatus('resolved');
-      }).catch(function () {
-        return setExternalGetStatus('rejected');
-      });
-    }
-  }, [materialExternalId, userId]);
-  if (externalGetStatus === 'pending') {
-    return jsxRuntime.jsx(blocks.Spinner, {});
+  var _useQuery = reactQuery.useQuery({
+      queryKey: ['materialExternalAdminContent', materialExternalId, userId],
+      queryFn: function queryFn(_ref2) {
+        var signal = _ref2.signal;
+        return apiClient.getOrgMaterialExternalTutorExternalUrlGet({
+          materialExternalId: materialExternalId,
+          userId: userId
+        }, {
+          signal: signal
+        });
+      },
+      select: function select(data) {
+        return data.externalUrl;
+      }
+    }),
+    externalUrl = _useQuery.data,
+    isLoading = _useQuery.isLoading,
+    isError = _useQuery.isError;
+  //
+  //
+  //
+  if (isLoading) {
+    return jsxRuntime.jsx(material.CircularProgress, {});
   }
-  if (externalGetStatus === 'rejected' || !externalUrl) {
-    return jsxRuntime.jsx(blocks.Text, {
-      role: "white",
+  if (isError || !externalUrl) {
+    return jsxRuntime.jsx(material.Typography, {
       children: intl$1.formatMessage({
         id: 'external.status.rejected'
       })
@@ -62,4 +58,4 @@ var MaterialExternalContent = function MaterialExternalContent(_ref) {
   });
 };
 
-exports.default = MaterialExternalContent;
+exports.default = MaterialExternalAdminContent;

package/cjs/components/material-external/MaterialExternalContent.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-export interface MaterialExternalContentProps {
+import type { MaterialExternalIframeSDKCommunicationProps } from './MaterialExternalIframe';
+export interface MaterialExternalContentProps extends MaterialExternalIframeSDKCommunicationProps {
     materialExternalId: number;
     courseId?: number;
 }

package/cjs/components/material-external/MaterialExternalContent.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var apiClient = require('@elice/api-client');
-var blocks = require('@elice/blocks');
 var intl = require('@elice/intl');
 var materialSharedUtils = require('@elice/material-shared-utils');
 var types = require('@elice/types');
+var material = require('@mui/material');
 var MaterialExternalIframe = require('./MaterialExternalIframe.js');
 var MaterialExternalNewWindow = require('./MaterialExternalNewWindow.js');
 var MaterialExternalNotSupported = require('./MaterialExternalNotSupported.js');
@@ -27,7 +27,11 @@ var LEGACY_RUNBOX_V2_URL_PATTERN = /^https?:\/\/api-runbox\.elice\.io/;
 //
 var MaterialExternalContent = function MaterialExternalContent(_ref) {
   var materialExternalId = _ref.materialExternalId,
-    courseId = _ref.courseId;
+    courseId = _ref.courseId,
+    hasNextLecturePage = _ref.hasNextLecturePage,
+    hasPreviousLecturePage = _ref.hasPreviousLecturePage,
+    onNavigateNextLecturePage = _ref.onNavigateNextLecturePage,
+    onNavigatePreviousLecturePage = _ref.onNavigatePreviousLecturePage;
   var intl$1 = intl.useRawEliceIntl();
   var _useMaterialFetch = materialSharedUtils.useMaterialFetch(types.enums.LectureMaterialType.External, React__default.default.useCallback(function (signal) {
       return apiClient.getOrgMaterialExternalGet({
@@ -39,15 +43,14 @@ var MaterialExternalContent = function MaterialExternalContent(_ref) {
     materialExternal = _useMaterialFetch.materialExternal,
     externalGetStatus = _useMaterialFetch.status;
   if (externalGetStatus === 'rejected') {
-    return jsxRuntime.jsx(blocks.Text, {
-      role: "white",
+    return jsxRuntime.jsx(material.Typography, {
       children: intl$1.formatMessage({
         id: 'external.status.rejected'
       })
     });
   }
   if (externalGetStatus === 'pending' || !materialExternal) {
-    return jsxRuntime.jsx(blocks.Spinner, {});
+    return jsxRuntime.jsx(material.CircularProgress, {});
   }
   /**
    *
@@ -57,7 +60,11 @@ var MaterialExternalContent = function MaterialExternalContent(_ref) {
       case types.enums.MaterialExternalDisplayType.Iframe:
         return jsxRuntime.jsx(MaterialExternalIframe.default, {
           materialExternal: materialExternal,
-          courseId: courseId
+          courseId: courseId,
+          hasNextLecturePage: hasNextLecturePage,
+          hasPreviousLecturePage: hasPreviousLecturePage,
+          onNavigateNextLecturePage: onNavigateNextLecturePage,
+          onNavigatePreviousLecturePage: onNavigatePreviousLecturePage
         });
       case types.enums.MaterialExternalDisplayType.Redirect:
         return jsxRuntime.jsx(MaterialExternalRedirect.default, {

package/cjs/components/material-external/MaterialExternalIframe.d.ts

@@ -1,7 +1,14 @@
 import React from 'react';
 import type { GetOrgMaterialExternalGetResponses } from '@elice/types/es/typings/apis/orgMaterialExternal';
-declare const MaterialExternalIframe: React.FC<{
+export interface MaterialExternalIframeSDKCommunicationProps {
+    hasPreviousLecturePage?: boolean;
+    hasNextLecturePage?: boolean;
+    onNavigatePreviousLecturePage?: () => void;
+    onNavigateNextLecturePage?: () => void;
+}
+export interface MaterialExternalIframeProps extends MaterialExternalIframeSDKCommunicationProps {
     materialExternal: Pick<GetOrgMaterialExternalGetResponses['materialExternal'], 'title' | 'externalUrl' | 'id'>;
     courseId?: number;
-}>;
+}
+declare const MaterialExternalIframe: React.FC<MaterialExternalIframeProps>;
 export default MaterialExternalIframe;

package/cjs/components/material-external/MaterialExternalIframe.js

@@ -2,19 +2,53 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var intl = require('@elice/intl');
-var MaterialExternal_styled = require('./MaterialExternal.styled.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+//
+//
+//
+var ExternalIframe = /*#__PURE__*/_styled__default.default("iframe", {
+  target: "e1bq11yf0"
+})("production" === "production" ? {
+  name: "1nxwo53",
+  styles: "width:100%;height:100%;border:0;background-color:#fff"
+} : {
+  name: "1nxwo53",
+  styles: "width:100%;height:100%;border:0;background-color:#fff",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+//
+//
+//
 var MaterialExternalIframe = function MaterialExternalIframe(_ref) {
   var materialExternal = _ref.materialExternal,
-    courseId = _ref.courseId;
+    courseId = _ref.courseId,
+    _hasNextLecturePage = _ref.hasNextLecturePage,
+    _hasPreviousLecturePage = _ref.hasPreviousLecturePage,
+    _onNavigateNextLecturePage = _ref.onNavigateNextLecturePage,
+    _onNavigatePreviousLecturePage = _ref.onNavigatePreviousLecturePage;
   var intl$1 = intl.useRawEliceIntl();
+  var iframeRef = React__default.default.useRef(null);
+  var hasPreviousLecturePage = React.useRef(_hasPreviousLecturePage);
+  hasPreviousLecturePage.current = _hasPreviousLecturePage;
+  var hasNextLecturePage = React.useRef(_hasNextLecturePage);
+  hasNextLecturePage.current = _hasNextLecturePage;
+  var onNavigatePreviousLecturePage = React.useRef(_onNavigatePreviousLecturePage);
+  onNavigatePreviousLecturePage.current = _onNavigatePreviousLecturePage;
+  var onNavigateNextLecturePage = React.useRef(_onNavigateNextLecturePage);
+  onNavigateNextLecturePage.current = _onNavigateNextLecturePage;
+  /**
+   * Material external URL.
+   */
   var materialExternalUrl = React__default.default.useMemo(function () {
     var externalUrl = new URL(materialExternal.externalUrl);
     externalUrl.searchParams.append('course_id', String(courseId !== null && courseId !== void 0 ? courseId : ''));
@@ -23,10 +57,59 @@ var MaterialExternalIframe = function MaterialExternalIframe(_ref) {
     externalUrl.searchParams.append('locale', intl$1.locale);
     return externalUrl.href;
   }, [materialExternal.externalUrl, materialExternal.id, courseId, intl$1.locale]);
-  return jsxRuntime.jsx(MaterialExternal_styled.StyledExternalDisplay, {
+  //
+  //
+  //
+  React__default.default.useEffect(function () {
+    var iframeEl = iframeRef.current;
+    if (!iframeEl) {
+      return;
+    }
+    var __handle = function __handle(e) {
+      var _a, _b, _c;
+      if (e.data.from === 'eliceio-contents-sdk') {
+        switch (e.data.type) {
+          // navigation - prev
+          case 'navigate-prev':
+            {
+              (_a = onNavigatePreviousLecturePage.current) === null || _a === void 0 ? void 0 : _a.call(onNavigatePreviousLecturePage);
+              break;
+            }
+          // navigation - next
+          case 'navigate-next':
+            {
+              (_b = onNavigateNextLecturePage.current) === null || _b === void 0 ? void 0 : _b.call(onNavigateNextLecturePage);
+              break;
+            }
+          // navigation - state-sync
+          case 'navigate-state-sync':
+            {
+              (_c = iframeEl.contentWindow) === null || _c === void 0 ? void 0 : _c.postMessage(Object.assign(Object.assign({}, e.data), {
+                from: 'elice-web',
+                type: 'navigate-state-sync',
+                payload: {
+                  hasNextLecturePage: hasNextLecturePage.current,
+                  hasPreviousLecturePage: hasPreviousLecturePage.current
+                }
+              }), '*');
+              break;
+            }
+        }
+      }
+    };
+    window.addEventListener('message', __handle);
+    return function () {
+      window.removeEventListener('message', __handle);
+    };
+  }, []);
+  //
+  //
+  //
+  return jsxRuntime.jsx(ExternalIframe, {
     title: materialExternal.title,
     src: materialExternalUrl,
-    allow: "clipboard-read; clipboard-write; camera *; microphone *; bluetooth *; fullscreen;"
+    allow: "clipboard-read; clipboard-write; camera *; microphone *; bluetooth *; fullscreen;",
+    ref: iframeRef
   });
 };
 

package/cjs/components/material-external/MaterialExternalNewWindow.js

@@ -5,15 +5,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var blocks = require('@elice/blocks');
-var designTokens = require('@elice/design-tokens');
 var intl = require('@elice/intl');
+var material = require('@mui/material');
 var calendar = require('../../assets/calendar.png.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
+//
+//
+//
 var MaterialExternalNewWindow = function MaterialExternalNewWindow(_ref) {
   var materialExternal = _ref.materialExternal;
   var intl$1 = intl.useRawEliceIntl();
@@ -36,53 +38,58 @@ var MaterialExternalNewWindow = function MaterialExternalNewWindow(_ref) {
   /**
    *
    */
-  var newTabReOpenContentPage = jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(blocks.SafeImage, {
-      src: calendar.default,
-      width: "8rem",
-      height: "6rem",
-      alt: "newWindow"
-    }), jsxRuntime.jsx(blocks.Vspace, {
-      height: 1
-    }), jsxRuntime.jsx(blocks.Text, {
-      role: "white",
-      size: "large",
-      bold: true,
-      children: intl$1.formatMessage({
-        id: 'external.newWindow.title'
-      })
-    }), jsxRuntime.jsx(blocks.Vspace, {
-      height: 0.75
-    }), jsxRuntime.jsx(blocks.Text, {
-      role: "white",
-      size: "small",
-      children: intl$1.formatMessage({
-        id: 'external.newWindow.description'
-      })
-    }), jsxRuntime.jsx(blocks.Vspace, {
-      height: 2
-    }), jsxRuntime.jsx(blocks.Button, {
+  var newTabReOpenContentPage = jsxRuntime.jsxs(material.Stack, {
+    gap: "2rem",
+    alignItems: "center",
+    children: [jsxRuntime.jsxs(material.Stack, {
+      gap: "1rem",
+      alignItems: "center",
+      children: [jsxRuntime.jsx(material.Box, {
+        component: "img",
+        src: calendar.default,
+        alt: "newWindow",
+        sx: {
+          width: '8rem',
+          height: '6rem'
+        }
+      }), jsxRuntime.jsxs(material.Stack, {
+        gap: "0.25rem",
+        alignItems: "center",
+        children: [jsxRuntime.jsx(material.Typography, {
+          variant: "h6",
+          color: "text.primary",
+          textAlign: "center",
+          children: intl$1.formatMessage({
+            id: 'external.newWindow.title'
+          })
+        }), jsxRuntime.jsx(material.Typography, {
+          variant: "body2",
+          color: "text.secondary",
+          textAlign: "center",
+          children: intl$1.formatMessage({
+            id: 'external.newWindow.description'
+          })
+        })]
+      })]
+    }), jsxRuntime.jsx(material.Button, {
       size: "small",
       onClick: function onClick() {
         return window.open(materialExternal === null || materialExternal === void 0 ? void 0 : materialExternal.externalUrl);
       },
-      children: jsxRuntime.jsx(blocks.Text, {
-        size: "small",
-        customStyles: {
-          color: designTokens.base.color.navy0
-        },
-        children: intl$1.formatMessage({
-          id: 'external.newWindow.button.label'
-        })
+      children: intl$1.formatMessage({
+        id: 'external.newWindow.button.label'
       })
     })]
   });
   /**
    * Open new tab external page after 5 seconds.
    */
-  var waitExternalPage = jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(blocks.Spinner, {}), jsxRuntime.jsx(blocks.Text, {
-      role: "white",
+  var waitExternalPage = jsxRuntime.jsxs(material.Stack, {
+    gap: "0.5rem",
+    alignItems: "center",
+    children: [jsxRuntime.jsx(material.CircularProgress, {}), jsxRuntime.jsx(material.Typography, {
+      variant: "body2",
+      color: "text.secondary",
       children: intl$1.formatMessage({
         id: 'external.loader.newWindow.description'
       })

package/cjs/components/material-external/MaterialExternalNotSupported.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import type React from 'react';
 declare const MaterialExternalNotSupported: React.FC;
 export default MaterialExternalNotSupported;

package/cjs/components/material-external/MaterialExternalNotSupported.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var designTokens = require('@elice/design-tokens');
 var intl = require('@elice/intl');
 var material = require('@mui/material');
 var emptyDefault = require('../../assets/empty-default.png.js');
@@ -22,7 +21,7 @@ var MaterialExternalNotSupported = function MaterialExternalNotSupported() {
       justifyContent: "center",
       alignItems: "center",
       padding: "2rem",
-      bgcolor: designTokens.base.color.navy9,
+      bgcolor: "#fff",
       gap: "2rem",
       width: "100%",
       height: "100%",

package/cjs/components/material-external/MaterialExternalRedirect.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { GetOrgMaterialExternalGetResponses } from '@elice/types/es/typings/apis/orgMaterialExternal';
+import type { GetOrgMaterialExternalGetResponses } from '@elice/types';
 declare const MaterialExternalRedirect: React.FC<GetOrgMaterialExternalGetResponses>;
 export default MaterialExternalRedirect;