@elice/material-exercise 1.220803.0

package/es/components/material-exercise/exercise-preview/ExercisePreview.js

@@ -0,0 +1,111 @@
+import React from 'react';
+import { base } from '@elice/design-tokens';
+import { useRecoilValue } from 'recoil';
+import styled from 'styled-components';
+import NoVncLazy from '../../shared/no-vnc/NoVncLazy.js';
+import WebBrowser from '../../shared/web-browser/WebBrowser.js';
+import { exerciseState, exercisePreviewTypeState, exerciseRunnerSubmittingState, exerciseRunnerRunningState, exerciseRunnerRoomConnectionInfoState } from '../context/recoil.js';
+import { ExerciseContext } from '../context/context.js';
+import { ExercisePreviewType } from '../context/recoilTypes.js';
+import '../context/subjects.js';
+import '../context/ExerciseProvider.js';
+import { withExerciseIntlProvider } from '../context/ExerciseIntlProvider.js';
+import phrasesEn from './locales/en.json.js';
+import phrasesKo from './locales/ko.json.js';
+import ExercisePreviewDisplayModeButton from './ExercisePreviewDisplayModeButton.js';
+
+const StyledExercisePreview = styled.div.withConfig({
+  componentId: "sc-i6d1i5-0"
+})(["width:100%;height:100%;background-color:", ";"], base.color.navy7);
+/**
+ * Preview result of exercise running.
+ * - NoVnc
+ * - Web browser
+ */
+
+const ExercisePreview = () => {
+  const {
+    materialExerciseId
+  } = React.useContext(ExerciseContext);
+  const exercise = useRecoilValue(exerciseState(materialExerciseId));
+  const exercisePreviewType = useRecoilValue(exercisePreviewTypeState(materialExerciseId)); // runner states
+
+  const isSubmitting = useRecoilValue(exerciseRunnerSubmittingState);
+  const isRunning = useRecoilValue(exerciseRunnerRunningState);
+  const exerciseRunnerRoomConnectionInfo = useRecoilValue(exerciseRunnerRoomConnectionInfoState); // preview refs
+
+  const noVnc = React.useRef(null);
+  const webBrowser = React.useRef(null); //
+  // Action when exercise submitted.
+  //
+
+  React.useEffect(() => {
+    var _a, _b;
+
+    if (!isSubmitting) {
+      return;
+    }
+
+    switch (exercisePreviewType) {
+      case ExercisePreviewType.NoVnc:
+        (_a = noVnc.current) === null || _a === void 0 ? void 0 : _a.reset();
+        break;
+
+      case ExercisePreviewType.WebBrowser:
+        (_b = webBrowser.current) === null || _b === void 0 ? void 0 : _b.reload();
+        break;
+    }
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [isSubmitting]);
+  /**
+   * NoVnc
+   */
+
+  const renderNoVnc = () => {
+    if (exercisePreviewType !== ExercisePreviewType.NoVnc) {
+      return null;
+    }
+
+    if (!(exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) || !exerciseRunnerRoomConnectionInfo) {
+      return null;
+    }
+
+    return React.createElement(NoVncLazy, Object.assign({}, exerciseRunnerRoomConnectionInfo, {
+      isRunning: isRunning,
+      readyExerciseImage: exercise.readyExerciseImage,
+      exercisePreviewDisplayModeButton: React.createElement(ExercisePreviewDisplayModeButton, null),
+      ref: noVnc
+    }));
+  };
+  /**
+   * Web browser
+   */
+
+
+  const renderWebBrowser = () => {
+    if (exercisePreviewType !== ExercisePreviewType.WebBrowser) {
+      return null;
+    }
+
+    if (!exerciseRunnerRoomConnectionInfo) {
+      return null;
+    }
+
+    return React.createElement(WebBrowser, Object.assign({}, exerciseRunnerRoomConnectionInfo, {
+      menuButtons: React.createElement(ExercisePreviewDisplayModeButton, null),
+      ref: webBrowser
+    }));
+  }; //
+  //
+  //
+
+
+  return React.createElement(StyledExercisePreview, null, renderNoVnc(), renderWebBrowser());
+};
+
+var ExercisePreview$1 = withExerciseIntlProvider(ExercisePreview, {
+  en: phrasesEn,
+  ko: phrasesKo
+});
+
+export { ExercisePreview$1 as default };

package/es/components/material-exercise/exercise-preview/ExercisePreviewDisplayModeButton.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ExerciseMenuButtonProps } from "../../shared/exercise-menu-button";
+declare type ExercisePreviewDisplayModeButtonProps = Omit<ExerciseMenuButtonProps, 'icon' | 'onClick'>;
+declare const ExercisePreviewDisplayModeButton: React.ForwardRefExoticComponent<ExercisePreviewDisplayModeButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default ExercisePreviewDisplayModeButton;

