@elice/material-exercise 1.220803.0

package/cjs/components/material-exercise/exercise-menu/ExerciseMenuArduinoSettings.js

@@ -0,0 +1,137 @@
+'use strict';
+
+var React = require('react');
+var blocks = require('@elice/blocks');
+var icons = require('@elice/icons');
+var recoil = require('recoil');
+var ExerciseMenuButton = require('../../shared/exercise-menu-button/ExerciseMenuButton.js');
+var arduino = require('../../../constants/arduino.js');
+var arduino$1 = require('../../../utils/arduino.js');
+var recoil$1 = require('../context/recoil.js');
+require('../context/context.js');
+require('../context/recoilTypes.js');
+require('../context/subjects.js');
+require('../context/ExerciseProvider.js');
+var ExerciseMenuStdioFileBrowser_styled = require('./ExerciseMenuStdioFileBrowser.styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ExerciseMenuArduinoSettings = () => {
+  const [open, setOpen] = React__default["default"].useState(false);
+  const anchorRef = React__default["default"].useRef(null);
+  const ports = recoil.useRecoilValue(recoil$1.exerciseArduinoPortsState);
+  const [preference, setPreference] = recoil.useRecoilState(recoil$1.exerciseArduinoPreferenceState);
+  const openedPort = recoil.useRecoilValue(recoil$1.exerciseArduinoOpenedPortNameState);
+  const onSelectPort = recoil.useRecoilValue(recoil$1.exerciseArduinoOnSelectPortState);
+  /**
+   * List of stdio files.
+   */
+
+  const renderStdioFileList = () => {
+    return React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyList, null, React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledPreferenceBodyItem, null, React__default["default"].createElement(blocks.Text, {
+      role: "gray3",
+      block: true,
+      size: "small"
+    }, "\uC804\uC1A1 \uC18D\uB3C4"), React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledSelect, {
+      value: preference.baudRate,
+      size: "small",
+      width: "xsmall",
+      onChange: value => {
+        setPreference(Object.assign(Object.assign({}, preference), {
+          baudRate: value
+        }));
+      }
+    }, arduino.ARDUINO_BAUD_RATES.map(baudRate => React__default["default"].createElement("option", {
+      key: baudRate,
+      value: baudRate
+    }, baudRate)))), React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledPreferenceBodyItem, null, React__default["default"].createElement(blocks.Text, {
+      role: "gray3",
+      block: true,
+      size: "small"
+    }, "\uC7A5\uCE58"), React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledSelect, {
+      value: openedPort !== null && openedPort !== void 0 ? openedPort : '',
+      size: "small",
+      width: "xsmall",
+      onChange: value => {
+        onSelectPort(value);
+      }
+    }, ports.length === 0 ? React__default["default"].createElement("option", {
+      value: "",
+      disabled: true
+    }, "\uC7A5\uCE58 \uC5C6\uC74C") : React__default["default"].createElement("option", {
+      value: "",
+      disabled: true
+    }, "\uC7A5\uCE58 \uC120\uD0DD"), ports.map(port => React__default["default"].createElement("option", {
+      key: port.Name,
+      value: port.Name
+    }, `${arduino$1.getDisplayName(port)}@${port.Name}`)))));
+  };
+  /**
+   * Popover header.
+   */
+
+
+  const renderStdioFilePopoverHeader = () => {
+    return React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverHeader, null, React__default["default"].createElement(blocks.Text, {
+      role: "white",
+      bold: true
+    }, React__default["default"].createElement(blocks.Flex, {
+      align: "center"
+    }, "\uC544\uB450\uC774\uB178 \uC124\uC815")), React__default["default"].createElement(blocks.IconButton, {
+      icon: icons.eilMathsignMultiplyBasic,
+      role: "white",
+      size: "micro",
+      border: false,
+      transparent: true,
+      onClick: () => setOpen(false)
+    }));
+  };
+  /**
+   * Popover body.
+   */
+
+
+  const renderStdioFilePopoverBody = () => {
+    return React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBody, {
+      children: renderStdioFileList()
+    });
+  };
+  /**
+   * Popover.
+   */
+
+
+  const renderStdioFilePopover = () => {
+    return React__default["default"].createElement(blocks.Popover, {
+      open: open,
+      anchorEl: anchorRef.current,
+      placement: "bottom-end",
+      style: {
+        zIndex: 99
+      }
+    }, React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverContent, null, renderStdioFilePopoverHeader(), renderStdioFilePopoverBody()));
+  };
+  /**
+   * Popover toggle button.
+   */
+
+
+  const renderStdioFilePopoverToggleButton = () => {
+    return React__default["default"].createElement(ExerciseMenuButton, {
+      icon: icons.eilMaterialTypeArduino,
+      title: "\uC544\uB450\uC774\uB178 \uC124\uC815",
+      active: open,
+      onClick: () => setOpen(prev => !prev),
+      ref: anchorRef
+    });
+  }; //
+  //
+  //
+
+
+  return React__default["default"].createElement(React__default["default"].Fragment, null, renderStdioFilePopover(), renderStdioFilePopoverToggleButton());
+};
+
+module.exports = ExerciseMenuArduinoSettings;

