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

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

@@ -1,5 +1,5 @@
 export { default as MaterialExercise } from './MaterialExercise';
-export type { MaterialExerciseProps, MaterialExerciseApis, } from './MaterialExercise';
+export type { MaterialExerciseProps, MaterialExerciseApis } from './MaterialExercise';
 export { default as MaterialExerciseMobile } from './MaterialExerciseMobile';
 export type { MaterialExerciseMobileProps } from './MaterialExerciseMobile';
 export type { MaterialExerciseCommonApis, MaterialExerciseCommonApiSendTextToTerminal, MaterialExerciseCommonProps, MaterialExerciseCommonPropExerciseImageEmptyOptions, MaterialExerciseCommonPropOnCodeHelpRequest, MaterialExerciseCommonPropOnCodeEditorChange, MaterialExerciseCommonPropOnStdioError, MaterialExerciseCommonPropOnDefaultExerciseRoomIdSet, MaterialExerciseCommonPropOnExerciseRoomIdChange, MaterialExerciseCommonPropOnRunningDone, MaterialExerciseCommonPropOnSubmit, MaterialExerciseCommonPropOnError, } from './context/types';

package/es/components/shared/exercise-menu-button/ExerciseMenuButton.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { IconButtonProps, TooltipProps } from '@elice/blocks';
+import type React from 'react';
 type PickedIconButtonProps = Pick<IconButtonProps, 'icon' | 'disabled' | 'loading' | 'onClick' | 'style'>;
 type PickedTooltipProps = Pick<TooltipProps, 'title' | 'placement'>;
 export interface ExerciseMenuButtonProps extends PickedIconButtonProps, PickedTooltipProps {

package/es/components/shared/exercise-menu-button/ExerciseMenuButton.js

@@ -1,22 +1,30 @@
+import _styled from '@emotion/styled/base';
 import { __rest } from 'tslib';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { IconButton, Tooltip } from '@elice/blocks';
+import { Tooltip, IconButton } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
-import styled from 'styled-components';
 
+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 StyledMenuButtonWrap = styled.span.withConfig({
-  componentId: "sc-48m0vh-0"
-})(["position:relative;"]);
-var StyledMenuButton = styled(IconButton).withConfig({
-  componentId: "sc-48m0vh-1"
-})(["", ""], function (_ref) {
+var StyledMenuButtonWrap = /*#__PURE__*/_styled("span", {
+  target: "e1p5894c1"
+})("production" === "production" ? {
+  name: "bjn8wh",
+  styles: "position:relative"
+} : {
+  name: "bjn8wh",
+  styles: "position:relative",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledMenuButton = /*#__PURE__*/_styled(IconButton, {
+  target: "e1p5894c0"
+})(function (_ref) {
   var active = _ref.active;
   return active && "background: ".concat(base.color.navy6, " !important;");
-});
+}, ";");
 //
 //
 //
@@ -29,9 +37,9 @@ var ExerciseMenuButton = forwardRef(function (_a, ref) {
     placement = _a$placement === void 0 ? 'bottom-end' : _a$placement,
     props = __rest(_a, ["children", "active", "title", "placement"]);
   return jsx(Tooltip, {
+    dark: true,
     title: title,
     placement: placement,
-    dark: true,
     children: jsxs(StyledMenuButtonWrap, {
       children: [jsx(StyledMenuButton, Object.assign({
         transparent: true,

package/es/components/shared/exercise-shimmer/ExerciseFileShimmer.d.ts

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

package/es/components/shared/exercise-shimmer/ExerciseFileShimmer.js

@@ -1,47 +1,47 @@
+import _styled from '@emotion/styled/base';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Shimmer, Vspace } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
-import styled from 'styled-components';
 
-var StyledFileShimmerWrap = styled.div.withConfig({
-  componentId: "sc-mf825x-0"
-})(["padding:1rem;width:100%;height:100%;background:", ";overflow:hidden;"], base.color.navy9);
+var StyledFileShimmerWrap = /*#__PURE__*/_styled("div", {
+  target: "e1ynaedw0"
+})("padding:1rem;width:100%;height:100%;background:", base.color.navy9, ";overflow:hidden;");
 var ExerciseFileShimmer = function ExerciseFileShimmer() {
   return jsxs(StyledFileShimmerWrap, {
     children: [jsx(Shimmer, {
+      dark: true,
       width: "150px",
-      height: "1rem",
-      dark: true
+      height: "1rem"
     }), jsx(Vspace, {
       height: 1
     }), jsx(Shimmer, {
+      dark: true,
       width: "100px",
-      height: "1rem",
-      dark: true
+      height: "1rem"
     }), jsx(Vspace, {
       height: 1
     }), jsx(Shimmer, {
+      dark: true,
       width: "300px",
-      height: "1rem",
-      dark: true
+      height: "1rem"
     }), jsx(Vspace, {
       height: 1
     }), jsx(Shimmer, {
+      dark: true,
       width: "200px",
-      height: "1rem",
-      dark: true
+      height: "1rem"
     }), jsx(Vspace, {
       height: 1
     }), jsx(Shimmer, {
+      dark: true,
       width: "250px",
-      height: "1rem",
-      dark: true
+      height: "1rem"
     }), jsx(Vspace, {
       height: 1
     }), jsx(Shimmer, {
+      dark: true,
       width: "150px",
-      height: "1rem",
-      dark: true
+      height: "1rem"
     })]
   });
 };

package/es/components/shared/exercise-shimmer/ExerciseFileTabShimmer.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 interface ExerciseFileTabShimmerProps {
     width?: number;
 }

package/es/components/shared/exercise-shimmer/ExerciseFileTabShimmer.js

@@ -1,29 +1,29 @@
+import _styled from '@emotion/styled/base';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Shimmer, Hspace } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
-import styled from 'styled-components';
 
 var TAB_HEIGHT = 36;
 var TAB_CONTENT_GAP = 8;
 var TAB_CONTENT_FILENAME_HEIGHT = 16;
 var TAB_CONTENT_CLOSE_BUTTON_SIZE = 14;
-var StyledDummyFileTab = styled.div.withConfig({
-  componentId: "sc-q9m9qo-0"
-})(["display:flex;align-items:center;padding:0 0.5rem;height:", "px;border-right:1px solid ", ";background-color:", ";overflow:hidden;"], TAB_HEIGHT, base.color.navy9, base.color.navy8);
+var StyledDummyFileTab = /*#__PURE__*/_styled("div", {
+  target: "e1a9yuw10"
+})("display:flex;align-items:center;padding:0 0.5rem;height:", TAB_HEIGHT, "px;border-right:1px solid ", base.color.navy9, ";background-color:", base.color.navy8, ";overflow:hidden;");
 var ExerciseFileTabShimmer = function ExerciseFileTabShimmer(_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? 150 : _ref$width;
   return jsxs(StyledDummyFileTab, {
     children: [jsx(Shimmer, {
+      dark: true,
       width: "".concat(width, "px"),
-      height: "".concat(TAB_CONTENT_FILENAME_HEIGHT, "px"),
-      dark: true
+      height: "".concat(TAB_CONTENT_FILENAME_HEIGHT, "px")
     }), jsx(Hspace, {
       width: TAB_CONTENT_GAP / 16
     }), jsx(Shimmer, {
+      dark: true,
       width: "".concat(TAB_CONTENT_CLOSE_BUTTON_SIZE, "px"),
-      height: "".concat(TAB_CONTENT_CLOSE_BUTTON_SIZE, "px"),
-      dark: true
+      height: "".concat(TAB_CONTENT_CLOSE_BUTTON_SIZE, "px")
     })]
   });
 };

package/es/components/shared/exercise-shimmer/ExerciseFileTabsShimmer.d.ts

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

package/es/components/shared/exercise-shimmer/ExerciseFileTabsShimmer.js

@@ -1,11 +1,11 @@
+import _styled from '@emotion/styled/base';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { base } from '@elice/design-tokens';
-import styled from 'styled-components';
 import ExerciseFileTabShimmer from './ExerciseFileTabShimmer.js';
 
-var StyledShimmerWrapper = styled.div.withConfig({
-  componentId: "sc-107bpmt-0"
-})(["display:flex;width:100%;height:100%;background-color:", ";overflow:hidden;"], base.color.navy9);
+var StyledShimmerWrapper = /*#__PURE__*/_styled("div", {
+  target: "e1djiqxd0"
+})("display:flex;width:100%;height:100%;background-color:", base.color.navy9, ";overflow:hidden;");
 var ExerciseFileTabsShimmer = function ExerciseFileTabsShimmer() {
   return jsxs(StyledShimmerWrapper, {
     children: [jsx(ExerciseFileTabShimmer, {

package/es/components/shared/exercise-shimmer/ExerciseFileTreeListItemShimmer.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 interface ExerciseFileTreeListItemShimmerProps {
     width?: number;
 }

package/es/components/shared/exercise-shimmer/ExerciseFileTreeListItemShimmer.js

@@ -1,32 +1,32 @@
+import _styled from '@emotion/styled/base';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Shimmer, Hspace } from '@elice/blocks';
-import styled from 'styled-components';
+import { Hspace, Shimmer } from '@elice/blocks';
 
 var FILE_TREE_LIST_ITEM_HORIZONTAL_PADDING = 14;
 var FILE_TREE_LIST_ITEM_HEIGHT = 28;
 var FILE_TREE_LIST_ITEM_ICON_SIZE = 16;
 var FILE_TREE_LIST_ITEM_GAP = 8;
 var FILE_TREE_LIST_ITEM_FILENAME_HEIGHT = 14;
-var StyledDummyListItemIconShimmer = styled(Shimmer).withConfig({
-  componentId: "sc-x7bcnn-0"
-})(["flex:0 0 ", "px;"], FILE_TREE_LIST_ITEM_ICON_SIZE);
-var StyledDummyListItem = styled.li.withConfig({
-  componentId: "sc-x7bcnn-1"
-})(["display:flex;align-items:center;margin:0;padding:0 ", "px;width:100%;height:", "px;list-style:none;"], FILE_TREE_LIST_ITEM_HORIZONTAL_PADDING, FILE_TREE_LIST_ITEM_HEIGHT);
+var StyledDummyListItemIconShimmer = /*#__PURE__*/_styled(Shimmer, {
+  target: "endw1qd1"
+})("flex:0 0 ", FILE_TREE_LIST_ITEM_ICON_SIZE, "px;");
+var StyledDummyListItem = /*#__PURE__*/_styled("li", {
+  target: "endw1qd0"
+})("display:flex;align-items:center;margin:0;padding:0 ", FILE_TREE_LIST_ITEM_HORIZONTAL_PADDING, "px;width:100%;height:", FILE_TREE_LIST_ITEM_HEIGHT, "px;list-style:none;");
 var ExerciseFileTreeListItemShimmer = function ExerciseFileTreeListItemShimmer(_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? 100 : _ref$width;
   return jsxs(StyledDummyListItem, {
     children: [jsx(StyledDummyListItemIconShimmer, {
+      dark: true,
       width: "".concat(FILE_TREE_LIST_ITEM_ICON_SIZE, "px"),
-      height: "".concat(FILE_TREE_LIST_ITEM_ICON_SIZE, "px"),
-      dark: true
+      height: "".concat(FILE_TREE_LIST_ITEM_ICON_SIZE, "px")
     }), jsx(Hspace, {
       width: FILE_TREE_LIST_ITEM_GAP / 16
     }), jsx(Shimmer, {
+      dark: true,
       width: "".concat(width, "px"),
-      height: "".concat(FILE_TREE_LIST_ITEM_FILENAME_HEIGHT, "px"),
-      dark: true
+      height: "".concat(FILE_TREE_LIST_ITEM_FILENAME_HEIGHT, "px")
     })]
   });
 };

package/es/components/shared/exercise-shimmer/ExerciseFileTreeListShimmer.js

@@ -1,18 +1,26 @@
+import _styled from '@emotion/styled/base';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { base } from '@elice/design-tokens';
-import styled from 'styled-components';
 import ExerciseFileTreeListItemShimmer from './ExerciseFileTreeListItemShimmer.js';
 
-var StyledShimmerWrapper = styled.div.withConfig({
-  componentId: "sc-ol0qbo-0"
-})(["display:flex;flex-direction:column;width:100%;height:100%;background:", ";overflow:hidden;"], base.color.navy9);
-var StyledDummyToolbar = styled.div.withConfig({
-  componentId: "sc-ol0qbo-1"
-})(["flex:0 0 2.25rem;background-color:", ";"], base.color.navy8);
-var StyledDummyList = styled.div.withConfig({
-  componentId: "sc-ol0qbo-2"
-})(["flex:1;display:flex;flex-direction:column;width:100%;overflow:hidden;"]);
+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 StyledShimmerWrapper = /*#__PURE__*/_styled("div", {
+  target: "e1821qdr2"
+})("display:flex;flex-direction:column;width:100%;height:100%;background:", base.color.navy9, ";overflow:hidden;");
+var StyledDummyToolbar = /*#__PURE__*/_styled("div", {
+  target: "e1821qdr1"
+})("flex:0 0 2.25rem;background-color:", base.color.navy8, ";");
+var StyledDummyList = /*#__PURE__*/_styled("div", {
+  target: "e1821qdr0"
+})("production" === "production" ? {
+  name: "hqayz0",
+  styles: "flex:1;display:flex;flex-direction:column;width:100%;overflow:hidden"
+} : {
+  name: "hqayz0",
+  styles: "flex:1;display:flex;flex-direction:column;width:100%;overflow:hidden",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 var ExerciseFileTreeListShimmer = function ExerciseFileTreeListShimmer() {
   var widths = React.useMemo(function () {
     return new Array(Math.round(Math.random() * 5) + 5).fill(0).map(function () {

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

@@ -1,3 +1,3 @@
-import React from 'react';
+import type React from 'react';
 declare const ExerciseVersionList: React.FC;
 export default ExerciseVersionList;

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

@@ -1,8 +1,5 @@
-/// <reference types="react" />
-export declare const StyledVersionList: import("styled-components").StyledComponent<import("react").FC<import("@elice/blocks").ListProps> & {
-    Item: import("react").FC<import("@elice/blocks").ListItemProps>;
-    ItemText: import("react").FC<import("@elice/blocks").ListItemTextProps>;
-    ItemIcon: import("react").FC<import("@elice/blocks").ListItemIconProps>;
-    Divider: import("react").FC<import("@elice/blocks").ListDividerProps>;
-    SubHeader: import("react").FC<import("@elice/blocks").ListSubHeaderProps>;
-}, any, {}, never>;
+export declare const StyledVersionList: import("@emotion/styled").StyledComponent<import("@elice/blocks").ListProps & {
+    children?: import("react").ReactNode | undefined;
+} & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

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

@@ -1,8 +1,16 @@
+import _styled from '@emotion/styled/base';
 import { List } from '@elice/blocks';
-import styled from 'styled-components';
 
-var StyledVersionList = styled(List).withConfig({
-  componentId: "sc-wqxvzc-0"
-})(["height:100%;padding:0;overflow:scroll;background-color:transparent;& > last-of-type{border:none;}"]);
+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: "e1kcjofl0"
+})("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__
+});
 
 export { StyledVersionList };

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 interface ExerciseVersionListItemProps {
     selected?: boolean;
     style?: React.CSSProperties;

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

@@ -1,6 +1,21 @@
-/// <reference types="react" />
 import { Text } from '@elice/blocks';
-export declare const StyledExerciseVersionItem: import("styled-components").StyledComponent<import("react").FC<import("@elice/blocks").ListItemProps>, any, {}, never>;
-export declare const StyledExerciseVersionRunType: import("styled-components").StyledComponent<typeof Text, any, {}, never>;
-export declare const StyledExerciseVersionDatetime: import("styled-components").StyledComponent<typeof Text, any, {}, never>;
-export declare const StyledExerciseVersionScore: import("styled-components").StyledComponent<typeof Text, any, {}, never>;
+export declare const StyledExerciseVersionItem: import("@emotion/styled").StyledComponent<import("@elice/blocks").ListItemProps & {
+    children?: import("react").ReactNode | undefined;
+} & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledExerciseVersionRunType: import("@emotion/styled").StyledComponent<Pick<import("@elice/blocks").TextProps, never> & Partial<Pick<import("@elice/blocks").TextProps, keyof import("@elice/blocks").TextProps>> & Partial<Pick<import("@elice/blocks").TextProps, never>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;
+export declare const StyledExerciseVersionDatetime: import("@emotion/styled").StyledComponent<Pick<import("@elice/blocks").TextProps, never> & Partial<Pick<import("@elice/blocks").TextProps, keyof import("@elice/blocks").TextProps>> & Partial<Pick<import("@elice/blocks").TextProps, never>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;
+export declare const StyledExerciseVersionScore: import("@emotion/styled").StyledComponent<Pick<import("@elice/blocks").TextProps, never> & Partial<Pick<import("@elice/blocks").TextProps, keyof import("@elice/blocks").TextProps>> & Partial<Pick<import("@elice/blocks").TextProps, never>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;

package/es/components/shared/exercise-version-list/ExerciseVersionListItem.styled.js

@@ -1,22 +1,44 @@
+import _styled from '@emotion/styled/base';
 import { List, Text } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
-import styled from 'styled-components';
 
-var StyledExerciseVersionItem = styled(List.Item).withConfig({
-  componentId: "sc-8jsi1o-0"
-})(["display:flex;width:100%;height:3.25rem;padding:1rem 1.5rem;border-bottom:1px solid ", ";border-left:0.25rem solid transparent;background-color:transparent;align-items:baseline;& > div:not(:last-child){margin-right:0.5rem;}&:hover{background-color:", ";}border-left:0.25rem solid ", ";background-color:", ";"], base.color.navy9, base.color.gray6, function (props) {
+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 StyledExerciseVersionItem = /*#__PURE__*/_styled(List.Item, {
+  target: "e14ixbs03"
+})("display:flex;width:100%;height:3.25rem;padding:1rem 1.5rem;border-bottom:1px solid ", base.color.navy9, ";border-left:0.25rem solid transparent;background-color:transparent;align-items:baseline;&>div:not(:last-child){margin-right:0.5rem;}&:hover{background-color:", base.color.gray6, ";}border-left:0.25rem solid ", function (props) {
   return props.selected ? base.color.primary6 : 'transparent';
-}, function (props) {
+}, ";background-color:", function (props) {
   return props.selected ? base.color.gray6 : 'initial';
+}, ";");
+var StyledExerciseVersionRunType = /*#__PURE__*/_styled(Text, {
+  target: "e14ixbs02"
+})("production" === "production" ? {
+  name: "1sl9qm",
+  styles: "flex:0 1 auto;min-width:fit-content"
+} : {
+  name: "1sl9qm",
+  styles: "flex:0 1 auto;min-width:fit-content",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledExerciseVersionDatetime = /*#__PURE__*/_styled(Text, {
+  target: "e14ixbs01"
+})("production" === "production" ? {
+  name: "eykqtd",
+  styles: "flex:none"
+} : {
+  name: "eykqtd",
+  styles: "flex:none",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledExerciseVersionScore = /*#__PURE__*/_styled(Text, {
+  target: "e14ixbs00"
+})("production" === "production" ? {
+  name: "1fsmvrc",
+  styles: "flex:auto;text-align:right"
+} : {
+  name: "1fsmvrc",
+  styles: "flex:auto;text-align:right",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-var StyledExerciseVersionRunType = styled(Text).withConfig({
-  componentId: "sc-8jsi1o-1"
-})(["flex:0 1 auto;min-width:fit-content;"]);
-var StyledExerciseVersionDatetime = styled(Text).withConfig({
-  componentId: "sc-8jsi1o-2"
-})(["flex:none;"]);
-var StyledExerciseVersionScore = styled(Text).withConfig({
-  componentId: "sc-8jsi1o-3"
-})(["flex:auto;text-align:right;"]);
 
 export { StyledExerciseVersionDatetime, StyledExerciseVersionItem, StyledExerciseVersionRunType, StyledExerciseVersionScore };

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

@@ -2,8 +2,8 @@ import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { eilMathsignMultiplyBasic } from '@elice/icons';
-import FileIcon from '../file-icon/FileIcon.js';
 import { StyledTab, StyledTabContent, StyledTabActiveBorder, StyledTabLabel, StyledTabCloseButton, StyledTabLabelFilename, StyledTabLabelDirname } from './FileTab.styled.js';
+import FileIcon from '../file-icon/FileIcon.js';
 
 var EMPTY_CHUNKS = [];
 var FileTab = function FileTab(_a) {
@@ -46,8 +46,8 @@ var FileTab = function FileTab(_a) {
    */
   var renderTabFileName = function renderTabFileName() {
     return jsx(StyledTabLabelFilename, {
-      size: "tiny",
       noWrap: true,
+      size: "tiny",
       children: filename
     });
   };
@@ -60,9 +60,9 @@ var FileTab = function FileTab(_a) {
     }
     var parentDir = chunks.slice().pop();
     return jsx(StyledTabLabelDirname, {
+      noWrap: true,
       role: "gray5",
       size: "tiny",
-      noWrap: true,
       children: parentDir ? ".../".concat(parentDir) : '/'
     });
   };
@@ -79,10 +79,10 @@ var FileTab = function FileTab(_a) {
    */
   var renderTabCloseButton = function renderTabCloseButton() {
     return jsx(StyledTabCloseButton, {
+      transparent: true,
       icon: eilMathsignMultiplyBasic,
       role: "gray5",
       size: "nano",
-      transparent: true,
       border: false,
       onClick: function onClick(e) {
         e.stopPropagation();
@@ -96,9 +96,9 @@ var FileTab = function FileTab(_a) {
   //
   //
   return jsxs(StyledTab, Object.assign({}, eventListeners, {
+    draggable: true,
     active: active,
     hovered: hovered,
-    draggable: true,
     role: "tab",
     "aria-label": filename,
     "aria-selected": active,

package/es/components/shared/file-tabs/FileTab.styled.d.ts

@@ -1,12 +1,33 @@
-/// <reference types="react" />
 import { Text } from '@elice/blocks';
 import type { FileTabProps } from './FileTab';
 type StyledTabContentProps = Pick<FileTabProps, 'active' | 'hovered'>;
-export declare const StyledTabLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledTabLabelFilename: import("styled-components").StyledComponent<typeof Text, any, {}, never>;
-export declare const StyledTabLabelDirname: import("styled-components").StyledComponent<typeof Text, any, {}, never>;
-export declare const StyledTabCloseButton: import("styled-components").StyledComponent<import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>>, any, {}, never>;
-export declare const StyledTabContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledTabActiveBorder: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledTab: import("styled-components").StyledComponent<"div", any, StyledTabContentProps, never>;
+export declare const StyledTabLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledTabLabelFilename: import("@emotion/styled").StyledComponent<Pick<import("@elice/blocks").TextProps, never> & Partial<Pick<import("@elice/blocks").TextProps, keyof import("@elice/blocks").TextProps>> & Partial<Pick<import("@elice/blocks").TextProps, never>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;
+export declare const StyledTabLabelDirname: import("@emotion/styled").StyledComponent<Pick<import("@elice/blocks").TextProps, never> & Partial<Pick<import("@elice/blocks").TextProps, keyof import("@elice/blocks").TextProps>> & Partial<Pick<import("@elice/blocks").TextProps, never>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;
+export declare const StyledTabCloseButton: import("@emotion/styled").StyledComponent<import("@elice/blocks").IconButtonProps & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledTabContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledTabActiveBorder: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledTab: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & StyledTabContentProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};