package/es/components/material-exercise/exercise-preview/ExercisePreviewDisplayModeButton.js

@@ -0,0 +1,41 @@
+import React, { forwardRef } from 'react';
+import { useIntl } from 'react-intl';
+import { eilScreenHalf, eilPanelRight } from '@elice/icons';
+import { useRecoilState } from 'recoil';
+import ExerciseMenuButton from '../../shared/exercise-menu-button/ExerciseMenuButton.js';
+import { exercisePreviewDisplayModeState } from '../context/recoil.js';
+import '../context/context.js';
+import { ExercisePreviewDisplayMode } from '../context/recoilTypes.js';
+import '../context/subjects.js';
+import '../context/ExerciseProvider.js';
+
+const ExercisePreviewDisplayModeButton = forwardRef((props, ref) => {
+  var _a;
+
+  const intl = useIntl();
+  const [exercisePreviewDisplayMode, setExercisePreviewDisplayMode] = useRecoilState(exercisePreviewDisplayModeState);
+  /**
+   * Handle click.
+   */
+
+  const handleClick = () => {
+    setExercisePreviewDisplayMode(prevDisplayMode => prevDisplayMode === ExercisePreviewDisplayMode.Mini ? ExercisePreviewDisplayMode.SideBySide : ExercisePreviewDisplayMode.Mini);
+  }; //
+  //
+  //
+
+
+  return React.createElement(ExerciseMenuButton, Object.assign({}, props, {
+    icon: exercisePreviewDisplayMode === ExercisePreviewDisplayMode.Mini ? eilScreenHalf : eilPanelRight,
+    title: ((_a = props.title) !== null && _a !== void 0 ? _a : exercisePreviewDisplayMode === ExercisePreviewDisplayMode.Mini) ? intl.formatMessage({
+      id: 'exercisePreview.displayModeButton.sideBySide'
+    }) : intl.formatMessage({
+      id: 'exercisePreview.displayModeButton.mini'
+    }),
+    placement: "bottom-end",
+    onClick: handleClick,
+    ref: ref
+  }));
+});
+
+export { ExercisePreviewDisplayModeButton as default };

package/es/components/material-exercise/exercise-preview/index.d.ts

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

package/es/components/material-exercise/exercise-preview/locales/en.json.js

@@ -0,0 +1,3 @@
+var phrasesEn = {"exercisePreview.displayModeButton.mini":"Toggle to Mini mode","exercisePreview.displayModeButton.sideBySide":"Toggle to Side-by-side mode"};
+
+export { phrasesEn as default };

package/es/components/material-exercise/exercise-preview/locales/ko.json.js

@@ -0,0 +1,3 @@
+var phrasesKo = {"exercisePreview.displayModeButton.mini":"간소화 뷰로 전환","exercisePreview.displayModeButton.sideBySide":"사이드 뷰로 전환"};
+
+export { phrasesKo as default };

package/es/components/material-exercise/exercise-rightpane/ExerciseRightpane.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const _default: React.VFC<{
+    children?: React.ReactNode;
+}>;
+export default _default;