package/cjs/components/material-exercise/exercise-menu/ExerciseMenuDropdown.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ExerciseMenuDropdown: React.VFC;
+export default ExerciseMenuDropdown;

package/cjs/components/material-exercise/exercise-menu/ExerciseMenuDropdown.js

@@ -0,0 +1,120 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var blocks = require('@elice/blocks');
+var icons = require('@elice/icons');
+var recoil = require('recoil');
+var ExerciseMenuButton = require('../../shared/exercise-menu-button/ExerciseMenuButton.js');
+var recoil$1 = require('../context/recoil.js');
+require('../context/context.js');
+require('../context/recoilTypes.js');
+var subjects = require('../context/subjects.js');
+require('../context/ExerciseProvider.js');
+var ExerciseCodeHistory = require('../exercise-code-history/ExerciseCodeHistory.js');
+var ExerciseRoom = require('../exercise-room/ExerciseRoom.js');
+var ExerciseSubmitHistory = require('../exercise-submit-history/ExerciseSubmitHistory.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ExerciseMenuDropdown = () => {
+  const intl = reactIntl.useIntl();
+  const user = recoil.useRecoilValue(recoil$1.exerciseUserState);
+  const activeFilename = recoil.useRecoilValue(recoil$1.exerciseActiveFilenameState);
+  const setRightpaneActiveState = recoil.useSetRecoilState(recoil$1.exerciseRightpaneActiveState);
+  const [isSubmitHistoryModalOpen, setIsSubmitHistoryModalOpen] = React__default["default"].useState(false);
+  const [isCodeHistoryModalOpen, setIsCodeHistoryModalOpen] = React__default["default"].useState(false);
+  const [isExerciseRoomModalOpen, setIsExerciseRoomModalOpen] = React__default["default"].useState(false);
+  /**
+   *
+   */
+
+  const renderSumbitHistoryModal = () => {
+    if (!isSubmitHistoryModalOpen) {
+      return null;
+    }
+
+    return React__default["default"].createElement(ExerciseSubmitHistory, {
+      onHide: () => setIsSubmitHistoryModalOpen(false)
+    });
+  };
+  /**
+   *
+   */
+
+
+  const renderCodeHistoryModal = () => {
+    if (!isCodeHistoryModalOpen) {
+      return null;
+    }
+
+    return React__default["default"].createElement(ExerciseCodeHistory, {
+      onHide: () => setIsCodeHistoryModalOpen(false),
+      onLoadVersionButtonClick: content => {
+        subjects.exerciseFileEditorContentChange$.next(content);
+        setIsCodeHistoryModalOpen(false);
+      }
+    });
+  };
+  /**
+   *
+   */
+
+
+  const renderExerciseRoomModal = () => {
+    if (!isExerciseRoomModalOpen) {
+      return null;
+    }
+
+    return React__default["default"].createElement(ExerciseRoom, {
+      onHide: () => setIsExerciseRoomModalOpen(false)
+    });
+  }; //
+  //
+  //
+
+
+  return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(blocks.ButtonMenu, {
+    menuItemProps: [{
+      label: intl.formatMessage({
+        id: 'exerciseMenu.dropdown.item.environment'
+      }),
+      onClick: () => setRightpaneActiveState('environment')
+    }, {
+      label: intl.formatMessage({
+        id: 'exerciseMenu.dropdown.item.preference'
+      }),
+      onClick: () => setRightpaneActiveState('preference')
+    }, {
+      label: intl.formatMessage({
+        id: 'exerciseMenu.dropdown.item.codeHistory'
+      }),
+      disabled: !user,
+      onClick: () => setIsCodeHistoryModalOpen(true)
+    }, {
+      label: intl.formatMessage({
+        id: 'exerciseMenu.dropdown.item.submitHistory'
+      }),
+      disabled: !user || !activeFilename,
+      onClick: () => setIsSubmitHistoryModalOpen(true)
+    }, {
+      label: intl.formatMessage({
+        id: 'exerciseMenu.dropdown.item.room'
+      }),
+      onClick: () => setIsExerciseRoomModalOpen(true)
+    }],
+    size: "xsmall",
+    placement: "bottom-end",
+    dark: true,
+    shadow: true
+  }, React__default["default"].createElement(ExerciseMenuButton, {
+    icon: icons.eilMoreVertical,
+    title: intl.formatMessage({
+      id: 'exerciseMenu.dropdown.button.tooltip'
+    })
+  })), renderSumbitHistoryModal(), renderCodeHistoryModal(), renderExerciseRoomModal());
+};
+
+module.exports = ExerciseMenuDropdown;

