@elice/material-video-file 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-video-file/MaterialVideoFile.js

@@ -10,11 +10,11 @@ var intl = require('@elice/intl');
 var materialSharedUtils = require('@elice/material-shared-utils');
 var types = require('@elice/types');
 var classnames = require('classnames');
-var en = require('./locales/en.json.js');
-var ko = require('./locales/ko.json.js');
 var MaterialVideoFilePlayer = require('./MaterialVideoFilePlayer.js');
 var useMaterialVideoFileApi = require('./useMaterialVideoFileApi.js');
 var MaterialVideoFile_styled = require('./MaterialVideoFile.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 }; }
 
@@ -65,6 +65,6 @@ var MaterialVideoFile = React.forwardRef(function (_a, ref) {
     })
   });
 });
-var MaterialVideoFile$1 = new intl.IntlComponentBuilder(MaterialVideoFile).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 MaterialVideoFile_default = new intl.IntlComponentBuilder(MaterialVideoFile).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 = MaterialVideoFile$1;
+exports.default = MaterialVideoFile_default;

package/cjs/components/material-video-file/MaterialVideoFile.styled.d.ts

@@ -1 +1,4 @@
-export declare const StyledMaterialVideoFileWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledMaterialVideoFileWrap: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/cjs/components/material-video-file/MaterialVideoFile.styled.js

@@ -1,14 +1,14 @@
 'use strict';
 
+var _styled = require('@emotion/styled/base');
 var designTokens = require('@elice/design-tokens');
-var styled = require('styled-components');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 
-var StyledMaterialVideoFileWrap = styled__default.default.div.withConfig({
-  componentId: "sc-1a1otok-0"
-})(["display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;background:", ";"], designTokens.base.color.gray9);
+var StyledMaterialVideoFileWrap = /*#__PURE__*/_styled__default.default("div", {
+  target: "e7kzwhl0"
+})("display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;background:", designTokens.base.color.gray9, ";");
 
 exports.StyledMaterialVideoFileWrap = StyledMaterialVideoFileWrap;

package/cjs/components/material-video-file/MaterialVideoFilePlayer.js