package/es/components/material-exercise/exercise-rightpane/ExerciseRightpane.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { IconButton, Flex, Text, Hr } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import { eilMathsignMultiplyBasic } from '@elice/icons';
+import { useRecoilState } from 'recoil';
+import styled from 'styled-components';
+import { MATERIAL_DIVIDER_BORDER_VALUE, getMaterialScrollBarCss } from '../../../constants/stylesheets.js';
+import { exerciseRightpaneActiveState } from '../context/recoil.js';
+import '../context/context.js';
+import '../context/recoilTypes.js';
+import '../context/subjects.js';
+import '../context/ExerciseProvider.js';
+import { withExerciseIntlProvider } from '../context/ExerciseIntlProvider.js';
+import phrasesEn from './locales/en.json.js';
+import phrasesKo from './locales/ko.json.js';
+import ExerciseRightpaneEditorPerference from './ExerciseRightpaneEditorPerference.js';
+import ExerciseRightpaneEnvironment from './ExerciseRightpaneEnvironment.js';
+
+const HEADER_CLOSE_BUTTON_SIZE = '1.75rem';
+const StyledRightpaneWrap = styled.div.withConfig({
+  componentId: "sc-1tj3x49-0"
+})(["position:relative;display:flex;flex-direction:column;width:20rem;border-left:", ";color:white;background-color:", ";"], MATERIAL_DIVIDER_BORDER_VALUE, base.color.navy9);
+const StyledPreferenceHeader = styled.div.withConfig({
+  componentId: "sc-1tj3x49-1"
+})(["display:flex;flex-direction:column;padding:0.25rem 1rem;"]);
+const StyledPreferenceHeaderCloseButton = styled(IconButton).withConfig({
+  componentId: "sc-1tj3x49-2"
+})(["flex:0 0 ", ";height:", " !important;"], HEADER_CLOSE_BUTTON_SIZE, HEADER_CLOSE_BUTTON_SIZE);
+const StyledRightpaneBodyWrap = styled.div.withConfig({
+  componentId: "sc-1tj3x49-3"
+})(["flex:1;padding:1rem;overflow-x:hidden;overflow-y:auto;", ""], getMaterialScrollBarCss({
+  width: '0.375rem',
+  borderRadius: '2px'
+}));
+
+const ExerciseRightpane = () => {
+  const [activeState, setActiveState] = useRecoilState(exerciseRightpaneActiveState);
+  /**
+   *
+   */
+
+  const handleClose = () => {
+    setActiveState(null);
+  };
+  /**
+   * Title of pane header.
+   */
+
+
+  const renderRightpaneHeaderTitle = () => {
+    switch (activeState) {
+      case 'environment':
+        return React.createElement(FormattedMessage, {
+          id: "exerciseRightpane.environment.title"
+        });
+
+      case 'preference':
+        return React.createElement(FormattedMessage, {
+          id: "exerciseRightpane.preference.title"
+        });
+
+      default:
+        return '';
+    }
+  };
+  /**
+   * Pane header.
+   */
+
+
+  const renderRightpaneHeader = () => {
+    return React.createElement(StyledPreferenceHeader, null, React.createElement(Flex, {
+      align: "center"
+    }, React.createElement(Text, {
+      role: "white",
+      bold: true,
+      block: true
+    }, renderRightpaneHeaderTitle()), React.createElement(StyledPreferenceHeaderCloseButton, {
+      icon: eilMathsignMultiplyBasic,
+      size: "tight",
+      role: "white",
+      onClick: handleClose
+    })));
+  };
+  /**
+   * Pane content.
+   */
+
+
+  const renderRightpaneBodyContent = () => {
+    switch (activeState) {
+      case 'environment':
+        return React.createElement(ExerciseRightpaneEnvironment, null);
+
+      case 'preference':
+        return React.createElement(ExerciseRightpaneEditorPerference, null);
+
+      default:
+        return null;
+    }
+  }; //
+  //
+  //
+
+
+  if (!activeState) {
+    return null;
+  }
+
+  return React.createElement(StyledRightpaneWrap, null, renderRightpaneHeader(), React.createElement(Hr, {
+    marginStart: 0,
+    marginEnd: 0,
+    color: base.color.navy6
+  }), React.createElement(StyledRightpaneBodyWrap, null, renderRightpaneBodyContent()));
+};
+
+var ExerciseRightpane$1 = withExerciseIntlProvider(ExerciseRightpane, {
+  en: phrasesEn,
+  ko: phrasesKo
+});
+
+export { ExerciseRightpane$1 as default };

