@elice/material-exercise 1.260305.0 → 1.260429.0-improvetimerpopoverui.0

package/es/components/shared/exercise-version-list/ExerciseVersionList.js

@@ -1,6 +1,18 @@
+import _styled from '@emotion/styled/base';
 import { jsx } from 'react/jsx-runtime';
-import { StyledVersionList } from './ExerciseVersionList.styled.js';
+import { List } from '@elice/blocks';
 
+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 StyledVersionList = /*#__PURE__*/_styled(List, {
+  target: "e1plvajs0"
+})("production" === "production" ? {
+  name: "1uke1dw",
+  styles: "height:100%;padding:0;overflow:scroll;background-color:transparent;&>last-of-type{border:none;}"
+} : {
+  name: "1uke1dw",
+  styles: "height:100%;padding:0;overflow:scroll;background-color:transparent;&>last-of-type{border:none;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 var ExerciseVersionList = function ExerciseVersionList(_ref) {
   var children = _ref.children;
   return jsx(StyledVersionList, {

package/es/components/shared/exercise-version-list/ExerciseVersionListItem.d.ts

@@ -1,5 +1,6 @@
 import type React from 'react';
 interface ExerciseVersionListItemProps {
+    children?: React.ReactNode;
     selected?: boolean;
     style?: React.CSSProperties;
     onClick?: () => void;

package/es/components/shared/file-tabs/FileTab.js

@@ -1,10 +1,71 @@
+import _styled from '@emotion/styled/base';
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
+import { Text, IconButton } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
 import { eilMathsignMultiplyBasic } from '@elice/icons';
-import { StyledTab, StyledTabContent, StyledTabActiveBorder, StyledTabLabel, StyledTabCloseButton, StyledTabLabelFilename, StyledTabLabelDirname } from './FileTab.styled.js';
+import { css } from '@emotion/react';
 import FileIcon from '../file-icon/FileIcon.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 TAB_MIN_WIDTH = '7rem';
+var TAB_VERTICAL_BORDER_WIDTH = '1.5px';
+var TAB_BACKGROUND_COLOR = base.color.navy8;
+var TAB_ACTIVE_BACKGROUND_COLOR = base.color.navy9;
+var TAB_HOVERED_BACKGROUND_COLOR = base.color.navy7;
+// ========== Tab label ==========
+var StyledTabLabel = /*#__PURE__*/_styled("div", {
+  target: "eb5vmnz6"
+})("production" === "production" ? {
+  name: "1v2fhdm",
+  styles: "flex:1;display:flex;align-items:center;overflow:hidden;pointer-events:none;user-select:none;&>*{margin-right:0.5rem;}"
+} : {
+  name: "1v2fhdm",
+  styles: "flex:1;display:flex;align-items:center;overflow:hidden;pointer-events:none;user-select:none;&>*{margin-right:0.5rem;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledTabLabelFilename = /*#__PURE__*/_styled(Text, {
+  target: "eb5vmnz5"
+})("color:", base.color.gray4, ";font-weight:500;");
+var StyledTabLabelDirname = /*#__PURE__*/_styled(Text, {
+  target: "eb5vmnz4"
+})("production" === "production" ? {
+  name: "f3vz0n",
+  styles: "font-weight:500"
+} : {
+  name: "f3vz0n",
+  styles: "font-weight:500",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledTabCloseButton = /*#__PURE__*/_styled(IconButton, {
+  target: "eb5vmnz3"
+})("production" === "production" ? {
+  name: "19zzndm",
+  styles: "flex:0 0 auto;margin-right:0.25rem!important;opacity:0;transition:opacity 150ms ease-in-out"
+} : {
+  name: "19zzndm",
+  styles: "flex:0 0 auto;margin-right:0.25rem!important;opacity:0;transition:opacity 150ms ease-in-out",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+// ========== Tab content ==========
+var StyledTabContent = /*#__PURE__*/_styled("div", {
+  target: "eb5vmnz2"
+})("display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-left:0.5rem;height:calc(100% - ", TAB_VERTICAL_BORDER_WIDTH, ");&:hover{", StyledTabLabelFilename, "{color:", base.color.gray3, ";}", StyledTabCloseButton, "{opacity:1;}}");
+// ========== Tab active border ==========
+var StyledTabActiveBorder = /*#__PURE__*/_styled("div", {
+  target: "eb5vmnz1"
+})("height:", TAB_VERTICAL_BORDER_WIDTH, ";background-color:", base.color.primary5, ";opacity:0;");
+// ========== Tab ==========
+var cssTabActive = /*#__PURE__*/css("background-color:", TAB_ACTIVE_BACKGROUND_COLOR, ";", StyledTabLabelFilename, "{color:", base.color.gray3, ";}", StyledTabCloseButton, "{opacity:1;}", StyledTabActiveBorder, "{opacity:1;}");
+var cssTabHovered = /*#__PURE__*/css("background-color:", TAB_HOVERED_BACKGROUND_COLOR, ";", StyledTabLabelFilename, "{color:", base.color.gray3, ";}");
+var StyledTab = /*#__PURE__*/_styled("div", {
+  target: "eb5vmnz0"
+})("padding-top:", TAB_VERTICAL_BORDER_WIDTH, ";width:", TAB_MIN_WIDTH, ";min-width:fit-content;height:100%;background-color:", TAB_BACKGROUND_COLOR, ";border-right:1px solid ", base.color.navy7, ";cursor:pointer;", function (props) {
+  return props.active && cssTabActive;
+}, " ", function (props) {
+  return props.hovered && cssTabHovered;
+}, ";");
 var EMPTY_CHUNKS = [];
 var FileTab = function FileTab(_a) {
   var fullname = _a.fullname,

package/es/components/shared/file-tabs/FileTabs.js

@@ -1,11 +1,31 @@
 import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import _styled from '@emotion/styled/base';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { createElement } from 'react';
+import { base } from '@elice/design-tokens';
 import throttle from 'lodash/throttle';
+import { getMaterialScrollBarCss } from '../../../constants/stylesheets.js';
 import FileTab from './FileTab.js';
 import { getTabProps } from './util.js';
-import { StyledTabs, StyledTabsDropZone } from './FileTabs.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 StyledTabs = /*#__PURE__*/_styled("div", {
+  target: "ep0ecmj1"
+})("display:flex;align-items:flex-end;box-sizing:border-box;flex-direction:row;height:2.25rem;font-family:inherit;background:", base.color.navy8, ";overflow-x:overlay;overflow-y:hidden;scrollbar-width:none;", getMaterialScrollBarCss({
+  height: '2px',
+  borderRadius: '2px',
+  hideable: true
+}), ";");
+var StyledTabsDropZone = /*#__PURE__*/_styled("div", {
+  target: "ep0ecmj0"
+})("production" === "production" ? {
+  name: "uysyag",
+  styles: "flex:1;height:100%;background-color:transparent"
+} : {
+  name: "uysyag",
+  styles: "flex:1;height:100%;background-color:transparent",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 var FileTabs = function FileTabs(_ref) {
   var openedTabs = _ref.openedTabs,
     activeTab = _ref.activeTab,

package/es/components/shared/file-tree/FileTreeListItemContent.js

@@ -1,15 +1,103 @@
 import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import _styled from '@emotion/styled/base';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React from 'react';
-import { Icon, Checkbox } from '@elice/blocks';
+import { Icon, Checkbox, Text, IconButton } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { eilArrowDownwardsSingle, eilVisibilityOff, eilLockOn, eilMoreVertical } from '@elice/icons';
+import { css } from '@emotion/react';
 import FileTreeListItemContentInput from './FileTreeListItemContentInput.js';
 import FileTreeListItemContentMenu from './FileTreeListItemContentMenu.js';
-import { StyledContentIndents, StyledContentIndentGuide, StyledContent, StyledContentLabel, StyledContentLabelDirArrowWrap, StyledContentLabelIconWrap, StyledContentLabelFilename, StyledContentLabelStatusIcon, StyledContentLabelMenuButton } from './FileTreeListItemContent.styled.js';
 import FileIcon from '../file-icon/FileIcon.js';
 import { useFileTreeState, useFileTreeDispatch } from './context/FileTreeContext.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 CONTENT_MIN_HEIGHT = 28; // 1.75rem
+var CONTENT_LEFT_BORDER_WIDTH = 3; // 0.1875rem
+var CONTENT_RIGHT_PADDING = 12; // 0.75rem
+var CONTENT_LABEL_VERTICAL_PADDING = 4; // 0.25rem
+var CONTENT_LABEL_ICON_SIZE = 16; // 1rem
+var CONTENT_LABEL_ICON_AFTER_MARGIN = 4; // 1rem
+var CONTENT_LABEL_DIR_ARROW_PADDING = 4; // 0.25rem
+var CONTENT_LABEL_DIR_ARROW_SIZE = 12; // 0.75rem
+var CONTENT_LABEL_MENU_BUTTON_SIZE = CONTENT_MIN_HEIGHT - CONTENT_LABEL_VERTICAL_PADDING * 2;
+//
+//
+//
+/**
+ * indent
+ */
+var StyledContentIndents = /*#__PURE__*/_styled("div", {
+  target: "e1mtizjs8"
+})();
+var StyledContentIndentGuide = /*#__PURE__*/_styled("div", {
+  target: "e1mtizjs7"
+})("display:inline-block;height:100%;border-right:0.5px solid ", base.color.gray7, ";");
+/**
+ * label
+ */
+var StyledContentLabel = /*#__PURE__*/_styled("div", {
+  target: "e1mtizjs6"
+})("flex:1;display:flex;align-items:center;padding-top:", CONTENT_LABEL_VERTICAL_PADDING, "px;padding-bottom:", CONTENT_LABEL_VERTICAL_PADDING, "px;overflow:hidden;");
+/**
+ * label > dir arrow
+ */
+var StyledContentLabelDirArrowWrap = /*#__PURE__*/_styled("div", {
+  target: "e1mtizjs5"
+})("flex:0 0 ", CONTENT_LABEL_DIR_ARROW_SIZE + CONTENT_LABEL_DIR_ARROW_PADDING * 2, "px;display:flex;justify-content:center;align-items:center;padding:", CONTENT_LABEL_DIR_ARROW_PADDING, ";height:", CONTENT_LABEL_DIR_ARROW_SIZE, "px;");
+/**
+ * label > icon
+ */
+var StyledContentLabelIconWrap = /*#__PURE__*/_styled("div", {
+  target: "e1mtizjs4"
+})("flex:0 0 ", CONTENT_LABEL_ICON_SIZE + CONTENT_LABEL_ICON_AFTER_MARGIN, "px;display:flex;margin-right:", CONTENT_LABEL_ICON_AFTER_MARGIN, "px;height:", CONTENT_LABEL_ICON_SIZE, "px;");
+/**
+ * label > filename
+ */
+var StyledContentLabelFilename = /*#__PURE__*/_styled(Text, {
+  target: "e1mtizjs3"
+})("flex:1;margin-right:0.125rem;color:", base.color.gray4, ";font-weight:500;");
+/**
+ * label > status icon
+ */
+var StyledContentLabelStatusIcon = /*#__PURE__*/_styled(Icon, {
+  target: "e1mtizjs2"
+})("production" === "production" ? {
+  name: "129lf1x",
+  styles: "margin-left:0.25rem;margin-right:0;&:last-of-type{margin-right:0.25rem;}"
+} : {
+  name: "129lf1x",
+  styles: "margin-left:0.25rem;margin-right:0;&:last-of-type{margin-right:0.25rem;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+/**
+ * label > menu button
+ */
+var StyledContentLabelMenuButton = /*#__PURE__*/_styled(IconButton, {
+  target: "e1mtizjs1"
+})("flex:0 0 ", CONTENT_LABEL_MENU_BUTTON_SIZE, "px;width:", CONTENT_LABEL_MENU_BUTTON_SIZE, "px!important;height:", CONTENT_LABEL_MENU_BUTTON_SIZE, "px!important;opacity:0;transition:opacity 150ms ease-in-out;");
+//
+//
+//
+var cssStyledContentActive = /*#__PURE__*/css("border-left-color:", base.color.primary4, ";background-color:", base.color.navy7, ";", StyledContentLabelFilename, "{color:", base.color.gray3, ";}");
+var cssStyledContentDragging = "production" === "production" ? {
+  name: "1ym7stk",
+  styles: "border-left-color:transparent!important;background-color:transparent!important"
+} : {
+  name: "1ym7stk",
+  styles: "border-left-color:transparent!important;background-color:transparent!important",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var StyledContent = /*#__PURE__*/_styled("div", {
+  target: "e1mtizjs0"
+})("display:flex;padding-right:", CONTENT_RIGHT_PADDING, "px;width:100%;min-width:0;min-height:", CONTENT_MIN_HEIGHT, "px;border-left-width:", CONTENT_LEFT_BORDER_WIDTH, "px;border-left-style:solid;border-left-color:transparent;user-select:none;", function (props) {
+  return props.active && cssStyledContentActive;
+}, " ", function (props) {
+  return props.isDragging && cssStyledContentDragging;
+}, " &:hover{background-color:", base.color.navy8, ";", StyledContentLabelFilename, "{color:", base.color.gray3, ";}", StyledContentLabelMenuButton, "{opacity:1;}}");
 var ITEM_IDENT_WIDTH = 8; // 0.5rem
 var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
   var node = _ref.node,

package/es/components/shared/file-tree/FileTreeListItemContentInput.js

@@ -1,18 +1,38 @@
+import _styled from '@emotion/styled/base';
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { useClickAway } from 'react-use';
+import { Input } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
 import { useRawEliceIntl } from '@elice/intl';
 import { getParentPath } from './utils/fileTreeGenerator.js';
-import { StyledInputForm, StyledInput } from './FileTreeListItemContentInput.styled.js';
 import { useFileTreeDispatch } from './context/FileTreeContext.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 INPUT_HEIGHT = '1.25rem';
+var INPUT_FONT_SIZE = '0.75rem';
+var INPUT_INNER_LEFT_PADDING = '0.125rem';
+var INPUT_INNER_RIGHT_PADDING = '0.25rem';
 var FILENAME_MAX_LENGTH = 65535;
 var FILENAME_REGEXP_DOT = /^\.$/;
 var FILENAME_REGEXP_DOTDOT = /^\.\.$/;
 var FILENAME_REGEXP_DOT_ELICE = /^\.elice$/;
 var FILENAME_REGEXP_SLASH = /\//;
 var FILENAME_REGEXP_BACK_SLASH = /\\/;
+var StyledInputForm = /*#__PURE__*/_styled("form", {
+  target: "e1lewuzv1"
+})("production" === "production" ? {
+  name: "y3klfd",
+  styles: "flex:1;display:flex"
+} : {
+  name: "y3klfd",
+  styles: "flex:1;display:flex",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledInput = /*#__PURE__*/_styled(Input, {
+  target: "e1lewuzv0"
+})("min-height:", INPUT_HEIGHT, ";>div{background:transparent!important;>div{&:nth-child(1){padding:", INPUT_INNER_LEFT_PADDING, ";}&:nth-child(3){padding:", INPUT_INNER_RIGHT_PADDING, ";}}.eb-icon{width:0.875em;height:0.875em;font-size:0.875em;}}& input{padding-top:0!important;padding-bottom:0!important;height:", INPUT_HEIGHT, "!important;color:", base.color.gray0, "!important;font-size:", INPUT_FONT_SIZE, "!important;}");
 var FileTreeListItemContentInput = function FileTreeListItemContentInput(_ref) {
   var type = _ref.type,
     initialValue = _ref.initialValue,

package/es/components/shared/file-tree/FileTreeListItems.js

@@ -1,12 +1,33 @@
+import _styled from '@emotion/styled/base';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { base } from '@elice/design-tokens';
 import FileTreeListItemContent from './FileTreeListItemContent.js';
-import { StyledTreeItems, StyledTreeItem } from './FileTreeListItems.styled.js';
 import { isMovingTheSamePath } from './utils/fileTreePath.js';
 import { useFileTreeState, useFileTreeDispatch } from './context/FileTreeContext.js';
 import { getTargetDirectoryPath } from './utils/fileTreeInput.js';
 import { validateFilesSize } from './utils/fileTreeFiles.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 StyledTreeItems = /*#__PURE__*/_styled("ul", {
+  target: "eqj36uk1"
+})("production" === "production" ? {
+  name: "n5lwfe",
+  styles: "padding:0;margin:0;overflow:hidden"
+} : {
+  name: "n5lwfe",
+  styles: "padding:0;margin:0;overflow:hidden",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledTreeItem = /*#__PURE__*/_styled("li", {
+  target: "eqj36uk0"
+})("production" === "production" ? {
+  name: "i710ph",
+  styles: "list-style:none;cursor:pointer"
+} : {
+  name: "i710ph",
+  styles: "list-style:none;cursor:pointer",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 var _FileTreeListItems = function FileTreeListItems(_ref) {
   var node = _ref.node,
     _ref$indent = _ref.indent,

package/es/components/shared/file-tree/file-tree-toolbar/FileTreeToolbar.js

@@ -1,8 +1,9 @@
+import _styled from '@emotion/styled/base';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React from 'react';
+import { base } from '@elice/design-tokens';
 import { eilFileAdd, eilFolderAdd, eilUpload } from '@elice/icons';
 import { IntlComponentBuilder, useRawEliceIntl } from '@elice/intl';
-import { StyledFileTreeToolbar } from '../FileTreeToolbar.styled.js';
 import messageEn from './locales/en.json.js';
 import messageKo from './locales/ko.json.js';
 import { useFileTreeState, useFileTreeDispatch } from '../context/FileTreeContext.js';
@@ -10,6 +11,9 @@ import ExerciseMenuButton from '../../exercise-menu-button/ExerciseMenuButton.js
 import { getTargetDirectoryPath } from '../utils/fileTreeInput.js';
 import { validateFilesSize } from '../utils/fileTreeFiles.js';
 
+var StyledFileTreeToolbar = /*#__PURE__*/_styled("div", {
+  target: "emczy7z0"
+})("flex:0 0 2.25rem;display:flex;align-items:center;padding:0.25rem 0.5rem;background-color:", base.color.navy8, ";");
 var FileTreeToolbar = function FileTreeToolbar(_ref) {
   var className = _ref.className;
   var intl = useRawEliceIntl();

package/es/components/shared/material-modal/MaterialModal.d.ts

@@ -1,5 +1,6 @@
 import type React from 'react';
 interface MaterialModalProps {
+    children?: React.ReactNode;
     title: string;
     footer?: React.ReactChild;
     onHide?: () => void;

package/es/components/shared/material-modal/MaterialModal.js

@@ -1,9 +1,33 @@
+import _styled from '@emotion/styled/base';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useKeyPressEvent } from 'react-use';
-import { BorderlessDialog } from '@elice/blocks';
+import { Text, Flex, IconButton, BorderlessDialog } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
 import { eilMathsignMultiplyBasic } from '@elice/icons';
-import { StyledModalWrapper, StyledModalHeader, StyledModalBody, StyledModalFooter, StyledCloseButton } from './MaterialModal.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 StyledModalWrapper = /*#__PURE__*/_styled("div", {
+  target: "e17uxf0q4"
+})("position:relative;display:flex;flex-flow:column nowrap;width:90vw;height:90vh;padding:0;background-color:", base.color.gray8, ";border-radius:0.375rem;");
+var StyledModalHeader = /*#__PURE__*/_styled(Text, {
+  target: "e17uxf0q3"
+})("flex:0 1 auto;width:100%;height:3.25rem;min-height:3.25rem;line-height:3.25rem;border-top-left-radius:0.375rem;border-top-right-radius:0.375rem;border-bottom:1px solid ", base.color.navy9, ";text-align:center;color:", base.color.white, ";");
+var StyledModalBody = /*#__PURE__*/_styled("div", {
+  target: "e17uxf0q2"
+})("production" === "production" ? {
+  name: "1pb620b",
+  styles: "position:relative;flex:1 1 auto;width:100%;height:80%"
+} : {
+  name: "1pb620b",
+  styles: "position:relative;flex:1 1 auto;width:100%;height:80%",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledModalFooter = /*#__PURE__*/_styled(Flex, {
+  target: "e17uxf0q1"
+})("flex:0 1 auto;width:100%;height:3.75rem;min-height:3.75rem;border-bottom-left-radius:0.375rem;border-bottom-right-radius:0.375rem;border-top:1px solid ", base.color.navy9, ";padding:0.5rem 1.5rem;overflow:hidden;text-align:right;align-items:center;justify-content:flex-end;");
+var StyledCloseButton = /*#__PURE__*/_styled(IconButton, {
+  target: "e17uxf0q0"
+})("position:absolute;top:0;right:0;color:", base.color.gray4, "!important;");
 var MaterialModal = function MaterialModal(_ref) {
   var children = _ref.children,
     title = _ref.title,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-exercise",
-  "version": "1.260305.0",
+  "version": "1.260429.0-improvetimerpopoverui.0",
   "description": "User view and editing components of Elice material exercise",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -14,14 +14,6 @@
     "README.md"
   ],
   "sideEffects": false,
-  "scripts": {
-    "start": "run-s watch",
-    "prebuild": "run-s clean",
-    "build": "cross-env NODE_ENV=production rollup -c ../../rollup.config.ts --configPlugin typescript -f es -f cjs",
-    "watch": "rollup -c ../../rollup.config.ts --configPlugin typescript -f es -f cjs -w",
-    "lint": "eslint --ext .ts,.tsx ./src --max-warnings=0",
-    "clean": "del-cli \"es/*\" \"cjs/*\" \"dist/*\""
-  },
   "peerDependencies": {
     "@elice/api-client": "^1",
     "@elice/blocks": "^1",
@@ -29,11 +21,10 @@
     "@elice/icons": "^1",
     "@elice/intl": "^0",
     "@elice/markdown": "^1",
-    "@elice/material-shared-types": "1.260305.0",
-    "@elice/material-shared-utils": "1.260305.0",
     "@elice/mui-elements": "^5",
     "@elice/mui-system": "^5",
     "@elice/types": "^1",
+    "@elice/utils": "^1",
     "@elice/websocket": "^1",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
@@ -46,7 +37,9 @@
     "lodash": "^4.17.21",
     "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
     "react-use": "^17.0.0",
-    "recoil": "^0"
+    "recoil": "^0",
+    "@elice/material-shared-types": "1.260429.0-improvetimerpopoverui.0",
+    "@elice/material-shared-utils": "1.260429.0-improvetimerpopoverui.0"
   },
   "dependencies": {
     "@novnc/novnc": "^1.3.0",
@@ -82,10 +75,9 @@
     "@elice/icons": "^1.230814.0",
     "@elice/intl": "0.241127.0",
     "@elice/markdown": "1.241015.0",
-    "@elice/material-shared-types": "1.260305.0",
-    "@elice/material-shared-utils": "1.260305.0",
     "@elice/mui-elements": "5.251204.0",
     "@elice/mui-system": "5.251204.0",
+    "@elice/rollup-config": "^1.260406.0",
     "@elice/types": "^1.251229.0",
     "@elice/utils": "^1.250930.0",
     "@elice/websocket": "^1.220815.0",
@@ -100,16 +92,33 @@
     "@types/color": "^3.0.3",
     "@types/file-saver": "^2.0.5",
     "@types/humps": "^2.0.1",
+    "@types/lodash": "^4.17.23",
     "@types/mime": "^2.0.3",
     "@types/novnc": "^0.0.27",
     "@types/prettier": "^2.6.3",
     "@types/random-words": "^1.1.2",
     "@types/react": "~17.0.9",
     "@types/socket.io-client": "^1.4.36",
+    "cross-env": "^7.0.3",
+    "del-cli": "^3.0.1",
+    "eslint": "~9.39.0",
     "humps": "^2.0.1",
     "lodash": "^4.17.21",
-    "react": "^17.0.2",
+    "npm-run-all": "^4.1.5",
+    "react": "~18.2.0",
     "react-use": "^17.0.0",
-    "recoil": "~0.7.3"
+    "recoil": "~0.7.3",
+    "rollup": "^4.0.0",
+    "typescript": "~5.9.3",
+    "@elice/material-shared-utils": "1.260429.0-improvetimerpopoverui.0",
+    "@elice/material-shared-types": "1.260429.0-improvetimerpopoverui.0"
+  },
+  "scripts": {
+    "start": "run-s watch",
+    "prebuild": "run-s clean",
+    "build": "cross-env NODE_ENV=production rollup -c ../../rollup.config.ts --configPlugin typescript -f es -f cjs",
+    "watch": "rollup -c ../../rollup.config.ts --configPlugin typescript -f es -f cjs -w",
+    "lint": "eslint --ext .ts,.tsx ./src --max-warnings=0",
+    "clean": "del-cli \"es/*\" \"cjs/*\" \"dist/*\""
   }
-}
+}

package/cjs/components/material-exercise/MaterialExercise.styled.d.ts

@@ -1,66 +0,0 @@
-export declare const EXERCISE_FILE_TREE_MIN_WIDTH = 128;
-export declare const EXERCISE_PREVIEW_MIN_WIDTH = 128;
-export declare const EXERCISE_RUNNER_MIN_HEIGHT = 128;
-export declare const EXERCISE_HORIZONTAL_RATIO: {
-    FILETREE: number;
-    EDITOR: number;
-    PREVIEW: number;
-};
-/**
- * Wrapper contains:
- * - FileTree
- * - FileTabs
- * - File (Editor)
- * - Runner
- */
-export declare const StyledExerciseContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * Wrapper contains:
- * - FileTree
- * - FileTabs
- * - File (Editor)
- */
-export declare const StyledExerciseMain: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * Wrapper contains:
- * - FileTabs
- * - File (Editor)
- */
-export declare const StyledExerciseFileAndTabWrap: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledExerciseFileWrap: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledExerciseTabBar: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledExerciseTabsWrap: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledExerciseTabMenuWrap: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledExerciseFileTreeWrap: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledxerciseFileTreeContaner: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledExerciseRunnerWrap: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;