@team-monolith/cds 1.130.0-alpha.2 → 1.130.0-alpha.4

package/README.md

@@ -32,7 +32,7 @@
 
 `pnpm run storybook` 을 실행하면 스토리북이 실행됩니다. 이곳에서 디버깅을 진행합니다.
 
-패키지 특성상 개발환경이 따로 존재하지 않으며 `pnpm run build` 후 `pnpm publish` 를 사용하여 npm 에 배포합니다.
+패키지 특성상 개발환경이 따로 존재하지 않으며 `pnpm run build` 후 `npm publish` 를 사용하여 npm 에 배포합니다.
 
 이때 npm team-monolith 에 소속되어 있어야 합니다.
 

package/dist/patterns/LexicalEditor/LexicalCustomConfigContext.d.ts

@@ -2,6 +2,7 @@ export type LexicalCustomConfig = {
     freezeProblemNode: boolean;
     showQuizSolution: boolean;
     showFileUpload: boolean;
+    compactEditorMode: boolean;
 };
 declare const LexicalCustomConfigContext: import('react').Context<LexicalCustomConfig>;
 export { LexicalCustomConfigContext };

package/dist/patterns/LexicalEditor/LexicalCustomConfigContext.js

@@ -3,7 +3,8 @@ import { createContext as e } from "react";
 var t = e({
 	freezeProblemNode: !1,
 	showQuizSolution: !1,
-	showFileUpload: !1
+	showFileUpload: !1,
+	compactEditorMode: !1
 });
 //#endregion
 export { t as LexicalCustomConfigContext };

package/dist/patterns/LexicalEditor/LexicalEditor.d.ts

@@ -21,6 +21,10 @@ export interface LexicalEditorProps {
     showFileUpload?: boolean;
     /** 에디터가 마운트될 때 자동으로 포커스를 설정할지 여부. true가 디폴트입니다. */
     autoFocus?: boolean;
+    /** 게시글 단순 작성 모드. true면 슬래시/블록핸들/드래그앤드롭을 끄고, ContentEditable 위에
+     *  업로드 그리드 툴바를 노출하며, 전용 compact 노드(이미지/파일)만 삽입한다.
+     *  false가 디폴트이며 다른 사용처는 기존 풀 기능 에디터로 동작한다. */
+    compactEditorMode?: boolean;
     /** 외부에서 플러그인을 주입하는 경우 활용함 */
     children?: JSX.Element | string | (JSX.Element | string)[];
 }

package/dist/patterns/LexicalEditor/LexicalEditor.js

@@ -21,33 +21,35 @@ function f(e) {
 	return t;
 }
 function p(l) {
-	let { className: f, contentEditableClassName: p, value: m, onChange: h, editable: g = !0, showQuizSolution: _ = !1, freezeProblemNode: v = !1, isSheetEnabled: y = !1, isQuizEnabled: b = !1, showFileUpload: x = !1, autoFocus: S = !0, children: C } = l, w = {
+	let { className: f, contentEditableClassName: p, value: m, onChange: h, editable: g = !0, showQuizSolution: _ = !1, freezeProblemNode: v = !1, isSheetEnabled: y = !1, isQuizEnabled: b = !1, showFileUpload: x = !1, autoFocus: S = !0, compactEditorMode: C = !1, children: w } = l, T = {
 		namespace: "CustomLexicalEditor",
 		onError: (e) => console.error(e),
 		nodes: n,
 		theme: e(i(), g),
 		editorState: m && u(m) ? JSON.stringify(m) : void 0,
 		editable: g
-	}, T = h ? (e) => {
+	}, E = h ? (e) => {
 		d(m, e) || h(e);
 	} : void 0;
 	return /* @__PURE__ */ o(t.Provider, {
 		value: {
 			freezeProblemNode: v,
 			showQuizSolution: _,
-			showFileUpload: x
+			showFileUpload: x,
+			compactEditorMode: C
 		},
 		children: /* @__PURE__ */ s(c, {
-			initialConfig: w,
+			initialConfig: T,
 			children: [/* @__PURE__ */ o(r, {
 				className: f,
 				contentEditableClassName: p,
-				onChange: T,
+				onChange: E,
 				isSheetEnabled: y,
 				isQuizEnabled: b,
 				showFileUpload: x,
-				autoFocus: S
-			}), /* @__PURE__ */ o(a, { children: C })]
+				autoFocus: S,
+				compactEditorMode: C
+			}), /* @__PURE__ */ o(a, { children: w })]
 		})
 	});
 }

