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

package/cjs/components/material-video/MaterialVideo.js

@@ -11,9 +11,9 @@ var intl = require('@elice/intl');
 var materialSharedUtils = require('@elice/material-shared-utils');
 var types = require('@elice/types');
 var classnames = require('classnames');
+var MaterialVideoContent = require('./MaterialVideoContent.js');
 var en = require('./locales/en.json.js');
 var ko = require('./locales/ko.json.js');
-var MaterialVideoContent = require('./MaterialVideoContent.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -50,6 +50,6 @@ var MaterialVideo = function MaterialVideo(_a) {
     })
   });
 };
-var MaterialVideo$1 = new intl.IntlComponentBuilder(MaterialVideo).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 MaterialVideo_default = new intl.IntlComponentBuilder(MaterialVideo).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 = MaterialVideo$1;
+exports.default = MaterialVideo_default;

package/cjs/components/material-video/MaterialVideo.styled.d.ts

@@ -1,2 +1,3 @@
-/// <reference types="react" />
-export declare const StyledMaterialVideoStatus: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledMaterialVideoStatus: import("@emotion/styled").StyledComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/cjs/components/material-video/MaterialVideo.styled.js

@@ -1,14 +1,22 @@
 'use strict';
 
+var _styled = require('@emotion/styled/base');
 var blocks = require('@elice/blocks');