package/es/components/material-exercise/exercise-rightpane/ExerciseRightpaneEditorPerference.d.ts

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

package/es/components/material-exercise/exercise-rightpane/ExerciseRightpaneEditorPerference.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useRecoilState } from 'recoil';
+import '../../shared/monaco-editor/MonacoEditorLazy.js';
+import MonacoEditorPerference from '../../shared/monaco-editor/MonacoEditorPerferenceForm.js';
+import 'monaco-editor/esm/vs/editor/editor.api';
+import '../../shared/monaco-editor/constants/monaco/preferences.js';
+import { exerciseEditorPreferenceState } from '../context/recoil.js';
+import { ExerciseContext } from '../context/context.js';
+import '../context/recoilTypes.js';
+import '../context/subjects.js';
+import '../context/ExerciseProvider.js';
+
+const ExerciseRightpaneEditorPerference = () => {
+  const {
+    locale
+  } = React.useContext(ExerciseContext);
+  const [preference, setPreference] = useRecoilState(exerciseEditorPreferenceState);
+  return React.createElement(MonacoEditorPerference, {
+    value: preference,
+    locale: locale,
+    onChange: setPreference
+  });
+}; //
+
+export { ExerciseRightpaneEditorPerference as default };

package/es/components/material-exercise/exercise-rightpane/ExerciseRightpaneEnvironment.d.ts

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

package/es/components/material-exercise/exercise-rightpane/ExerciseRightpaneEnvironment.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { Text, Vspace } from '@elice/blocks';
+import { useRecoilValue } from 'recoil';
+import styled from 'styled-components';
+import { exerciseState } from '../context/recoil.js';
+import { ExerciseContext } from '../context/context.js';
+import '../context/recoilTypes.js';
+import '../context/subjects.js';
+import '../context/ExerciseProvider.js';
+
+const StyledEnvironmentList = styled.ul.withConfig({
+  componentId: "sc-208wkr-0"
+})(["margin:0;padding:0;list-style:none;> li{margin-bottom:2rem;&:last-of-type{margin-bottom:0;}}"]);
+
+const ExerciseRightpaneEnvironment = () => {
+  const intl = useIntl();
+  const {
+    materialExerciseId
+  } = React.useContext(ExerciseContext);
+  const materialExercise = useRecoilValue(exerciseState(materialExerciseId));
+  const readyExerciseImage = materialExercise === null || materialExercise === void 0 ? void 0 : materialExercise.readyExerciseImage;
+  /**
+   *
+   */
+
+  const exerciseEnvironment = React.useMemo(() => readyExerciseImage ? [{
+    name: intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.cpuLimit.name'
+    }),
+    value: intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.cpuLimit.value'
+    })
+  }, {
+    name: intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.timeLimit.name'
+    }),
+    value: intl.formatNumber(readyExerciseImage.timeLimit / 1000, {
+      style: 'unit',
+      unit: 'second',
+      unitDisplay: 'short'
+    })
+  }, {
+    name: intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.memoryLimit.name'
+    }),
+    value: intl.formatNumber(readyExerciseImage.memoryLimit / 1024 / 1024, {
+      style: 'unit',
+      unit: 'megabyte',
+      unitDisplay: 'short'
+    })
+  }, {
+    name: intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.isVnc.name'
+    }),
+    value: readyExerciseImage.isVnc ? intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.common.value.true'
+    }) : intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.common.value.false'
+    })
+  }, {
+    name: intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.httpPort.name'
+    }),
+    value: readyExerciseImage.httpPort ? intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.httpPort.value.true'
+    }) : intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.httpPort.value.false'
+    })
+  }, {
+    name: intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.isGpu.name'
+    }),
+    value: readyExerciseImage.isGpu ? intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.common.value.true'
+    }) : intl.formatMessage({
+      id: 'exerciseRightpane.environment.item.common.value.false'
+    })
+  }] : null, [readyExerciseImage, intl]); //
+  //
+  //
+
+  if (!exerciseEnvironment) {
+    return null;
+  }
+
+  return React.createElement(StyledEnvironmentList, null, exerciseEnvironment.map(({
+    name,
+    value
+  }) => React.createElement("li", {
+    key: name
+  }, React.createElement(Text, {
+    role: "navy",
+    block: true,
+    size: "small"
+  }, name), React.createElement(Vspace, {
+    height: 0.5
+  }), React.createElement(Text, {
+    role: "white",
+    bold: true,
+    block: true,
+    size: "small"
+  }, value))));
+};
+
+export { ExerciseRightpaneEnvironment as default };