package/dist/patterns/LexicalEditor/Plugins.d.ts

@@ -8,5 +8,6 @@ export interface PluginsProps {
     isQuizEnabled: boolean;
     showFileUpload: boolean;
     autoFocus: boolean;
+    compactEditorMode: boolean;
 }
 export declare function Plugins(props: PluginsProps): ReactElement;

package/dist/patterns/LexicalEditor/Plugins.js

@@ -17,18 +17,19 @@ import { ListMaxIndentLevelPlugin as h } from "./plugins/ListMaxIndentLevelPlugi
 import { DragDropPastePlugin as g } from "./plugins/DragDropPastePlugin/index.js";
 import { ParagraphPlaceholderPlugin as _ } from "./plugins/ParagraphPlaceholderPlugin/index.js";
 import { AutoLinkPlugin as v } from "./plugins/AutoLinkPlugin/index.js";
-import { useState as y } from "react";
-import b from "@emotion/styled";
-import { Fragment as x, jsx as S, jsxs as C } from "@emotion/react/jsx-runtime";
-import { useTranslation as w } from "react-i18next";
-import { RichTextPlugin as T } from "@lexical/react/LexicalRichTextPlugin";
-import { ContentEditable as E } from "@lexical/react/LexicalContentEditable";
-import { HistoryPlugin as D } from "@lexical/react/LexicalHistoryPlugin";
-import { OnChangePlugin as O } from "@lexical/react/LexicalOnChangePlugin";
-import { LexicalErrorBoundary as k } from "@lexical/react/LexicalErrorBoundary";
-import { MarkdownShortcutPlugin as A } from "@lexical/react/LexicalMarkdownShortcutPlugin";
-import { useLexicalEditable as j } from "@lexical/react/useLexicalEditable";
-import { ListPlugin as M } from "@lexical/react/LexicalListPlugin";
+import { CompactToolbarPlugin as y } from "./plugins/CompactToolbarPlugin/CompactToolbarPlugin.js";
+import { useState as b } from "react";
+import x from "@emotion/styled";
+import { Fragment as S, jsx as C, jsxs as w } from "@emotion/react/jsx-runtime";
+import { useTranslation as T } from "react-i18next";
+import { RichTextPlugin as E } from "@lexical/react/LexicalRichTextPlugin";
+import { ContentEditable as D } from "@lexical/react/LexicalContentEditable";
+import { HistoryPlugin as O } from "@lexical/react/LexicalHistoryPlugin";
+import { OnChangePlugin as k } from "@lexical/react/LexicalOnChangePlugin";
+import { LexicalErrorBoundary as A } from "@lexical/react/LexicalErrorBoundary";
+import { MarkdownShortcutPlugin as j } from "@lexical/react/LexicalMarkdownShortcutPlugin";
+import { useLexicalEditable as M } from "@lexical/react/useLexicalEditable";
+import { ListPlugin as ee } from "@lexical/react/LexicalListPlugin";
 import { TabIndentationPlugin as N } from "@lexical/react/LexicalTabIndentationPlugin";
 import { HorizontalRulePlugin as P } from "@lexical/react/LexicalHorizontalRulePlugin";
 import { AutoFocusPlugin as F } from "@lexical/react/LexicalAutoFocusPlugin";