package/cjs/components/material-exercise/exercise-menu/ExerciseMenuReset.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ExerciseMenuReset: React.VFC;
+export default ExerciseMenuReset;

package/cjs/components/material-exercise/exercise-menu/ExerciseMenuReset.js

@@ -0,0 +1,98 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var blocks = require('@elice/blocks');
+var icons = require('@elice/icons');
+var recoil = require('recoil');
+var ExerciseMenuButton = require('../../shared/exercise-menu-button/ExerciseMenuButton.js');
+require('react-use');
+require('socket.io-client');
+var recoil$1 = require('../context/recoil.js');
+require('../context/context.js');
+require('../context/recoilTypes.js');
+var subjects = require('../context/subjects.js');
+require('../context/ExerciseProvider.js');
+require('../../../constants/arduino.js');
+var useExerciseFile = require('../../../hooks/useExerciseFile.js');
+require('@elice/api-client');
+require('@elice/material-shared-utils');
+require('@elice/websocket');
+require('humps');
+require('ot-text-unicode');
+require('lodash/debounce');
+require('random-words');
+require('unicount');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ExerciseMenuReset = () => {
+  const intl = reactIntl.useIntl();
+  const [isDialogOpen, setDialogOpen] = React.useState(false);
+  const activeFilename = recoil.useRecoilValue(recoil$1.exerciseActiveFilenameState);
+  const isFileResettable = useExerciseFile.useExerciseFileResettable(activeFilename);
+  /**
+   * Reset the active file.
+   */
+
+  const handleReset = () => {
+    subjects.exerciseFileEditorContentChange$.next(null);
+    setDialogOpen(false);
+  };
+  /**
+   * Reset button.
+   */
+
+
+  const renderResetButton = () => {
+    return React__default["default"].createElement(ExerciseMenuButton, {
+      icon: icons.eilReset,
+      active: isDialogOpen,
+      title: isFileResettable ? intl.formatMessage({
+        id: 'exerciseMenu.reset.button.tooltip.enabled'
+      }) : intl.formatMessage({
+        id: 'exerciseMenu.reset.button.tooltip.disabled'
+      }),
+      disabled: !isFileResettable,
+      onClick: () => setDialogOpen(isOpen => !isOpen)
+    });
+  };
+  /**
+   * Reset confirm dialog.
+   */
+
+
+  const renderResetConfirmDialog = () => {
+    if (!isDialogOpen) {
+      return null;
+    }
+
+    return React__default["default"].createElement(blocks.Dialog, {
+      type: "warning",
+      title: intl.formatMessage({
+        id: 'exerciseMenu.reset.confirmDialog.title'
+      }),
+      body: intl.formatMessage({
+        id: 'exerciseMenu.reset.confirmDialog.body'
+      }),
+      onHide: () => setDialogOpen(false)
+    }, React__default["default"].createElement(blocks.Dialog.CloseButton, {
+      onClick: () => setDialogOpen(false)
+    }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "exerciseMenu.reset.confirmDialog.cancel"
+    })), React__default["default"].createElement(blocks.Dialog.ActionButton, {
+      onClick: handleReset
+    }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "exerciseMenu.reset.confirmDialog.confirm"
+    })));
+  }; //
+  //
+  //
+
+
+  return React__default["default"].createElement(React__default["default"].Fragment, null, renderResetButton(), renderResetConfirmDialog());
+};
+
+module.exports = ExerciseMenuReset;