package/es/components/material-exercise/exercise-rightpane/index.d.ts

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

package/es/components/material-exercise/exercise-rightpane/locales/en.json.js

@@ -0,0 +1,3 @@
+var phrasesEn = {"exerciseRightpane.environment.item.common.value.false":"No","exerciseRightpane.environment.item.common.value.true":"Yes","exerciseRightpane.environment.item.cpuLimit.name":"CPU Limit","exerciseRightpane.environment.item.cpuLimit.value":"3 cores","exerciseRightpane.environment.item.httpPort.name":"HTTP Port","exerciseRightpane.environment.item.httpPort.value.false":"Not enabled","exerciseRightpane.environment.item.httpPort.value.true":"8080","exerciseRightpane.environment.item.isGpu.name":"GPU Enabled","exerciseRightpane.environment.item.isVnc.name":"VNC Enabled","exerciseRightpane.environment.item.memoryLimit.name":"Memory Limit","exerciseRightpane.environment.item.timeLimit.name":"Time Limit","exerciseRightpane.environment.title":"Environment","exerciseRightpane.preference.title":"Editor Preferences"};
+
+export { phrasesEn as default };

package/es/components/material-exercise/exercise-rightpane/locales/ko.json.js

@@ -0,0 +1,3 @@
+var phrasesKo = {"exerciseRightpane.environment.item.common.value.false":"아니오","exerciseRightpane.environment.item.common.value.true":"예","exerciseRightpane.environment.item.cpuLimit.name":"CPU 제한","exerciseRightpane.environment.item.cpuLimit.value":"3 코어","exerciseRightpane.environment.item.httpPort.name":"HTTP 포트","exerciseRightpane.environment.item.httpPort.value.false":"연결 안 함","exerciseRightpane.environment.item.httpPort.value.true":"8080","exerciseRightpane.environment.item.isGpu.name":"GPU 사용","exerciseRightpane.environment.item.isVnc.name":"VNC 사용","exerciseRightpane.environment.item.memoryLimit.name":"메모리 제한","exerciseRightpane.environment.item.timeLimit.name":"시간 제한","exerciseRightpane.environment.title":"실습 환경","exerciseRightpane.preference.title":"에디터 설정"};
+
+export { phrasesKo as default };

package/es/components/material-exercise/exercise-room/ExerciseRoom.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ExerciseRoomProps {
+    locale?: string;
+    onHide: () => void;
+}
+declare const _default: React.VFC<React.PropsWithChildren<ExerciseRoomProps>>;
+export default _default;

package/es/components/material-exercise/exercise-room/ExerciseRoom.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { withExerciseIntlProvider } from '../context/ExerciseIntlProvider.js';
+import phrasesEn from './locales/en.json.js';
+import phrasesKo from './locales/ko.json.js';
+import MaterialExerciseExerciseRoomDetail from './ExerciseRoomDetail.js';
+import MaterialExerciseExerciseRoomList from './ExerciseRoomList.js';
+
+const ExerciseRoom = ({
+  onHide
+}) => {
+  const [selectedExerciseRoomId, setSelectedExerciseRoomId] = React.useState();
+  return selectedExerciseRoomId ? React.createElement(MaterialExerciseExerciseRoomDetail, {
+    selectedExerciseRoomId: selectedExerciseRoomId,
+    goToList: () => setSelectedExerciseRoomId(undefined),
+    onHide: onHide
+  }) : React.createElement(MaterialExerciseExerciseRoomList, {
+    onExerciseRoomClick: id => setSelectedExerciseRoomId(id),
+    onHide: onHide
+  });
+};
+
+var ExerciseRoom$1 = withExerciseIntlProvider(ExerciseRoom, {
+  en: phrasesEn,
+  ko: phrasesKo
+});
+
+export { ExerciseRoom$1 as default };

