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

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

@@ -4,13 +4,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var blocks = require('@elice/blocks');
 var intl = require('@elice/intl');
+var material = require('@mui/material');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
+//
+//
+//
 var MaterialExternalRedirect = function MaterialExternalRedirect(_ref) {
   var materialExternal = _ref.materialExternal;
   var intl$1 = intl.useRawEliceIntl();
@@ -25,9 +28,13 @@ var MaterialExternalRedirect = function MaterialExternalRedirect(_ref) {
       window.clearTimeout(timeoutId);
     };
   }, [materialExternal]);
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(blocks.Spinner, {}), jsxRuntime.jsx(blocks.Text, {
-      role: "white",
+  return jsxRuntime.jsxs(material.Stack, {
+    gap: "0.5rem",
+    alignItems: "center",
+    children: [jsxRuntime.jsx(material.CircularProgress, {}), jsxRuntime.jsx(material.Typography, {
+      variant: "body2",
+      color: "text.secondary",
+      textAlign: "center",
       children: intl$1.formatMessage({
         id: 'external.loader.redirect.description'
       })

package/es/_virtual/_rollupPluginBabelHelpers.js

@@ -1,48 +1,47 @@
-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;
+  }
+}
 
 export { _arrayLikeToArray as arrayLikeToArray, _arrayWithHoles as arrayWithHoles, _iterableToArrayLimit as iterableToArrayLimit, _nonIterableRest as nonIterableRest, _slicedToArray as slicedToArray, _unsupportedIterableToArray as unsupportedIterableToArray };

package/es/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/es/components/material-external/MaterialExternal.js

@@ -1,34 +1,59 @@
+import _styled from '@emotion/styled/base';
 import { jsx } from 'react/jsx-runtime';
 import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
 import classnames from 'classnames';
+import MaterialExternalAdminContent from './MaterialExternalAdminContent.js';
+import MaterialExternalContent from './MaterialExternalContent.js';
 import messageEn from './locales/en.json.js';
 import messageKo from './locales/ko.json.js';
-import MaterialExternalContent from './MaterialExternalAdminContent.js';
-import MaterialExternalContent$1 from './MaterialExternalContent.js';
-import { StyledExternalWrap } from './MaterialExternal.styled.js';
 
+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("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 jsx(RawEliceIntlProvider, {
     value: __intl,
-    children: jsx(StyledExternalWrap, {
+    children: jsx(ExternalContainer, {
       className: classnames(prefixCls, className),
-      children: userId ? jsx(MaterialExternalContent, {
+      children: userId ? jsx(MaterialExternalAdminContent, {
         materialExternalId: materialExternalId,
         courseId: courseId,
         userId: userId
-      }) : jsx(MaterialExternalContent$1, {
+      }) : jsx(MaterialExternalContent, {
         materialExternalId: materialExternalId,
-        courseId: courseId
+        courseId: courseId,
+        hasNextLecturePage: hasNextLecturePage,
+        hasPreviousLecturePage: hasPreviousLecturePage,
+        onNavigateNextLecturePage: onNavigateNextLecturePage,
+        onNavigatePreviousLecturePage: onNavigatePreviousLecturePage
       })
     })
   });
 };
-var MaterialExternal$1 = new IntlComponentBuilder(MaterialExternal).add('en', messageEn).add('ko', messageKo).addAsync('th', import('./locales/th.json.js')).addAsync('ja', import('./locales/ja.json.js')).build();
+var MaterialExternal_default = new IntlComponentBuilder(MaterialExternal).add('en', messageEn).add('ko', messageKo).addAsync('th', import('./locales/th.json.js')).addAsync('ja', import('./locales/ja.json.js')).build();
 
-export { MaterialExternal$1 as default };
+export { MaterialExternal_default as default };

package/es/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/es/components/material-external/MaterialExternalAdminContent.js

@@ -1,44 +1,44 @@
-import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx } from 'react/jsx-runtime';
-import React from 'react';
 import { getOrgMaterialExternalTutorExternalUrlGet } from '@elice/api-client';
-import { Spinner, Text } from '@elice/blocks';
 import { useRawEliceIntl } from '@elice/intl';
+import { CircularProgress, Typography } from '@mui/material';
+import { useQuery } from '@tanstack/react-query';
 import MaterialExternalIframe from './MaterialExternalIframe.js';
 
-var MaterialExternalContent = function MaterialExternalContent(_ref) {
+//
+//
+//
+var MaterialExternalAdminContent = function MaterialExternalAdminContent(_ref) {
   var materialExternalId = _ref.materialExternalId,
     userId = _ref.userId,
     courseId = _ref.courseId;
   var intl = useRawEliceIntl();
-  var _React$useState = React.useState(''),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    externalUrl = _React$useState2[0],
-    setExternalUrl = _React$useState2[1];
-  var _React$useState3 = React.useState('idle'),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    externalGetStatus = _React$useState4[0],
-    setExternalGetStatus = _React$useState4[1];
-  React.useEffect(function () {
-    if (materialExternalId && userId) {
-      setExternalGetStatus('pending');
-      getOrgMaterialExternalTutorExternalUrlGet({
-        materialExternalId: materialExternalId,
-        userId: userId
-      }).then(function (value) {
-        setExternalUrl(value.externalUrl);
-        setExternalGetStatus('resolved');
-      }).catch(function () {
-        return setExternalGetStatus('rejected');
-      });
-    }
-  }, [materialExternalId, userId]);
-  if (externalGetStatus === 'pending') {
-    return jsx(Spinner, {});
+  var _useQuery = useQuery({
+      queryKey: ['materialExternalAdminContent', materialExternalId, userId],
+      queryFn: function queryFn(_ref2) {
+        var signal = _ref2.signal;
+        return 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 jsx(CircularProgress, {});
   }
-  if (externalGetStatus === 'rejected' || !externalUrl) {
-    return jsx(Text, {
-      role: "white",
+  if (isError || !externalUrl) {
+    return jsx(Typography, {
       children: intl.formatMessage({
         id: 'external.status.rejected'
       })
@@ -54,4 +54,4 @@ var MaterialExternalContent = function MaterialExternalContent(_ref) {
   });
 };
 
-export { MaterialExternalContent as default };
+export { MaterialExternalAdminContent as default };

package/es/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/es/components/material-external/MaterialExternalContent.js

@@ -1,10 +1,10 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import React from 'react';
 import { getOrgMaterialExternalGet, config } from '@elice/api-client';
-import { Text, Spinner } from '@elice/blocks';
 import { useRawEliceIntl } from '@elice/intl';
 import { useMaterialFetch } from '@elice/material-shared-utils';
 import { enums } from '@elice/types';
+import { Typography, CircularProgress } from '@mui/material';
 import MaterialExternalIframe from './MaterialExternalIframe.js';
 import MaterialExternalNewWindow from './MaterialExternalNewWindow.js';
 import MaterialExternalNotSupported from './MaterialExternalNotSupported.js';
@@ -19,7 +19,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 = useRawEliceIntl();
   var _useMaterialFetch = useMaterialFetch(enums.LectureMaterialType.External, React.useCallback(function (signal) {
       return getOrgMaterialExternalGet({
@@ -31,15 +35,14 @@ var MaterialExternalContent = function MaterialExternalContent(_ref) {
     materialExternal = _useMaterialFetch.materialExternal,
     externalGetStatus = _useMaterialFetch.status;
   if (externalGetStatus === 'rejected') {
-    return jsx(Text, {
-      role: "white",
+    return jsx(Typography, {
       children: intl.formatMessage({
         id: 'external.status.rejected'
       })
     });
   }
   if (externalGetStatus === 'pending' || !materialExternal) {
-    return jsx(Spinner, {});
+    return jsx(CircularProgress, {});
   }
   /**
    *
@@ -49,7 +52,11 @@ var MaterialExternalContent = function MaterialExternalContent(_ref) {
       case enums.MaterialExternalDisplayType.Iframe:
         return jsx(MaterialExternalIframe, {
           materialExternal: materialExternal,
-          courseId: courseId
+          courseId: courseId,
+          hasNextLecturePage: hasNextLecturePage,
+          hasPreviousLecturePage: hasPreviousLecturePage,
+          onNavigateNextLecturePage: onNavigateNextLecturePage,
+          onNavigatePreviousLecturePage: onNavigatePreviousLecturePage
         });
       case enums.MaterialExternalDisplayType.Redirect:
         return jsx(MaterialExternalRedirect, {

package/es/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/es/components/material-external/MaterialExternalIframe.js

@@ -1,12 +1,45 @@
+import _styled from '@emotion/styled/base';
 import { jsx } from 'react/jsx-runtime';
-import React from 'react';
+import React, { useRef } from 'react';
 import { useRawEliceIntl } from '@elice/intl';
-import { StyledExternalDisplay } from './MaterialExternal.styled.js';
 
+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("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 = useRawEliceIntl();
+  var iframeRef = React.useRef(null);
+  var hasPreviousLecturePage = useRef(_hasPreviousLecturePage);
+  hasPreviousLecturePage.current = _hasPreviousLecturePage;
+  var hasNextLecturePage = useRef(_hasNextLecturePage);
+  hasNextLecturePage.current = _hasNextLecturePage;
+  var onNavigatePreviousLecturePage = useRef(_onNavigatePreviousLecturePage);
+  onNavigatePreviousLecturePage.current = _onNavigatePreviousLecturePage;
+  var onNavigateNextLecturePage = useRef(_onNavigateNextLecturePage);
+  onNavigateNextLecturePage.current = _onNavigateNextLecturePage;
+  /**
+   * Material external URL.
+   */
   var materialExternalUrl = React.useMemo(function () {
     var externalUrl = new URL(materialExternal.externalUrl);
     externalUrl.searchParams.append('course_id', String(courseId !== null && courseId !== void 0 ? courseId : ''));
@@ -15,10 +48,59 @@ var MaterialExternalIframe = function MaterialExternalIframe(_ref) {
     externalUrl.searchParams.append('locale', intl.locale);
     return externalUrl.href;
   }, [materialExternal.externalUrl, materialExternal.id, courseId, intl.locale]);
-  return jsx(StyledExternalDisplay, {
+  //
+  //
+  //
+  React.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 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/es/components/material-external/MaterialExternalNewWindow.js

@@ -1,11 +1,13 @@
 import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { useState } from 'react';
-import { SafeImage, Vspace, Text, Button, Spinner } from '@elice/blocks';
-import { base } from '@elice/design-tokens';
 import { useRawEliceIntl } from '@elice/intl';
+import { Stack, Box, Typography, Button, CircularProgress } from '@mui/material';
 import img from '../../assets/calendar.png.js';
 
+//
+//
+//
 var MaterialExternalNewWindow = function MaterialExternalNewWindow(_ref) {
   var materialExternal = _ref.materialExternal;
   var intl = useRawEliceIntl();
@@ -28,53 +30,58 @@ var MaterialExternalNewWindow = function MaterialExternalNewWindow(_ref) {
   /**
    *
    */
-  var newTabReOpenContentPage = jsxs(Fragment, {
-    children: [jsx(SafeImage, {
-      src: img,
-      width: "8rem",
-      height: "6rem",
-      alt: "newWindow"
-    }), jsx(Vspace, {
-      height: 1
-    }), jsx(Text, {
-      role: "white",
-      size: "large",
-      bold: true,
-      children: intl.formatMessage({
-        id: 'external.newWindow.title'
-      })
-    }), jsx(Vspace, {
-      height: 0.75
-    }), jsx(Text, {
-      role: "white",
-      size: "small",
-      children: intl.formatMessage({
-        id: 'external.newWindow.description'
-      })
-    }), jsx(Vspace, {
-      height: 2
+  var newTabReOpenContentPage = jsxs(Stack, {
+    gap: "2rem",
+    alignItems: "center",
+    children: [jsxs(Stack, {
+      gap: "1rem",
+      alignItems: "center",
+      children: [jsx(Box, {
+        component: "img",
+        src: img,
+        alt: "newWindow",
+        sx: {
+          width: '8rem',
+          height: '6rem'
+        }
+      }), jsxs(Stack, {
+        gap: "0.25rem",
+        alignItems: "center",
+        children: [jsx(Typography, {
+          variant: "h6",
+          color: "text.primary",
+          textAlign: "center",
+          children: intl.formatMessage({
+            id: 'external.newWindow.title'
+          })
+        }), jsx(Typography, {
+          variant: "body2",
+          color: "text.secondary",
+          textAlign: "center",
+          children: intl.formatMessage({
+            id: 'external.newWindow.description'
+          })
+        })]
+      })]
     }), jsx(Button, {
       size: "small",
       onClick: function onClick() {
         return window.open(materialExternal === null || materialExternal === void 0 ? void 0 : materialExternal.externalUrl);
       },
-      children: jsx(Text, {
-        size: "small",
-        customStyles: {
-          color: base.color.navy0
-        },
-        children: intl.formatMessage({
-          id: 'external.newWindow.button.label'
-        })
+      children: intl.formatMessage({
+        id: 'external.newWindow.button.label'
       })
     })]
   });
   /**
    * Open new tab external page after 5 seconds.
    */
-  var waitExternalPage = jsxs(Fragment, {
-    children: [jsx(Spinner, {}), jsx(Text, {
-      role: "white",
+  var waitExternalPage = jsxs(Stack, {
+    gap: "0.5rem",
+    alignItems: "center",
+    children: [jsx(CircularProgress, {}), jsx(Typography, {
+      variant: "body2",
+      color: "text.secondary",
       children: intl.formatMessage({
         id: 'external.loader.newWindow.description'
       })

package/es/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/es/components/material-external/MaterialExternalNotSupported.js

@@ -1,5 +1,4 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { base } from '@elice/design-tokens';
 import { useRawEliceIntl } from '@elice/intl';
 import { Stack, Box, Typography } from '@mui/material';
 import img from '../../assets/empty-default.png.js';
@@ -18,7 +17,7 @@ var MaterialExternalNotSupported = function MaterialExternalNotSupported() {
       justifyContent: "center",
       alignItems: "center",
       padding: "2rem",
-      bgcolor: base.color.navy9,
+      bgcolor: "#fff",
       gap: "2rem",
       width: "100%",
       height: "100%",

package/es/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;