package/cjs/components/material-exercise/exercise-menu/ExerciseMenuStdioFileBrowser.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ExerciseMenuStdioFileBrowser: React.VFC;
+export default ExerciseMenuStdioFileBrowser;

package/cjs/components/material-exercise/exercise-menu/ExerciseMenuStdioFileBrowser.js

@@ -0,0 +1,231 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var icons = require('@elice/icons');
+var recoil = require('recoil');
+var ExerciseMenuButton = require('../../shared/exercise-menu-button/ExerciseMenuButton.js');
+var recoil$1 = require('../context/recoil.js');
+require('../context/context.js');
+require('../context/recoilTypes.js');
+require('../context/subjects.js');
+require('../context/ExerciseProvider.js');
+var ExerciseMenuStdioFileBrowser_styled = require('./ExerciseMenuStdioFileBrowser.styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const IMAGE_NEW_WIN_IFRAME_STYLE = 'border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;';
+
+const ExerciseMenuStdioFileBrowser = () => {
+  const intl = reactIntl.useIntl();
+  const [open, setOpen] = React__default["default"].useState(false);
+  const anchorRef = React__default["default"].useRef(null);
+  const stdioFiles = recoil.useRecoilValue(recoil$1.exerciseRunnerStdioFilesState);
+  /**
+   * Open image as new window.
+   */
+
+  const handleImageFileClick = e => {
+    e.preventDefault();
+    const win = window.open('about:blank', e.currentTarget.target);
+
+    if (win) {
+      // since `Not allowed to navigate top frame to data URL:` error thrown by browser,
+      // use iframe to display image at new window.
+      win.document.write(`<iframe src="${e.currentTarget.href}" frameborder="0" style="${IMAGE_NEW_WIN_IFRAME_STYLE}" allowfullscreen></iframe>`);
+      win.focus();
+    }
+  }; //
+  // Open stdio file browser, on file changes.
+  //
+
+
+  React__default["default"].useEffect(() => {
+    if (stdioFiles && stdioFiles.length > 0) {
+      setOpen(true);
+    }
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [stdioFiles]);
+  /**
+   * Image type stdio file.
+   */
+
+  const renderStdioFileListItemImage = (key, f) => {
+    var _a;
+
+    const ext = (_a = f.mime) === null || _a === void 0 ? void 0 : _a.split('/').pop();
+    const filename = ext ? `image_output.${ext}` : 'image_output';
+    return React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItem, {
+      key: key
+    }, React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItemContentImageWrap, {
+      href: f.data,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      onClick: handleImageFileClick
+    }, React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItemContentImage, {
+      src: f.data,
+      alt: filename
+    })), React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItemDownloadButton, {
+      href: f.data,
+      download: filename
+    }, React__default["default"].createElement(blocks.Icon, {
+      icon: icons.eilDownload
+    })));
+  };
+  /**
+   * File type stdio file.
+   */
+
+
+  const renderStdioFileListFile = (key, f) => {
+    const size = (f.data.length / 1024).toFixed(2);
+    return React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItem, {
+      key: key
+    }, React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItemContentFile, null, React__default["default"].createElement(blocks.Text, {
+      children: f.filename,
+      role: "white",
+      size: "small"
+    }), React__default["default"].createElement(blocks.Text, {
+      children: `${size} KB`,
+      role: "gray4",
+      size: "tiny"
+    })), React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItemDownloadButton, {
+      href: f.data,
+      download: f.filename
+    }, React__default["default"].createElement(blocks.Icon, {
+      icon: icons.eilDownload
+    })));
+  };
+  /**
+   * Empty list of stdio files.
+   */
+
+
+  const renderStdioFileListEmpty = () => {
+    return React__default["default"].createElement(blocks.Flex, {
+      column: true,
+      align: "center",
+      width: "100%",
+      paddingy: "1.5rem"
+    }, React__default["default"].createElement(blocks.Icon, {
+      icon: icons.eilFolder,
+      size: "jumbo",
+      color: designTokens.base.color.navy3
+    }), React__default["default"].createElement(blocks.Vspace, {
+      height: 0.5
+    }), React__default["default"].createElement(blocks.Text, {
+      role: "navy",
+      size: "small",
+      textAlign: "center",
+      preWrap: true
+    }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "exerciseMenu.stdioFileBrowser.popover.body.placeholder"
+    })));
+  };
+  /**
+   * List of stdio files.
+   */
+
+
+  const renderStdioFileList = () => {
+    if (!stdioFiles || !stdioFiles.length) {
+      return renderStdioFileListEmpty();
+    }
+
+    return React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyList, null, stdioFiles.map((f, index) => {
+      switch (f.type) {
+        case 'image':
+          return renderStdioFileListItemImage(index, f);
+
+        case 'file':
+          return renderStdioFileListFile(index, f);
+
+        default:
+          return null;
+      }
+    }));
+  };
+  /**
+   * Popover header.
+   */
+
+
+  const renderStdioFilePopoverHeader = () => {
+    return React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverHeader, null, React__default["default"].createElement(blocks.Flex, {
+      align: "center"
+    }, React__default["default"].createElement(blocks.Text, {
+      role: "white",
+      size: "small",
+      bold: true
+    }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "exerciseMenu.stdioFileBrowser.popover.header"
+    })), React__default["default"].createElement(blocks.Hspace, {
+      width: 0.5
+    }), React__default["default"].createElement(blocks.NotificationCount, {
+      role: "white",
+      value: stdioFiles.length
+    })), React__default["default"].createElement(blocks.IconButton, {
+      icon: icons.eilMathsignMultiplyBasic,
+      role: "white",
+      size: "micro",
+      border: false,
+      transparent: true,
+      onClick: () => setOpen(false)
+    }));
+  };
+  /**
+   * Popover body.
+   */
+
+
+  const renderStdioFilePopoverBody = () => {
+    return React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBody, {
+      children: renderStdioFileList()
+    });
+  };
+  /**
+   * Popover.
+   */
+
+
+  const renderStdioFilePopover = () => {
+    return React__default["default"].createElement(blocks.Popover, {
+      open: open,
+      anchorEl: anchorRef.current,
+      placement: "bottom-end",
+      style: {
+        zIndex: 99
+      }
+    }, React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverContent, null, renderStdioFilePopoverHeader(), renderStdioFilePopoverBody()));
+  };
+  /**
+   * Popover toggle button.
+   */
+
+
+  const renderStdioFilePopoverToggleButton = () => {
+    return React__default["default"].createElement(ExerciseMenuButton, {
+      icon: icons.eilAttachment,
+      active: open,
+      title: intl.formatMessage({
+        id: 'exerciseMenu.stdioFileBrowser.button.tooltip'
+      }),
+      onClick: () => setOpen(prev => !prev),
+      ref: anchorRef
+    }, React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledMenuButtonFileCount, {
+      role: "white",
+      value: stdioFiles.length
+    }));
+  }; //
+  //
+  //
+
+
+  return React__default["default"].createElement(React__default["default"].Fragment, null, renderStdioFilePopover(), renderStdioFilePopoverToggleButton());
+};
+
+module.exports = ExerciseMenuStdioFileBrowser;

