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

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

@@ -3,21 +3,110 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var icons = require('@elice/icons');
+var react = require('@emotion/react');
 var FileTreeListItemContentInput = require('./FileTreeListItemContentInput.js');
 var FileTreeListItemContentMenu = require('./FileTreeListItemContentMenu.js');
-var FileTreeListItemContent_styled = require('./FileTreeListItemContent.styled.js');
 var FileIcon = require('../file-icon/FileIcon.js');
 var FileTreeContext = require('./context/FileTreeContext.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+//
+//
+//
+var 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__default.default("div", {
+  target: "e1mtizjs8"
+})();
+var StyledContentIndentGuide = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1mtizjs7"
+})("display:inline-block;height:100%;border-right:0.5px solid ", designTokens.base.color.gray7, ";");
+/**
+ * label
+ */
+var StyledContentLabel = /*#__PURE__*/_styled__default.default("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__default.default("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__default.default("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__default.default(blocks.Text, {
+  target: "e1mtizjs3"
+})("flex:1;margin-right:0.125rem;color:", designTokens.base.color.gray4, ";font-weight:500;");
+/**
+ * label > status icon
+ */
+var StyledContentLabelStatusIcon = /*#__PURE__*/_styled__default.default(blocks.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__default.default(blocks.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__*/react.css("border-left-color:", designTokens.base.color.primary4, ";background-color:", designTokens.base.color.navy7, ";", StyledContentLabelFilename, "{color:", designTokens.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__default.default("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:", designTokens.base.color.navy8, ";", StyledContentLabelFilename, "{color:", designTokens.base.color.gray3, ";}", StyledContentLabelMenuButton, "{opacity:1;}}");
 var ITEM_IDENT_WIDTH = 8; // 0.5rem
 var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
   var node = _ref.node,
@@ -43,12 +132,12 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
   var contentIndents = React__default.default.useMemo(function () {
     var depth = (node.path.match(/\//g) || []).length;
     var counts = depth === 0 ? 0 : indent * depth;
-    return jsxRuntime.jsx(FileTreeListItemContent_styled.StyledContentIndents, {
+    return jsxRuntime.jsx(StyledContentIndents, {
       style: {
         flex: "0 0 ".concat(ITEM_IDENT_WIDTH * counts, "px")
       },
       children: Array(counts).fill(0).map(function (_, index) {
-        return jsxRuntime.jsx(FileTreeListItemContent_styled.StyledContentIndentGuide, {
+        return jsxRuntime.jsx(StyledContentIndentGuide, {
           style: {
             width: "".concat(ITEM_IDENT_WIDTH, "px")
           }
@@ -87,9 +176,9 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
   var renderContentDirectoryExpandArrow = function renderContentDirectoryExpandArrow() {
     // new or directory
     if (isNewItem || !node.isDirectory) {
-      return jsxRuntime.jsx(FileTreeListItemContent_styled.StyledContentLabelDirArrowWrap, {});
+      return jsxRuntime.jsx(StyledContentLabelDirArrowWrap, {});
     }
-    return jsxRuntime.jsx(FileTreeListItemContent_styled.StyledContentLabelDirArrowWrap, {
+    return jsxRuntime.jsx(StyledContentLabelDirArrowWrap, {
       children: jsxRuntime.jsx(blocks.Icon, {
         icon: icons.eilArrowDownwardsSingle,
         size: "tiny",
@@ -104,7 +193,7 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
   var renderContentIcon = function renderContentIcon() {
     // new
     if (isNewItem) {
-      return jsxRuntime.jsx(FileTreeListItemContent_styled.StyledContentLabelIconWrap, {
+      return jsxRuntime.jsx(StyledContentLabelIconWrap, {
         children: jsxRuntime.jsx(FileIcon.default, {
           filename: "newfile",
           directory: (newInput === null || newInput === void 0 ? void 0 : newInput.type) === 'directory',
@@ -115,7 +204,7 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
     }
     // checkbox for file
     if (mode === 'checkbox' && !node.isDirectory) {
-      return jsxRuntime.jsx(FileTreeListItemContent_styled.StyledContentLabelIconWrap, {
+      return jsxRuntime.jsx(StyledContentLabelIconWrap, {
         children: jsxRuntime.jsx(blocks.Checkbox, {
           dark: true,
           value: node.isInitialOpen,
@@ -128,7 +217,7 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
         })
       });
     }
-    return jsxRuntime.jsx(FileTreeListItemContent_styled.StyledContentLabelIconWrap, {
+    return jsxRuntime.jsx(StyledContentLabelIconWrap, {
       children: jsxRuntime.jsx(FileIcon.default, {
         filename: node.title,
         directory: node.isDirectory,
@@ -170,7 +259,7 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
         })
       });
     }
-    return jsxRuntime.jsx(FileTreeListItemContent_styled.StyledContentLabelFilename, {
+    return jsxRuntime.jsx(StyledContentLabelFilename, {
       block: true,
       ellipsis: true,
       size: "tiny",
@@ -187,7 +276,7 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
     }
     // hidden
     if (node.isHidden) {
-      return jsxRuntime.jsx(FileTreeListItemContent_styled.StyledContentLabelStatusIcon, {
+      return jsxRuntime.jsx(StyledContentLabelStatusIcon, {
         icon: icons.eilVisibilityOff,
         color: designTokens.base.color.gray4,
         size: "small"
@@ -195,7 +284,7 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
     }
     // readonly
     if (node.isReadonly) {
-      return jsxRuntime.jsx(FileTreeListItemContent_styled.StyledContentLabelStatusIcon, {
+      return jsxRuntime.jsx(StyledContentLabelStatusIcon, {
         icon: icons.eilLockOn,
         color: designTokens.base.color.gray4,
         size: "small"
@@ -212,7 +301,7 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
       return null;
     }
     return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [jsxRuntime.jsx(FileTreeListItemContent_styled.StyledContentLabelMenuButton, {
+      children: [jsxRuntime.jsx(StyledContentLabelMenuButton, {
         transparent: true,
         icon: icons.eilMoreVertical,
         size: "tiny",
@@ -234,13 +323,13 @@ var FileTreeListItemContent = function FileTreeListItemContent(_ref) {
   //
   //
   //
-  return jsxRuntime.jsxs(FileTreeListItemContent_styled.StyledContent, {
+  return jsxRuntime.jsxs(StyledContent, {
     title: "~/".concat(node.path),
     active: activePath === node.path,
     isDragging: dropzonePath !== null,
     onClick: handleClick,
     onContextMenu: handleContextMenu,
-    children: [contentIndents, jsxRuntime.jsxs(FileTreeListItemContent_styled.StyledContentLabel, {
+    children: [contentIndents, jsxRuntime.jsxs(StyledContentLabel, {
       children: [renderContentDirectoryExpandArrow(), renderContentIcon(), renderContentFilename(), renderContentStatusIcon(), renderContentMenuButton()]
     })]
   });

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

@@ -2,25 +2,46 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactHookForm = require('react-hook-form');
 var reactUse = require('react-use');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
 var intl = require('@elice/intl');
 var fileTreeGenerator = require('./utils/fileTreeGenerator.js');
-var FileTreeListItemContentInput_styled = require('./FileTreeListItemContentInput.styled.js');
 var FileTreeContext = require('./context/FileTreeContext.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var 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__default.default("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__default.default(blocks.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:", designTokens.base.color.gray0, "!important;font-size:", INPUT_FONT_SIZE, "!important;}");
 var FileTreeListItemContentInput = function FileTreeListItemContentInput(_ref) {
   var type = _ref.type,
     initialValue = _ref.initialValue,
@@ -231,7 +252,7 @@ var FileTreeListItemContentInput = function FileTreeListItemContentInput(_ref) {
   //
   //
   //
-  return jsxRuntime.jsx(FileTreeListItemContentInput_styled.StyledInputForm, {
+  return jsxRuntime.jsx(StyledInputForm, {
     ref: formElRef,
     onSubmit: handleFormSubmit,
     children: jsxRuntime.jsx(reactHookForm.Controller, {
@@ -258,7 +279,7 @@ var FileTreeListItemContentInput = function FileTreeListItemContentInput(_ref) {
         var field = _ref2.field,
           fieldState = _ref2.fieldState;
         var _a;
-        return jsxRuntime.jsx(FileTreeListItemContentInput_styled.StyledInput, Object.assign({}, field, {
+        return jsxRuntime.jsx(StyledInput, Object.assign({}, field, {
           autoFocus: true,
           type: "text",
           className: className,

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

@@ -2,15 +2,40 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var designTokens = require('@elice/design-tokens');
 var FileTreeListItemContent = require('./FileTreeListItemContent.js');
-var FileTreeListItems_styled = require('./FileTreeListItems.styled.js');
 var fileTreePath = require('./utils/fileTreePath.js');
 var FileTreeContext = require('./context/FileTreeContext.js');
 var fileTreeInput = require('./utils/fileTreeInput.js');
 var fileTreeFiles = require('./utils/fileTreeFiles.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
+
+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__default.default("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__default.default("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,
@@ -165,14 +190,14 @@ var _FileTreeListItems = function FileTreeListItems(_ref) {
   //
   //
   //
-  return jsxRuntime.jsx(FileTreeListItems_styled.StyledTreeItems, {
+  return jsxRuntime.jsx(StyledTreeItems, {
     style: {
       backgroundColor: dropzonePath === '' ? designTokens.base.color.primary7 : 'transparent'
     },
     children: node.children.filter(function (childNode) {
       return isHiddenFilelistVisible ? true : !childNode.isHidden;
     }).map(function (childNode, index) {
-      return jsxRuntime.jsxs(FileTreeListItems_styled.StyledTreeItem, {
+      return jsxRuntime.jsxs(StyledTreeItem, {
         id: "".concat(uniqCompId, "-").concat(childNode.path),
         role: "treeitem",
         "aria-selected": childNode.path === activePath,

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

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var designTokens = require('@elice/design-tokens');
 var icons = require('@elice/icons');
 var intl = require('@elice/intl');
-var FileTreeToolbar_styled = require('../FileTreeToolbar.styled.js');
 var en = require('./locales/en.json.js');
 var ko = require('./locales/ko.json.js');
 var FileTreeContext = require('../context/FileTreeContext.js');
@@ -16,8 +17,12 @@ var fileTreeFiles = require('../utils/fileTreeFiles.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
+var StyledFileTreeToolbar = /*#__PURE__*/_styled__default.default("div", {
+  target: "emczy7z0"
+})("flex:0 0 2.25rem;display:flex;align-items:center;padding:0.25rem 0.5rem;background-color:", designTokens.base.color.navy8, ";");
 var FileTreeToolbar = function FileTreeToolbar(_ref) {
   var className = _ref.className;
   var intl$1 = intl.useRawEliceIntl();
@@ -113,7 +118,7 @@ var FileTreeToolbar = function FileTreeToolbar(_ref) {
   //
   //
   //
-  return jsxRuntime.jsxs(FileTreeToolbar_styled.StyledFileTreeToolbar, {
+  return jsxRuntime.jsxs(StyledFileTreeToolbar, {
     className: className,
     children: [renderFileAddButton(), renderFolderAddButton(), renderFileUploadButton()]
   });

package/cjs/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/cjs/components/shared/material-modal/MaterialModal.js

@@ -2,12 +2,40 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var reactUse = require('react-use');
 var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
 var icons = require('@elice/icons');
-var MaterialModal_styled = require('./MaterialModal.styled.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
+
+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__default.default("div", {
+  target: "e17uxf0q4"
+})("position:relative;display:flex;flex-flow:column nowrap;width:90vw;height:90vh;padding:0;background-color:", designTokens.base.color.gray8, ";border-radius:0.375rem;");
+var StyledModalHeader = /*#__PURE__*/_styled__default.default(blocks.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 ", designTokens.base.color.navy9, ";text-align:center;color:", designTokens.base.color.white, ";");
+var StyledModalBody = /*#__PURE__*/_styled__default.default("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__default.default(blocks.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 ", designTokens.base.color.navy9, ";padding:0.5rem 1.5rem;overflow:hidden;text-align:right;align-items:center;justify-content:flex-end;");
+var StyledCloseButton = /*#__PURE__*/_styled__default.default(blocks.IconButton, {
+  target: "e17uxf0q0"
+})("position:absolute;top:0;right:0;color:", designTokens.base.color.gray4, "!important;");
 var MaterialModal = function MaterialModal(_ref) {
   var children = _ref.children,
     title = _ref.title,
@@ -22,7 +50,7 @@ var MaterialModal = function MaterialModal(_ref) {
     if (!onHide) {
       return null;
     }
-    return jsxRuntime.jsx(MaterialModal_styled.StyledCloseButton, {
+    return jsxRuntime.jsx(StyledCloseButton, {
       transparent: true,
       border: false,
       icon: icons.eilMathsignMultiplyBasic,
@@ -30,12 +58,12 @@ var MaterialModal = function MaterialModal(_ref) {
     });
   };
   return jsxRuntime.jsx(blocks.BorderlessDialog, {
-    children: jsxRuntime.jsxs(MaterialModal_styled.StyledModalWrapper, {
-      children: [jsxRuntime.jsxs(MaterialModal_styled.StyledModalHeader, {
+    children: jsxRuntime.jsxs(StyledModalWrapper, {
+      children: [jsxRuntime.jsxs(StyledModalHeader, {
         children: [title, renderCloseButton()]
-      }), jsxRuntime.jsx(MaterialModal_styled.StyledModalBody, {
+      }), jsxRuntime.jsx(StyledModalBody, {
         children: children
-      }), footer && jsxRuntime.jsx(MaterialModal_styled.StyledModalFooter, {
+      }), footer && jsxRuntime.jsx(StyledModalFooter, {
         children: footer
       })]
     })

package/es/components/material-exercise/MaterialExercise.js

@@ -1,13 +1,14 @@
+import _styled from '@emotion/styled/base';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React, { forwardRef } from 'react';
 import { config } from '@elice/api-client';
 import { ResizableNext, Button, Icon, Hspace } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
 import { eilClassroom } from '@elice/icons';
 import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
 import { withForwardRefMaterial } from '@elice/material-shared-utils';
 import { useRecoilValue } from 'recoil';
-import { MATERIAL_RESIZABLE_COMMON_PROPS } from '../../constants/stylesheets.js';
-import { StyledExerciseContainer, StyledExerciseMain, StyledExerciseFileAndTabWrap, StyledExerciseTabBar, StyledExerciseRunnerWrap, EXERCISE_RUNNER_MIN_HEIGHT, EXERCISE_PREVIEW_MIN_WIDTH, EXERCISE_HORIZONTAL_RATIO, StyledxerciseFileTreeContaner, EXERCISE_FILE_TREE_MIN_WIDTH, StyledExerciseFileTreeWrap, StyledExerciseTabsWrap, StyledExerciseTabMenuWrap, StyledExerciseFileWrap } from './MaterialExercise.styled.js';
+import { MATERIAL_RESIZABLE_COMMON_PROPS, MATERIAL_DIVIDER_BORDER_VALUE } from '../../constants/stylesheets.js';
 import ExerciseProvider from './context/ExerciseProvider.js';
 import messageEn from '../locales/en.json.js';
 import messageKo from '../locales/ko.json.js';
@@ -25,9 +26,103 @@ import { exerciseContainerSizeState, exerciseState, exerciseFileTreeOpenedState,
 import { exerciseRunnerRoomsOpen$, exerciseRunnerTextSend$ } from './context/subjects.js';
 import { ExercisePreviewType, ExercisePreviewDisplayMode } from './context/recoilTypes.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 EXERCISE_FILE_TREE_MIN_WIDTH = 128;
+var EXERCISE_PREVIEW_MIN_WIDTH = 128;
+var EXERCISE_RUNNER_MIN_HEIGHT = 128;
+var EXERCISE_HORIZONTAL_RATIO = {
+  FILETREE: 0.15,
+  PREVIEW: 0.4
+};
 //
 //
 //
+/**
+ * Wrapper contains:
+ * - FileTree
+ * - FileTabs
+ * - File (Editor)
+ * - Runner
+ */
+var StyledExerciseContainer = /*#__PURE__*/_styled("div", {
+  target: "e1tvay129"
+})("production" === "production" ? {
+  name: "1x6515k",
+  styles: "flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0"
+} : {
+  name: "1x6515k",
+  styles: "flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+/**
+ * Wrapper contains:
+ * - FileTree
+ * - FileTabs
+ * - File (Editor)
+ */
+var StyledExerciseMain = /*#__PURE__*/_styled("div", {
+  target: "e1tvay128"
+})("production" === "production" ? {
+  name: "gaqfa6",
+  styles: "flex:1;display:flex;width:100%;min-width:0;min-height:0"
+} : {
+  name: "gaqfa6",
+  styles: "flex:1;display:flex;width:100%;min-width:0;min-height:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+/**
+ * Wrapper contains:
+ * - FileTabs
+ * - File (Editor)
+ */
+var StyledExerciseFileAndTabWrap = /*#__PURE__*/_styled("div", {
+  target: "e1tvay127"
+})("flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0;background-color:", base.color.navy9, ";");
+var StyledExerciseFileWrap = /*#__PURE__*/_styled("div", {
+  target: "e1tvay126"
+})("production" === "production" ? {
+  name: "1qvekf5",
+  styles: "flex:1;min-height:0"
+} : {
+  name: "1qvekf5",
+  styles: "flex:1;min-height:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+// ========== Exercise FileTab ==========
+var StyledExerciseTabBar = /*#__PURE__*/_styled("div", {
+  target: "e1tvay125"
+})("display:flex;border-bottom:", MATERIAL_DIVIDER_BORDER_VALUE, ";");
+var StyledExerciseTabsWrap = /*#__PURE__*/_styled("div", {
+  target: "e1tvay124"
+})("production" === "production" ? {
+  name: "fxp7t8",
+  styles: "flex:1;min-width:0"
+} : {
+  name: "fxp7t8",
+  styles: "flex:1;min-width:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledExerciseTabMenuWrap = /*#__PURE__*/_styled("div", {
+  target: "e1tvay123"
+})("display:flex;justify-content:center;align-items:center;padding:0 0.5rem 0 1rem;background-color:", base.color.navy8, ";");
+// ========== Exercise FileTree ==========
+var StyledExerciseFileTreeWrap = /*#__PURE__*/_styled("div", {
+  target: "e1tvay122"
+})("flex:1;display:flex;flex-direction:column;min-width:0;height:100%;border-right:", MATERIAL_DIVIDER_BORDER_VALUE, ";");
+var StyledxerciseFileTreeContaner = /*#__PURE__*/_styled("div", {
+  target: "e1tvay121"
+})("production" === "production" ? {
+  name: "ajoz9e",
+  styles: "display:flex;height:100%;max-width:auto;&[aria-hidden='true']{max-width:0;overflow:hidden;}"
+} : {
+  name: "ajoz9e",
+  styles: "display:flex;height:100%;max-width:auto;&[aria-hidden='true']{max-width:0;overflow:hidden;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+// ========== Exercise Runner ==========
+var StyledExerciseRunnerWrap = /*#__PURE__*/_styled("div", {
+  target: "e1tvay120"
+})("width:100%;height:100%;border-top:", MATERIAL_DIVIDER_BORDER_VALUE, ";");
 /**
  * Material exercise.
  */

package/es/components/material-exercise/context/ExerciseProvider.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import type { ExerciseProviderDedicatedProps, MaterialExerciseCommonProps } from './types';
-export type ExerciseProviderProps = MaterialExerciseCommonProps & Omit<ExerciseProviderDedicatedProps, 'readOnlyActiveFile'>;
+export type ExerciseProviderProps = MaterialExerciseCommonProps & Omit<ExerciseProviderDedicatedProps, 'readOnlyActiveFile'> & {
+    children?: React.ReactNode;
+};
 /**
  * Provider for exercise, which...
  * - wrapping with `ExerciseContext`

package/es/components/material-exercise/exercise-code-history/ExerciseCodeHistory.js

@@ -1,10 +1,12 @@
+import _styled from '@emotion/styled/base';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
-import { Button, Text } from '@elice/blocks';
+import { Flex, Text, Button } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
 import { IntlComponentBuilder } from '@elice/intl';
+import { css } from '@emotion/react';
 import dayjs from 'dayjs';
 import { useRecoilValue } from 'recoil';
-import { StyledModalContent, StyledVersionsWrapper, StyledVersionRangeInputWrapper, StyledVersionRangeInput, StyledEditorWrapper, StyledFileNameBox } from './ExerciseCodeHistory.styled.js';
 import messageEn from './locales/en.json.js';
 import messageKo from './locales/ko.json.js';
 import { useUsercodeHistory } from '../../../hooks/useUsercodeHistory.js';
@@ -15,6 +17,48 @@ import ExerciseVersionListItem from '../../shared/exercise-version-list/Exercise
 import { ExerciseContext } from '../context/context.js';
 import { exerciseActiveFilenameState, exerciseEditorPreferenceState } from '../context/recoil.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 cssInputRangeTrack = "production" === "production" ? {
+  name: "jsy83f",
+  styles: "width:100%;height:0.375rem;cursor:pointer;transition:all 0.2s ease"
+} : {
+  name: "jsy83f",
+  styles: "width:100%;height:0.375rem;cursor:pointer;transition:all 0.2s ease",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var cssInputRangeThumb = /*#__PURE__*/css("height:1rem;width:1rem;border-radius:50%;background:", base.color.primary6, ";cursor:pointer;");
+var StyledModalContent = /*#__PURE__*/_styled(Flex, {
+  target: "e1y3ui135"
+})("production" === "production" ? {
+  name: "1j1fdpn",
+  styles: "position:absolute;width:100%;height:100%;overflow:hidden"
+} : {
+  name: "1j1fdpn",
+  styles: "position:absolute;width:100%;height:100%;overflow:hidden",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledVersionRangeInput = /*#__PURE__*/_styled("input", {
+  target: "e1y3ui134"
+})("--webkit-appearance:none;margin:0.5rem 0;width:100%;cursor:pointer;&:focus{outline:none;}&::-webkit-slider-runnable-track{background:", base.color.navy9, ";", cssInputRangeTrack, ";}&::-webkit-slider-thumb{-webkit-appearance:none;margin-top:calc((0.375rem - 1rem) / 2);", cssInputRangeThumb, ";}&:focus::-webkit-slider-runnable-track{background:rgba(", base.color.navy9, ", 0.05);}&::-moz-range-track{background:", base.color.navy9, ";", cssInputRangeTrack, ";}&::-moz-range-thumb{", cssInputRangeThumb, ";}");
+var StyledVersionsWrapper = /*#__PURE__*/_styled(Flex, {
+  target: "e1y3ui133"
+})("flex-direction:column;flex:1 1.75 25rem;position:relative;height:100%;border-right:1px solid ", base.color.navy9, ";");
+var StyledVersionRangeInputWrapper = /*#__PURE__*/_styled(Flex, {
+  target: "e1y3ui132"
+})("height:3rem;padding:1rem;border-bottom:1px solid ", base.color.navy9, ";");
+var StyledEditorWrapper = /*#__PURE__*/_styled(Flex, {
+  target: "e1y3ui131"
+})("production" === "production" ? {
+  name: "xf8y5j",
+  styles: "flex-direction:column;flex:1 1 auto;width:100%;height:100%;overflow:scroll"
+} : {
+  name: "xf8y5j",
+  styles: "flex-direction:column;flex:1 1 auto;width:100%;height:100%;overflow:scroll",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledFileNameBox = /*#__PURE__*/_styled(Text, {
+  target: "e1y3ui130"
+})("min-height:3rem;height:3rem;line-height:3rem;padding-left:1rem;border-bottom:1px solid ", base.color.navy9, ";");
 var ExerciseCodeHistory = function ExerciseCodeHistory(_ref) {
   var onHide = _ref.onHide,
     onLoadVersionButtonClick = _ref.onLoadVersionButtonClick,

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerArduinoAgentModal.js

@@ -139,7 +139,7 @@ var ExerciseRunnerControllerArduinoAgentModal = function ExerciseRunnerControlle
     return null;
   }
   return jsx(Modal, {
-    theme: 'dark',
+    theme: "dark",
     title: intl.formatMessage({
       id: 'exerciseRunner.controller.arduino.agent.title'
     }),