-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 StyledMaterialVideoStatus = styled__default.default(blocks.Flex).withConfig({
-  componentId: "sc-dg3csq-0"
-})(["width:100%;height:100%;background-color:#22222c;"]);
+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 StyledMaterialVideoStatus = /*#__PURE__*/_styled__default.default(blocks.Flex, {
+  target: "ehbshjs0"
+})("production" === "production" ? {
+  name: "r4h982",
+  styles: "width:100%;height:100%;background-color:#22222c"
+} : {
+  name: "r4h982",
+  styles: "width:100%;height:100%;background-color:#22222c",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 
 exports.StyledMaterialVideoStatus = StyledMaterialVideoStatus;

package/cjs/components/material-video/MaterialVideoContent.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
 import type { APIStatus } from '@elice/material-shared-types';
 import type { GetOrgMaterialVideoGetResponses } from '@elice/types';
+import type React from 'react';
 import type { YoutubePlayerSharedProps } from '../youtube-player';
 export interface MaterialVideoContentProps extends YoutubePlayerSharedProps {
     videoGetStatus: APIStatus;

package/cjs/components/material-video/MaterialVideoContent.js

@@ -9,8 +9,8 @@ var designTokens = require('@elice/design-tokens');
 var icons = require('@elice/icons');
 var intl = require('@elice/intl');
 var youtubeUrlParser = require('../../utils/youtubeUrlParser.js');
-var YoutubePlayer = require('../youtube-player/YoutubePlayer.js');
 var MaterialVideo_styled = require('./MaterialVideo.styled.js');
+var YoutubePlayer = require('../youtube-player/YoutubePlayer.js');
 
 var MaterialVideoContent = function MaterialVideoContent(_a) {
   var videoGetStatus = _a.videoGetStatus,

package/cjs/components/youtube-player/YoutubePlayer.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { YouTubeProps } from 'react-youtube';
 type PickedYoutubeProps = Pick<YouTubeProps, 'onReady' | 'onError' | 'onPlay' | 'onPause' | 'onEnd' | 'onStateChange' | 'onPlaybackRateChange' | 'onPlaybackQualityChange'>;
 export interface YoutubePlayerSharedProps extends PickedYoutubeProps {

package/cjs/components/youtube-player/YoutubePlayer.styled.d.ts

@@ -1,2 +1,3 @@
-/// <reference types="react" />
-export declare const StyledYoutubePlayerWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledYoutubePlayerWrapper: import("@emotion/styled").StyledComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/cjs/components/youtube-player/YoutubePlayer.styled.js

@@ -1,14 +1,22 @@
 'use strict';
 
+var _styled = require('@emotion/styled/base');
 var blocks = require('@elice/blocks');
-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 StyledYoutubePlayerWrapper = styled__default.default(blocks.Flex).withConfig({
-  componentId: "sc-ao5iuk-0"
-})(["width:100%;height:100%;background-color:#22222c;& .em-youtube-player__inner{width:90%;height:90%;}"]);
+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 StyledYoutubePlayerWrapper = /*#__PURE__*/_styled__default.default(blocks.Flex, {
+  target: "e11o7hq70"
+})("production" === "production" ? {
+  name: "s6oojq",
+  styles: "width:100%;height:100%;background-color:#22222c;& .em-youtube-player__inner{width:90%;height:90%;}"
+} : {
+  name: "s6oojq",
+  styles: "width:100%;height:100%;background-color:#22222c;& .em-youtube-player__inner{width:90%;height:90%;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 
 exports.StyledYoutubePlayerWrapper = StyledYoutubePlayerWrapper;

package/cjs/components/youtube-player/index.d.ts

@@ -1,2 +1,2 @@
 export { default as YoutubePlayer } from './YoutubePlayer';
-export type { YoutubePlayerProps, YoutubePlayerSharedProps, } from './YoutubePlayer';
+export type { YoutubePlayerProps, YoutubePlayerSharedProps } from './YoutubePlayer';

package/es/components/material-video/MaterialVideo.js

@@ -7,9 +7,9 @@ import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
 import { useMaterialFetch } from '@elice/material-shared-utils';
 import { enums } from '@elice/types';
 import classnames from 'classnames';
+import MaterialVideoContent from './MaterialVideoContent.js';
 import messageEn from './locales/en.json.js';
 import messageKo from './locales/ko.json.js';
-import MaterialVideoContent from './MaterialVideoContent.js';
 
 var MaterialVideo = function MaterialVideo(_a) {
   var className = _a.className,
@@ -41,6 +41,6 @@ var MaterialVideo = function MaterialVideo(_a) {
     })
   });
 };
-var MaterialVideo$1 = new IntlComponentBuilder(MaterialVideo).add('en', messageEn).add('ko', messageKo).addAsync('th', import('./locales/th.json.js')).addAsync('ja', import('./locales/ja.json.js')).build();
+var MaterialVideo_default = new IntlComponentBuilder(MaterialVideo).add('en', messageEn).add('ko', messageKo).addAsync('th', import('./locales/th.json.js')).addAsync('ja', import('./locales/ja.json.js')).build();
 
-export { MaterialVideo$1 as default };
+export { MaterialVideo_default as default };

package/es/components/material-video/MaterialVideo.styled.d.ts

@@ -1,2 +1,3 @@
-/// <reference types="react" />
-export declare const StyledMaterialVideoStatus: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledMaterialVideoStatus: import("@emotion/styled").StyledComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/es/components/material-video/MaterialVideo.styled.js

@@ -1,8 +1,16 @@
+import _styled from '@emotion/styled/base';
 import { Flex } from '@elice/blocks';
-import styled from 'styled-components';
 
-var StyledMaterialVideoStatus = styled(Flex).withConfig({
-  componentId: "sc-dg3csq-0"
-})(["width:100%;height:100%;background-color:#22222c;"]);
+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 StyledMaterialVideoStatus = /*#__PURE__*/_styled(Flex, {
+  target: "ehbshjs0"
+})("production" === "production" ? {
+  name: "r4h982",
+  styles: "width:100%;height:100%;background-color:#22222c"
+} : {
+  name: "r4h982",
+  styles: "width:100%;height:100%;background-color:#22222c",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 
 export { StyledMaterialVideoStatus };

package/es/components/material-video/MaterialVideoContent.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
 import type { APIStatus } from '@elice/material-shared-types';
 import type { GetOrgMaterialVideoGetResponses } from '@elice/types';
+import type React from 'react';
 import type { YoutubePlayerSharedProps } from '../youtube-player';
 export interface MaterialVideoContentProps extends YoutubePlayerSharedProps {
     videoGetStatus: APIStatus;

package/es/components/material-video/MaterialVideoContent.js

@@ -5,8 +5,8 @@ import { base } from '@elice/design-tokens';
 import { eilStatusWarn } from '@elice/icons';
 import { useRawEliceIntl } from '@elice/intl';
 import { youtubeUrlParser } from '../../utils/youtubeUrlParser.js';
-import YoutubePlayer from '../youtube-player/YoutubePlayer.js';
 import { StyledMaterialVideoStatus } from './MaterialVideo.styled.js';
+import YoutubePlayer from '../youtube-player/YoutubePlayer.js';
 
 var MaterialVideoContent = function MaterialVideoContent(_a) {
   var videoGetStatus = _a.videoGetStatus,

package/es/components/youtube-player/YoutubePlayer.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { YouTubeProps } from 'react-youtube';
 type PickedYoutubeProps = Pick<YouTubeProps, 'onReady' | 'onError' | 'onPlay' | 'onPause' | 'onEnd' | 'onStateChange' | 'onPlaybackRateChange' | 'onPlaybackQualityChange'>;
 export interface YoutubePlayerSharedProps extends PickedYoutubeProps {

package/es/components/youtube-player/YoutubePlayer.styled.d.ts

@@ -1,2 +1,3 @@
-/// <reference types="react" />
-export declare const StyledYoutubePlayerWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledYoutubePlayerWrapper: import("@emotion/styled").StyledComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/es/components/youtube-player/YoutubePlayer.styled.js

@@ -1,8 +1,16 @@
+import _styled from '@emotion/styled/base';
 import { Flex } from '@elice/blocks';
-import styled from 'styled-components';
 
-var StyledYoutubePlayerWrapper = styled(Flex).withConfig({
-  componentId: "sc-ao5iuk-0"
-})(["width:100%;height:100%;background-color:#22222c;& .em-youtube-player__inner{width:90%;height:90%;}"]);
+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 StyledYoutubePlayerWrapper = /*#__PURE__*/_styled(Flex, {
+  target: "e11o7hq70"
+})("production" === "production" ? {
+  name: "s6oojq",
+  styles: "width:100%;height:100%;background-color:#22222c;& .em-youtube-player__inner{width:90%;height:90%;}"
+} : {
+  name: "s6oojq",
+  styles: "width:100%;height:100%;background-color:#22222c;& .em-youtube-player__inner{width:90%;height:90%;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 
 export { StyledYoutubePlayerWrapper };

package/es/components/youtube-player/index.d.ts

@@ -1,2 +1,2 @@
 export { default as YoutubePlayer } from './YoutubePlayer';
-export type { YoutubePlayerProps, YoutubePlayerSharedProps, } from './YoutubePlayer';
+export type { YoutubePlayerProps, YoutubePlayerSharedProps } from './YoutubePlayer';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-video",
-  "version": "1.251120.1",
+  "version": "1.260128.0-rc.0",
   "description": "User view and editing components of Elice material video",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -28,12 +28,13 @@
     "@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/types": "^1",
+    "@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",
@@ -47,14 +48,14 @@
     "@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/types": "^1.250612.0-teamleaderboard.1",
+    "@elice/material-shared-types": "1.260128.0-rc.0",
+    "@elice/material-shared-utils": "1.260128.0-rc.0",
+    "@elice/types": "^1.251229.0",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
     "@types/classnames": "^2.3.1",
     "@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"
   }
 }