@@ -37,76 +38,78 @@ import { LinkPlugin as L } from "@lexical/react/LexicalLinkPlugin";
 import { ClickableLinkPlugin as R } from "@lexical/react/LexicalClickableLinkPlugin";
 //#region src/cds/patterns/LexicalEditor/Plugins.tsx
 function z(p) {
-	let { className: b, contentEditableClassName: E, onChange: z, isSheetEnabled: U, isQuizEnabled: W, showFileUpload: G, autoFocus: K } = p, { t: q } = w(), J = j(), [Y, X] = y(null), [Z, Q] = y(!1);
-	return /* @__PURE__ */ C(x, { children: [
-		/* @__PURE__ */ S(g, {}),
-		/* @__PURE__ */ S(T, {
-			contentEditable: /* @__PURE__ */ S(B, {
-				className: b,
-				children: /* @__PURE__ */ S(V, {
+	let { className: x, contentEditableClassName: D, onChange: z, isSheetEnabled: U, isQuizEnabled: W, showFileUpload: G, autoFocus: K, compactEditorMode: q } = p, { t: J } = T(), Y = M(), [X, Z] = b(null), [Q, $] = b(!1);
+	return /* @__PURE__ */ w(S, { children: [
+		q && Y && /* @__PURE__ */ C(y, {}),
+		!q && /* @__PURE__ */ C(g, {}),
+		/* @__PURE__ */ C(E, {
+			contentEditable: /* @__PURE__ */ C(B, {
+				className: x,
+				children: /* @__PURE__ */ C(V, {
 					ref: (e) => {
-						e !== null && X(e);
+						e !== null && Z(e);
 					},
-					children: /* @__PURE__ */ S(H, {
-						className: E,
-						isEditable: J
+					children: /* @__PURE__ */ C(H, {
+						className: D,
+						isEditable: Y,
+						compactEditorMode: q
 					})
 				})
 			}),
 			placeholder: null,
-			ErrorBoundary: k
+			ErrorBoundary: A
 		}),
-		/* @__PURE__ */ S(O, {
+		/* @__PURE__ */ C(k, {
 			onChange: (e) => {
 				z?.(e.toJSON());
 			},
 			ignoreSelectionChange: !0
 		}),
-		K && /* @__PURE__ */ S(F, {}),
-		J && /* @__PURE__ */ C(x, { children: [
-			/* @__PURE__ */ S(N, {}),
-			/* @__PURE__ */ S(u, {
+		K && /* @__PURE__ */ C(F, {}),
+		Y && /* @__PURE__ */ w(S, { children: [
+			/* @__PURE__ */ C(N, {}),
+			!q && /* @__PURE__ */ C(u, {
 				isSheetEnabled: U,
 				isQuizEnabled: W,
 				showFileUpload: G
 			}),
-			/* @__PURE__ */ S(A, { transformers: e }),
-			/* @__PURE__ */ S(D, {}),
-			/* @__PURE__ */ S(_, { placeholder: q("명령어 사용 시에는 '/'를 누르세요. 블록에 마우스를 올려 나타나는 '+'를 클릭하면 아래에 블록을 추가할 수 있습니다.") })
+			/* @__PURE__ */ C(j, { transformers: e }),
+			/* @__PURE__ */ C(O, {}),
+			/* @__PURE__ */ C(_, { placeholder: J(q ? "내용을 입력하세요." : "명령어 사용 시에는 '/'를 누르세요. 블록에 마우스를 올려 나타나는 '+'를 클릭하면 아래에 블록을 추가할 수 있습니다.") })
 		] }),
-		Y && J && /* @__PURE__ */ C(x, { children: [
-			/* @__PURE__ */ S(d, {
-				anchorElem: Y,
+		X && Y && /* @__PURE__ */ w(S, { children: [
+			!q && /* @__PURE__ */ C(d, {
+				anchorElem: X,
 				isSheetEnabled: U,
 				isQuizEnabled: W,
 				showFileUpload: G
 			}),
-			/* @__PURE__ */ S(f, { anchorElem: Y }),
-			/* @__PURE__ */ S(m, {
-				anchorElem: Y,
-				isLinkEditMode: Z,
-				setIsLinkEditMode: Q
+			/* @__PURE__ */ C(f, { anchorElem: X }),
+			/* @__PURE__ */ C(m, {
+				anchorElem: X,
+				isLinkEditMode: Q,
+				setIsLinkEditMode: $
 			})
 		] }),
-		!J && /* @__PURE__ */ S(R, {}),
-		/* @__PURE__ */ S(M, {}),
-		/* @__PURE__ */ S(P, {}),
-		/* @__PURE__ */ S(s, {}),
-		/* @__PURE__ */ S(c, {}),
-		/* @__PURE__ */ S(l, {}),
-		/* @__PURE__ */ S(I, {}),
-		/* @__PURE__ */ S(L, {}),
-		/* @__PURE__ */ S(h, { maxDepth: 5 }),
-		/* @__PURE__ */ S(t, {}),
-		/* @__PURE__ */ S(n, {}),
-		/* @__PURE__ */ S(r, {}),
-		/* @__PURE__ */ S(i, {}),
-		/* @__PURE__ */ S(a, {}),
-		/* @__PURE__ */ S(o, {}),
-		/* @__PURE__ */ S(v, {})
+		!Y && /* @__PURE__ */ C(R, {}),
+		/* @__PURE__ */ C(ee, {}),
+		/* @__PURE__ */ C(P, {}),
+		/* @__PURE__ */ C(s, {}),
+		/* @__PURE__ */ C(c, {}),
+		/* @__PURE__ */ C(l, {}),
+		/* @__PURE__ */ C(I, {}),
+		/* @__PURE__ */ C(L, {}),
+		/* @__PURE__ */ C(h, { maxDepth: 5 }),
+		/* @__PURE__ */ C(t, {}),
+		/* @__PURE__ */ C(n, {}),
+		/* @__PURE__ */ C(r, {}),
+		/* @__PURE__ */ C(i, {}),
+		/* @__PURE__ */ C(a, {}),
+		/* @__PURE__ */ C(o, {}),
+		/* @__PURE__ */ C(v, {})
 	] });
 }
-var B = b.div`
+var B = x.div`
   min-height: 150px;
   border: 0;
   display: flex;
@@ -114,18 +117,19 @@ var B = b.div`
   outline: 0;
   z-index: 0;
   overflow: auto;
-`, V = b.div`
+`, V = x.div`
   flex: auto;
   position: relative;
   z-index: -1;
-`, H = b(E, { shouldForwardProp: (e) => e !== "isEditable" })`
+`, H = x(D, { shouldForwardProp: (e) => e !== "isEditable" && e !== "compactEditorMode" })`
   border: 0;
   font-size: 15px;
   display: block;
   position: relative;
   outline: 0;
-  // ComponentAdder 를 위한 공간
-  ${({ isEditable: e }) => e && "padding-left: 64px;"}
+  padding-left: 16px;
+  // ComponentAdder 를 위한 공간. compact 모드는 Adder가 없으므로 들여쓰지 않는다.
+  ${({ isEditable: e, compactEditorMode: t }) => e && !t && "padding-left: 64px;"}
   // ScrollArea에서 스크롤이 발생해도 64px 더 아래로 내릴 수 있도록 합니다.
   padding-bottom: 64px;
   min-height: 150px;

package/dist/patterns/LexicalEditor/components/FileSelectInput.js

@@ -3,6 +3,7 @@ import { stdin_default as t } from "../../../node_modules/.pnpm/remixicon@4.3.0/
 import { Button as n } from "../../../components/Button.js";
 import { CdsContext as r } from "../../../CdsProvider.js";
 import { getTexts as i } from "../../../texts.js";
+import "../uploadConstants.js";
 import { css as a, useTheme as o } from "@emotion/react";
 import { useContext as s, useRef as c, useState as l } from "react";
 import u from "@emotion/styled";
@@ -23,65 +24,65 @@ var g = (e, t) => ({
 		accept: "*",
 		errorStr: t("업로드할 수 없는 파일입니다. 모든 파일을 업로드해주세요.")
 	}
-})[e], _ = 1 * 1024 * 1024 * 1024;
-function v(u) {
-	let { onChange: v, fileType: C, onFileSubmit: w } = u, [T, E] = l(null), D = c(null), { t: O } = m(), { accept: k, errorStr: A } = g(C, O), j = s(r), M = o();
-	return /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p(x, { children: [/* @__PURE__ */ f(n, {
+})[e];
+function _(u) {
+	let { onChange: _, fileType: S, onFileSubmit: C } = u, [w, T] = l(null), E = c(null), { t: D } = m(), { accept: O, errorStr: k } = g(S, D), A = s(r), j = o();
+	return /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p(b, { children: [/* @__PURE__ */ f(n, {
 		fullWidth: !0,
 		color: "grey",
 		size: "medium",
-		label: O("파일 선택하기"),
+		label: D("파일 선택하기"),
 		onClick: () => {
-			D.current?.click();
+			E.current?.click();
 		},
 		startIcon: /* @__PURE__ */ f(t, {})
-	}), /* @__PURE__ */ f(S, { children: T && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(e, { css: a`
+	}), /* @__PURE__ */ f(x, { children: w && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(e, { css: a`
                   padding: 0 4px;
                   width: 24px;
                   height: 24px;
-                  color: ${M.color.background.danger};
-                ` }), /* @__PURE__ */ f(b, { children: T })] }) })] }), /* @__PURE__ */ f(y, {
-		ref: D,
+                  color: ${j.color.background.danger};
+                ` }), /* @__PURE__ */ f(y, { children: w })] }) })] }), /* @__PURE__ */ f(v, {
+		ref: E,
 		type: "file",
-		accept: k,
+		accept: O,
 		onChange: async (e) => {
 			let t = e.target.files?.[0];
 			if (!t) return;
-			if (t.size >= _) {
-				E(i(O, "errorFileTooLarge")), e.target.value = "";
+			if (t.size >= 1073741824) {
+				T(i(D, "errorFileTooLarge")), e.target.value = "";
 				return;
 			}
-			if (k && !(k === "*" || (k.startsWith(".") ? k.slice(1) === t.name.split(".").pop()?.toLowerCase() : new RegExp(k.replace("*", ".*")).test(t.type)))) {
-				E(A), e.target.value = "";
+			if (O && !(O === "*" || (O.startsWith(".") ? O.slice(1) === t.name.split(".").pop()?.toLowerCase() : new RegExp(O.replace("*", ".*")).test(t.type)))) {
+				T(k), e.target.value = "";
 				return;
 			}
-			let n = j.lexical?.uploadByFile;
+			let n = A.lexical?.uploadByFile;
 			if (n) {
 				let e = await n(t);
-				v(e), w?.({
+				_(e), C?.({
 					url: e,
 					name: t.name,
 					size: t.size,
 					uploadDate: h().format("YYYY.MM.DD HH:mm:ss")
 				});
 			}
-			E(null);
+			T(null);
 		}
 	})] });
 }
-var y = u.input`
+var v = u.input`
   display: none;
-`, b = u.div(({ theme: e }) => a`
+`, y = u.div(({ theme: e }) => a`
     color: ${e.color.foreground.danger};
     font-family: ${e.fontFamily.ui};
     font-size: 14px;
     font-weight: 400;
     line-height: 20px;
-  `), x = u.div`
+  `), b = u.div`
   display: flex;
   flex-direction: column;
   gap: 4px;
-`, S = u.div`
+`, x = u.div`
   padding-left: 8px;
   display: flex;
   flex-direction: row;
@@ -89,4 +90,4 @@ var y = u.input`
   gap: 4px;
 `;
 //#endregion
-export { v as FileSelectInput };
+export { _ as FileSelectInput };

package/dist/patterns/LexicalEditor/components/UploadFileDialog/UploadFileDialog.js

@@ -1,5 +1,6 @@
 import { CdsContext as e } from "../../../../CdsProvider.js";
 import { getTexts as t } from "../../../../texts.js";
+import "../../uploadConstants.js";
 import { useContext as n, useEffect as r, useRef as i } from "react";
 import a from "@emotion/styled";
 import { jsx as o } from "@emotion/react/jsx-runtime";
@@ -20,7 +21,7 @@ function l({ open: a, onClose: l, onChange: d }) {
 				l();
 				return;
 			}
-			if (r.size >= 1 * 1024 * 1024 * 1024) {
+			if (r.size >= 1073741824) {
 				n?.("upload", t(m, "errorFileTooLarge")), e.target.value = "", l();
 				return;
 			}

package/dist/patterns/LexicalEditor/nodes/FileNode/CompactFileView.d.ts

@@ -0,0 +1,7 @@
+import { NodeKey } from 'lexical';
+export declare function CompactFileView({ fileName, fileSize, nodeKey, fileUploadDate, }: {
+    fileName: string;
+    fileSize: number;
+    fileUploadDate: string;
+    nodeKey: NodeKey;
+}): JSX.Element;

package/dist/patterns/LexicalEditor/nodes/FileNode/CompactFileView.js

@@ -0,0 +1,53 @@
+import { stdin_default as e } from "../../../../node_modules/.pnpm/remixicon@4.3.0/node_modules/remixicon/icons/System/delete-bin-line.js";
+import { OverflowTooltip as t } from "../../../../components/OverflowTooltip.js";
+import { FileDetailContainer as n, FileInfo as r, FileName as i, FileOptionalInfo as a, FileSize as o, IconContainer as s, getFileIcon as c } from "./fileStyles.js";
+import { css as l } from "@emotion/react";
+import u from "@emotion/styled";
+import { jsx as d, jsxs as f } from "@emotion/react/jsx-runtime";
+import { useTranslation as p } from "react-i18next";
+import { $getNodeByKey as m } from "lexical";
+import { useLexicalComposerContext as h } from "@lexical/react/LexicalComposerContext";
+//#region src/cds/patterns/LexicalEditor/nodes/FileNode/CompactFileView.tsx
+function g({ fileName: r, fileSize: l, nodeKey: u, fileUploadDate: g }) {
+	let [y] = h(), { t: b } = p();
+	return /* @__PURE__ */ d(n, {
+		isSelected: !1,
+		children: /* @__PURE__ */ f(_, { children: [
+			/* @__PURE__ */ d(s, { children: c(r) }),
+			/* @__PURE__ */ d(i, { children: /* @__PURE__ */ d(t, { text: r }) }),
+			/* @__PURE__ */ d(a, { children: g }),
+			/* @__PURE__ */ f(o, { children: [(l / (1024 * 1024)).toFixed(1), " MB"] }),
+			/* @__PURE__ */ d(v, {
+				type: "button",
+				onClick: () => {
+					y.update(() => {
+						m(u)?.remove();
+					});
+				},
+				"aria-label": b("삭제", { context: "버튼, 게시글 본문 파일" }),
+				children: /* @__PURE__ */ d(e, {})
+			})
+		] })
+	});
+}
+var _ = u(r)`
+  cursor: default;
+`, v = u.button(({ theme: e }) => l`
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    color: ${e.color.foreground.neutralBaseDisabled};
+
+    &:hover {
+      color: ${e.color.foreground.neutralBase};
+    }
+  `);
+//#endregion
+export { g as CompactFileView };

package/dist/patterns/LexicalEditor/nodes/FileNode/FileComponent.d.ts

@@ -10,30 +10,3 @@ export declare function FileComponent({ fileName, fileSize, nodeKey, fileUrl, fi
     fileUploadDate: string;
     nodeKey: NodeKey;
 }): JSX.Element;
-export declare const FileName: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare function getFileIcon(fileName: string): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
-export declare const FileDetailContainer: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-} & {
-    isSelected: boolean;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const IconContainer: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const FileInfo: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const FileSize: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const FileOptionalInfo: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;