@@ -114,10 +114,10 @@ var MaterialVideoFilePlayer = React.forwardRef(function (_ref, ref) {
     if (materialVideoFileUploadStatus === VideoUploadStatus.Encoding) {
       return jsxRuntime.jsxs(MaterialVideoFilePlayer_styled.StyledVideoPlayerLoading, {
         children: [jsxRuntime.jsx(blocks.Spinner, {}), jsxRuntime.jsx(blocks.Text, {
+          preWrap: true,
           role: "gray3",
           lineHeight: 1.5,
           textAlign: "center",
-          preWrap: true,
           children: intl$1.formatMessage({
             id: 'videoFile.player.encoding'
           })
@@ -128,10 +128,10 @@ var MaterialVideoFilePlayer = React.forwardRef(function (_ref, ref) {
     if (materialVideoFileUploadStatus === VideoUploadStatus.EncodingFailed) {
       return jsxRuntime.jsx(MaterialVideoFilePlayer_styled.StyledVideoPlayerLoading, {
         children: jsxRuntime.jsx(blocks.Text, {
+          preWrap: true,
           role: "gray3",
           lineHeight: 1.5,
           textAlign: "center",
-          preWrap: true,
           children: intl$1.formatMessage({
             id: 'videoFile.player.encodingFailed'
           })
@@ -170,6 +170,7 @@ var MaterialVideoFilePlayer = React.forwardRef(function (_ref, ref) {
           return res.otp;
         });
       },
+      ref: ref,
       onLecturePageNavigate: function onLecturePageNavigate(dir) {
         if (dir === 'prev' && onNavigatePreviousLecturePage) {
           onNavigatePreviousLecturePage();
@@ -181,8 +182,7 @@ var MaterialVideoFilePlayer = React.forwardRef(function (_ref, ref) {
         if (typeof _onTranscriptToggle === 'function') {
           _onTranscriptToggle(enabled);
         }
-      },
-      ref: ref
+      }
     });
   };
   //

package/cjs/components/material-video-file/MaterialVideoFilePlayer.styled.d.ts

@@ -1,7 +1,17 @@
-/// <reference types="react" />
-export declare const StyledVideoPlayer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("@elice/intl").IntlComponentExtraProps & Omit<import("@elice/intl").IntlComponentExtraProps & Omit<import("@elice/videoplayer-client").EliceVideoplayerProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & {
+export declare const StyledVideoPlayer: import("@emotion/styled").StyledComponent<Omit<import("@elice/intl").IntlComponentExtraProps & Omit<import("@elice/intl").IntlComponentExtraProps & Omit<import("@elice/videoplayer-client").EliceVideoplayerProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & {
     __intl: import("@elice/intl").EliceIntlShape;
-} & import("react").RefAttributes<import("@elice/videoplayer-client").EliceVideoplayerApis>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl">, "ref"> & import("react").RefAttributes<import("@elice/videoplayer-client").EliceVideoplayerApis>>, any, {}, never>;
-export declare const StyledVideoPlayerContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledVideoPlayerLoading: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledVideoPlayerOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
+} & import("react").RefAttributes<import("@elice/videoplayer-client").EliceVideoplayerApis>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl">, "ref"> & import("react").RefAttributes<import("@elice/videoplayer-client").EliceVideoplayerApis> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledVideoPlayerContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledVideoPlayerLoading: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledVideoPlayerOverlay: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/cjs/components/material-video-file/MaterialVideoFilePlayer.styled.js

@@ -1,24 +1,53 @@
 'use strict';
 
+var _styled = require('@emotion/styled/base');
 var videoplayerClient = require('@elice/videoplayer-client');
-var styled = require('styled-components');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 
-var StyledVideoPlayer = styled__default.default(videoplayerClient.EliceVideoplayer).withConfig({
-  componentId: "sc-1ocq3lp-0"
-})(["width:100%;height:100%;border:0;"]);
-var StyledVideoPlayerContainer = styled__default.default.div.withConfig({
-  componentId: "sc-1ocq3lp-1"
-})(["position:relative;width:100%;height:100%;"]);
-var StyledVideoPlayerLoading = styled__default.default.div.withConfig({
-  componentId: "sc-1ocq3lp-2"
-})(["display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;"]);
-var StyledVideoPlayerOverlay = styled__default.default.div.withConfig({
-  componentId: "sc-1ocq3lp-3"
-})(["position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;z-index:1;"]);
+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 StyledVideoPlayer = /*#__PURE__*/_styled__default.default(videoplayerClient.EliceVideoplayer, {
+  target: "e1lqf1nw3"
+})("production" === "production" ? {
+  name: "lkodw",
+  styles: "width:100%;height:100%;border:0"
+} : {
+  name: "lkodw",
+  styles: "width:100%;height:100%;border:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledVideoPlayerContainer = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1lqf1nw2"
+})("production" === "production" ? {
+  name: "zxsb69",
+  styles: "position:relative;width:100%;height:100%"
+} : {
+  name: "zxsb69",
+  styles: "position:relative;width:100%;height:100%",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledVideoPlayerLoading = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1lqf1nw1"
+})("production" === "production" ? {
+  name: "wco9ji",
+  styles: "display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%"
+} : {
+  name: "wco9ji",
+  styles: "display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledVideoPlayerOverlay = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1lqf1nw0"
+})("production" === "production" ? {
+  name: "4gmkgm",
+  styles: "position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;z-index:1"
+} : {
+  name: "4gmkgm",
+  styles: "position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;z-index:1",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 
 exports.StyledVideoPlayer = StyledVideoPlayer;
 exports.StyledVideoPlayerContainer = StyledVideoPlayerContainer;

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-video-file/MaterialVideoFile.js

@@ -6,11 +6,11 @@ import { RawEliceIntlProvider, IntlComponentBuilder } from '@elice/intl';
 import { useMaterialConfig, useMaterialFetch } from '@elice/material-shared-utils';
 import { enums } from '@elice/types';
 import classnames from 'classnames';
-import messageEn from './locales/en.json.js';
-import messageKo from './locales/ko.json.js';
 import MaterialVideoFilePlayer from './MaterialVideoFilePlayer.js';
 import { useMaterialVideoFileApi } from './useMaterialVideoFileApi.js';
 import { StyledMaterialVideoFileWrap } from './MaterialVideoFile.styled.js';
+import messageEn from './locales/en.json.js';
+import messageKo from './locales/ko.json.js';
 
 //
 //
@@ -56,6 +56,6 @@ var MaterialVideoFile = forwardRef(function (_a, ref) {
     })
   });
 });
-var MaterialVideoFile$1 = new IntlComponentBuilder(MaterialVideoFile).add('en', messageEn).add('ko', messageKo).addAsync('th', import('./locales/th.json.js')).addAsync('ja', import('./locales/ja.json.js')).build();
+var MaterialVideoFile_default = new IntlComponentBuilder(MaterialVideoFile).add('en', messageEn).add('ko', messageKo).addAsync('th', import('./locales/th.json.js')).addAsync('ja', import('./locales/ja.json.js')).build();
 
-export { MaterialVideoFile$1 as default };
+export { MaterialVideoFile_default as default };

package/es/components/material-video-file/MaterialVideoFile.styled.d.ts

@@ -1 +1,4 @@
-export declare const StyledMaterialVideoFileWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledMaterialVideoFileWrap: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/es/components/material-video-file/MaterialVideoFile.styled.js

@@ -1,8 +1,8 @@
+import _styled from '@emotion/styled/base';
 import { base } from '@elice/design-tokens';
-import styled from 'styled-components';
 
-var StyledMaterialVideoFileWrap = styled.div.withConfig({
-  componentId: "sc-1a1otok-0"
-})(["display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;background:", ";"], base.color.gray9);
+var StyledMaterialVideoFileWrap = /*#__PURE__*/_styled("div", {
+  target: "e7kzwhl0"
+})("display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;background:", base.color.gray9, ";");
 
 export { StyledMaterialVideoFileWrap };

package/es/components/material-video-file/MaterialVideoFilePlayer.js

@@ -4,7 +4,7 @@ import { Spinner, Text } from '@elice/blocks';
 import { useRawEliceIntl } from '@elice/intl';
 import { enums } from '@elice/types';
 import classnames from 'classnames';
-import { StyledVideoPlayerContainer, StyledVideoPlayerOverlay, StyledVideoPlayer, StyledVideoPlayerLoading } from './MaterialVideoFilePlayer.styled.js';
+import { StyledVideoPlayerContainer, StyledVideoPlayer, StyledVideoPlayerOverlay, StyledVideoPlayerLoading } from './MaterialVideoFilePlayer.styled.js';
 
 //
 //
@@ -105,10 +105,10 @@ var MaterialVideoFilePlayer = forwardRef(function (_ref, ref) {
     if (materialVideoFileUploadStatus === VideoUploadStatus.Encoding) {
       return jsxs(StyledVideoPlayerLoading, {
         children: [jsx(Spinner, {}), jsx(Text, {
+          preWrap: true,
           role: "gray3",
           lineHeight: 1.5,
           textAlign: "center",
-          preWrap: true,
           children: intl.formatMessage({
             id: 'videoFile.player.encoding'
           })
@@ -119,10 +119,10 @@ var MaterialVideoFilePlayer = forwardRef(function (_ref, ref) {
     if (materialVideoFileUploadStatus === VideoUploadStatus.EncodingFailed) {
       return jsx(StyledVideoPlayerLoading, {
         children: jsx(Text, {
+          preWrap: true,
           role: "gray3",
           lineHeight: 1.5,
           textAlign: "center",
-          preWrap: true,
           children: intl.formatMessage({
             id: 'videoFile.player.encodingFailed'
           })
@@ -161,6 +161,7 @@ var MaterialVideoFilePlayer = forwardRef(function (_ref, ref) {
           return res.otp;
         });
       },
+      ref: ref,
       onLecturePageNavigate: function onLecturePageNavigate(dir) {
         if (dir === 'prev' && onNavigatePreviousLecturePage) {
           onNavigatePreviousLecturePage();
@@ -172,8 +173,7 @@ var MaterialVideoFilePlayer = forwardRef(function (_ref, ref) {
         if (typeof _onTranscriptToggle === 'function') {
           _onTranscriptToggle(enabled);
         }
-      },
-      ref: ref
+      }
     });
   };
   //

package/es/components/material-video-file/MaterialVideoFilePlayer.styled.d.ts

@@ -1,7 +1,17 @@
-/// <reference types="react" />
-export declare const StyledVideoPlayer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("@elice/intl").IntlComponentExtraProps & Omit<import("@elice/intl").IntlComponentExtraProps & Omit<import("@elice/videoplayer-client").EliceVideoplayerProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & {
+export declare const StyledVideoPlayer: import("@emotion/styled").StyledComponent<Omit<import("@elice/intl").IntlComponentExtraProps & Omit<import("@elice/intl").IntlComponentExtraProps & Omit<import("@elice/videoplayer-client").EliceVideoplayerProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & {
     __intl: import("@elice/intl").EliceIntlShape;
-} & import("react").RefAttributes<import("@elice/videoplayer-client").EliceVideoplayerApis>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl">, "ref"> & import("react").RefAttributes<import("@elice/videoplayer-client").EliceVideoplayerApis>>, any, {}, never>;
-export declare const StyledVideoPlayerContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledVideoPlayerLoading: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledVideoPlayerOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
+} & import("react").RefAttributes<import("@elice/videoplayer-client").EliceVideoplayerApis>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl">, "ref"> & import("react").RefAttributes<import("@elice/videoplayer-client").EliceVideoplayerApis> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledVideoPlayerContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledVideoPlayerLoading: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledVideoPlayerOverlay: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/es/components/material-video-file/MaterialVideoFilePlayer.styled.js

@@ -1,17 +1,46 @@
+import _styled from '@emotion/styled/base';
 import { EliceVideoplayer } from '@elice/videoplayer-client';
-import styled from 'styled-components';
 
-var StyledVideoPlayer = styled(EliceVideoplayer).withConfig({
-  componentId: "sc-1ocq3lp-0"
-})(["width:100%;height:100%;border:0;"]);
-var StyledVideoPlayerContainer = styled.div.withConfig({
-  componentId: "sc-1ocq3lp-1"
-})(["position:relative;width:100%;height:100%;"]);
-var StyledVideoPlayerLoading = styled.div.withConfig({
-  componentId: "sc-1ocq3lp-2"
-})(["display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;"]);
-var StyledVideoPlayerOverlay = styled.div.withConfig({
-  componentId: "sc-1ocq3lp-3"
-})(["position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;z-index:1;"]);
+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 StyledVideoPlayer = /*#__PURE__*/_styled(EliceVideoplayer, {
+  target: "e1lqf1nw3"
+})("production" === "production" ? {
+  name: "lkodw",
+  styles: "width:100%;height:100%;border:0"
+} : {
+  name: "lkodw",
+  styles: "width:100%;height:100%;border:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledVideoPlayerContainer = /*#__PURE__*/_styled("div", {
+  target: "e1lqf1nw2"
+})("production" === "production" ? {
+  name: "zxsb69",
+  styles: "position:relative;width:100%;height:100%"
+} : {
+  name: "zxsb69",
+  styles: "position:relative;width:100%;height:100%",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledVideoPlayerLoading = /*#__PURE__*/_styled("div", {
+  target: "e1lqf1nw1"
+})("production" === "production" ? {
+  name: "wco9ji",
+  styles: "display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%"
+} : {
+  name: "wco9ji",
+  styles: "display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledVideoPlayerOverlay = /*#__PURE__*/_styled("div", {
+  target: "e1lqf1nw0"
+})("production" === "production" ? {
+  name: "4gmkgm",
+  styles: "position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;z-index:1"
+} : {
+  name: "4gmkgm",
+  styles: "position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;z-index:1",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 
 export { StyledVideoPlayer, StyledVideoPlayerContainer, StyledVideoPlayerLoading, StyledVideoPlayerOverlay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-video-file",
-  "version": "1.251120.1",
+  "version": "1.260128.0-rc.0",
   "description": "User view and editing components of Elice material video file",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -28,15 +28,16 @@
     "@elice/design-tokens": "^1",
     "@elice/icons": "^1",
     "@elice/intl": "^0",
-    "@elice/material-shared-types": "*",
-    "@elice/material-shared-utils": "*",
+    "@elice/material-shared-types": "1.260128.0-rc.0",
+    "@elice/material-shared-utils": "1.260128.0-rc.0",
     "@elice/messenger": "^1",
     "@elice/openapi-client-account": "^1",
     "@elice/types": "^1",
     "@elice/videoplayer-client": "^2",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
     "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
-    "react-use": "^17.0.0",
-    "styled-components": "^5.2.0"
+    "react-use": "^17.0.0"
   },
   "dependencies": {
     "classnames": "^2.2.0",
@@ -50,18 +51,18 @@
     "@elice/icons": "^1.230814.0",
     "@elice/icons-legacy": "npm:@elice/icons@0.230814.0",
     "@elice/intl": "0.241127.0",
-    "@elice/material-shared-types": "1.251120.1",
-    "@elice/material-shared-utils": "1.251120.1",
+    "@elice/material-shared-types": "1.260128.0-rc.0",
+    "@elice/material-shared-utils": "1.260128.0-rc.0",
     "@elice/messenger": "^1.240426.0",
     "@elice/openapi-client-account": "^1.230814.0",
-    "@elice/types": "^1.250612.0-teamleaderboard.1",
+    "@elice/types": "^1.251229.0",
     "@elice/videoplayer-client": "^2.250903.1",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
     "@types/classnames": "^2.3.1",
     "@types/query-string": "^6.3.0",
     "@types/react": "~17.0.9",
-    "@types/styled-components": "^5.1.21",
     "react": "^17.0.2",
-    "react-use": "^17.2.4",
-    "styled-components": "^5.3.0"
+    "react-use": "^17.2.4"
   }
 }