package/cjs/components/material-exercise/exercise-menu/ExerciseMenuStdioFileBrowser.styled.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const StyledMenuButtonFileCount: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").NotificationCountProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledFilePopoverContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFilePopoverHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFilePopoverBody: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFilePopoverBodyList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const StyledFilePopoverBodyListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const StyledFilePopoverBodyListItemDownloadButton: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const StyledFilePopoverBodyListItemContentFile: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFilePopoverBodyListItemContentImageWrap: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const StyledFilePopoverBodyListItemContentImage: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const StyledPreferenceBodyItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSelect: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").SelectProps & import("react").RefAttributes<HTMLSelectElement>>, any, {}, never>;

package/cjs/components/material-exercise/exercise-menu/ExerciseMenuStdioFileBrowser.styled.js

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledMenuButtonFileCount = styled__default["default"](blocks.NotificationCount).withConfig({
+  componentId: "sc-9mtuee-0"
+})(["position:absolute;top:0.2rem;right:0.2rem;padding:0;min-width:0.625rem;height:0.625rem;font-size:0.5rem;"]);
+const StyledFilePopoverContent = styled__default["default"].div.withConfig({
+  componentId: "sc-9mtuee-1"
+})(["display:flex;flex-direction:column;padding:0;width:252px;min-height:178px;max-height:383px;border-radius:8px;background-color:", ";overflow:hidden;"], designTokens.base.color.navy6);
+const StyledFilePopoverHeader = styled__default["default"].div.withConfig({
+  componentId: "sc-9mtuee-2"
+})(["flex:0 0 2.5rem;display:flex;justify-content:space-between;align-items:center;padding:0 1rem;color:white;background-color:", ";"], designTokens.base.color.navy7);
+const StyledFilePopoverBody = styled__default["default"].div.withConfig({
+  componentId: "sc-9mtuee-3"
+})(["flex:1;overflow-x:hidden;overflow-y:auto;"]);
+const StyledFilePopoverBodyList = styled__default["default"].ul.withConfig({
+  componentId: "sc-9mtuee-4"
+})(["margin:0;padding:0.5rem;width:100%;height:100%;"]);
+const StyledFilePopoverBodyListItem = styled__default["default"].li.withConfig({
+  componentId: "sc-9mtuee-5"
+})(["display:flex;margin-bottom:0.5rem;border-radius:0.5rem;background-color:", ";overflow:hidden;&:last-of-type{margin-bottom:0;}"], designTokens.base.color.navy5);
+const StyledFilePopoverBodyListItemDownloadButton = styled__default["default"].a.withConfig({
+  componentId: "sc-9mtuee-6"
+})(["display:flex;align-items:center;justify-content:center;padding:0.75rem;color:", ";font-size:1rem;background-color:", ";"], designTokens.base.color.white, designTokens.base.color.primary5);
+const StyledFilePopoverBodyListItemContentFile = styled__default["default"].div.withConfig({
+  componentId: "sc-9mtuee-7"
+})(["flex:1;display:flex;align-items:center;justify-content:space-between;padding:0 0.5rem;"]);
+const StyledFilePopoverBodyListItemContentImageWrap = styled__default["default"].a.withConfig({
+  componentId: "sc-9mtuee-8"
+})(["display:flex;padding:0.5rem;flex:1 1 0;background:", ";"], designTokens.base.color.white);
+const StyledFilePopoverBodyListItemContentImage = styled__default["default"].img.withConfig({
+  componentId: "sc-9mtuee-9"
+})(["width:100%;max-height:128px;object-fit:contain;"]);
+const StyledPreferenceBodyItem = styled__default["default"].div.withConfig({
+  componentId: "sc-9mtuee-10"
+})(["display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;min-height:2rem;color:white;&:last-child{margin-bottom:0;}"]);
+const StyledSelect = styled__default["default"](blocks.Select).withConfig({
+  componentId: "sc-9mtuee-11"
+})(["> div{background:", " !important;border-color:", " !important;}select{padding:0 !important;height:2rem !important;color:#fff !important;> option{background:", " !important;}}"], designTokens.base.color.navy8, designTokens.base.color.navy7, designTokens.base.color.navy8);
+
+exports.StyledFilePopoverBody = StyledFilePopoverBody;
+exports.StyledFilePopoverBodyList = StyledFilePopoverBodyList;
+exports.StyledFilePopoverBodyListItem = StyledFilePopoverBodyListItem;
+exports.StyledFilePopoverBodyListItemContentFile = StyledFilePopoverBodyListItemContentFile;
+exports.StyledFilePopoverBodyListItemContentImage = StyledFilePopoverBodyListItemContentImage;
+exports.StyledFilePopoverBodyListItemContentImageWrap = StyledFilePopoverBodyListItemContentImageWrap;
+exports.StyledFilePopoverBodyListItemDownloadButton = StyledFilePopoverBodyListItemDownloadButton;
+exports.StyledFilePopoverContent = StyledFilePopoverContent;
+exports.StyledFilePopoverHeader = StyledFilePopoverHeader;
+exports.StyledMenuButtonFileCount = StyledMenuButtonFileCount;
+exports.StyledPreferenceBodyItem = StyledPreferenceBodyItem;
+exports.StyledSelect = StyledSelect;

package/cjs/components/material-exercise/exercise-menu/index.d.ts

@@ -0,0 +1 @@
+export { default as ExerciseMenu } from './ExerciseMenu';