package/es/components/material-exercise/exercise-room/ExerciseRoom.styled.d.ts

@@ -0,0 +1,9 @@
+export declare const StyledExerciseRoomTableWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledExerciseRoomTable: import("styled-components").StyledComponent<"table", any, {}, never>;
+export declare const StyledExerciseRoomThead: import("styled-components").StyledComponent<"thead", any, {}, never>;
+export declare const StyledExerciseRoomTd: import("styled-components").StyledComponent<"td", any, {}, never>;
+export declare const StyledExerciseRoomTr: import("styled-components").StyledComponent<"tr", any, {}, never>;
+export declare const StyledExerciseRoomTbody: import("styled-components").StyledComponent<"tbody", any, {
+    hoverable?: boolean | undefined;
+}, never>;
+export declare const StyledExerciseRoomTh: import("styled-components").StyledComponent<"th", any, {}, never>;

package/es/components/material-exercise/exercise-room/ExerciseRoom.styled.js

@@ -0,0 +1,30 @@
+import { base } from '@elice/design-tokens';
+import styled from 'styled-components';
+
+const StyledExerciseRoomTableWrapper = styled.div.withConfig({
+  componentId: "sc-r4oydl-0"
+})(["overflow-y:auto;max-height:25rem;border-radius:4px;background-color:", ";height:18.75rem;"], base.color.navy7);
+const StyledExerciseRoomTable = styled.table.withConfig({
+  componentId: "sc-r4oydl-1"
+})(["width:100%;color:", ";border-collapse:collapse;"], base.color.navy2);
+const StyledExerciseRoomThead = styled.thead.withConfig({
+  componentId: "sc-r4oydl-2"
+})(["& th{position:sticky;top:0;background-color:", ";z-index:100;border-bottom:1px solid ", ";}"], base.color.navy7, base.color.navy6);
+const StyledExerciseRoomTd = styled.td.withConfig({
+  componentId: "sc-r4oydl-3"
+})(["padding:0.875rem 1rem;"]);
+const StyledExerciseRoomTr = styled.tr.withConfig({
+  componentId: "sc-r4oydl-4"
+})([""]);
+const StyledExerciseRoomTbody = styled.tbody.withConfig({
+  componentId: "sc-r4oydl-5"
+})(["", "{border-bottom:1px solid ", ";}", ":hover{background-color:", ";cursor:", ";}", "{height:3.25rem;}"], StyledExerciseRoomTr, base.color.navy6, StyledExerciseRoomTr, ({
+  hoverable
+}) => hoverable ? base.color.navy5 : '', ({
+  hoverable
+}) => hoverable ? 'pointer' : 'auto', StyledExerciseRoomTd);
+const StyledExerciseRoomTh = styled.th.withConfig({
+  componentId: "sc-r4oydl-6"
+})(["font-weight:bold;font-size:", ";padding:0.875rem 1rem;text-align:left;"], base.size.body1);
+
+export { StyledExerciseRoomTable, StyledExerciseRoomTableWrapper, StyledExerciseRoomTbody, StyledExerciseRoomTd, StyledExerciseRoomTh, StyledExerciseRoomThead, StyledExerciseRoomTr };

package/es/components/material-exercise/exercise-room/ExerciseRoomDetail.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface MaterialExerciseExerciseRoomDetailProps {
+    selectedExerciseRoomId: number;
+    goToList: () => void;
+    onHide: () => void;
+}
+declare const MaterialExerciseExerciseRoomDetail: React.FC<MaterialExerciseExerciseRoomDetailProps>;
+export default MaterialExerciseExerciseRoomDetail;