@team-monolith/cds 1.130.0 → 1.131.0-alpha.0

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

@@ -1,8 +1,9 @@
-import e from "../../../node_modules/.pnpm/remixicon@4.3.0/node_modules/remixicon/icons/Document/file-warning-line.js";
-import t from "../../../node_modules/.pnpm/remixicon@4.3.0/node_modules/remixicon/icons/System/upload-line.js";
+import e from "../../../node_modules/remixicon/icons/Document/file-warning-line.js";
+import t from "../../../node_modules/remixicon/icons/System/upload-line.js";
 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/InsertImageDialog/InsertImageDialog.d.ts

@@ -13,4 +13,4 @@ export interface InsertImageDialogProps {
     /** 닫을 때마다 폼을 최초 상태로 초기화합니다. */
     shouldReset?: boolean;
 }
-export declare function InsertImageDialog(props: InsertImageDialogProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+export declare function InsertImageDialog(props: InsertImageDialogProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 import { AlertDialog as e } from "../../../../components/AlertDialog/AlertDialog.js";
-import t from "../../../../node_modules/.pnpm/remixicon@4.3.0/node_modules/remixicon/icons/Editor/link.js";
-import n from "../../../../node_modules/.pnpm/remixicon@4.3.0/node_modules/remixicon/icons/Media/image-fill.js";
+import t from "../../../../node_modules/remixicon/icons/Editor/link.js";
+import n from "../../../../node_modules/remixicon/icons/Media/image-fill.js";
 import { AlertDialogTitle as r } from "../../../../components/AlertDialog/AlertDialogTitle.js";
 import { AlertDialogContent as i } from "../../../../components/AlertDialog/AlertDialogContent.js";
 import { AlertDialogActions as a } from "../../../../components/AlertDialog/AlertDialogActions.js";

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

@@ -12,4 +12,4 @@ export interface InsertVideoDialogProps {
     /** 닫을 때마다 폼을 최초 상태로 초기화합니다. */
     shouldReset?: boolean;
 }
-export declare function InsertVideoDialog(props: InsertVideoDialogProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+export declare function InsertVideoDialog(props: InsertVideoDialogProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 import { AlertDialog as e } from "../../../../components/AlertDialog/AlertDialog.js";
-import t from "../../../../node_modules/.pnpm/remixicon@4.3.0/node_modules/remixicon/icons/Editor/link.js";
-import n from "../../../../node_modules/.pnpm/remixicon@4.3.0/node_modules/remixicon/icons/Media/video-line.js";
+import t from "../../../../node_modules/remixicon/icons/Editor/link.js";
+import n from "../../../../node_modules/remixicon/icons/Media/video-line.js";
 import { AlertDialogTitle as r } from "../../../../components/AlertDialog/AlertDialogTitle.js";
 import { AlertDialogContent as i } from "../../../../components/AlertDialog/AlertDialogContent.js";
 import { AlertDialogActions as a } from "../../../../components/AlertDialog/AlertDialogActions.js";

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

@@ -12,4 +12,4 @@ export interface UploadFileDialogProps {
 /**
  * OS 파일 다이얼로그를 열어 파일을 선택하고 업로드하는 컴포넌트입니다.
  */
-export declare function UploadFileDialog({ open, onClose, onChange, }: UploadFileDialogProps): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+export declare function UploadFileDialog({ open, onClose, onChange, }: UploadFileDialogProps): import("@emotion/react/jsx-runtime").JSX.Element;

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,40 @@
+import { SquareButton as e } from "../../../../components/SquareButton.js";
+import t from "../../../../node_modules/remixicon/icons/System/delete-bin-line.js";
+import { OverflowTooltip as n } from "../../../../components/OverflowTooltip.js";
+import { FileDetailContainer as r, FileInfo as i, FileName as a, FileOptionalInfo as o, FileSize as s, IconContainer as c, getFileIcon as l } from "./fileStyles.js";
+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: e, fileSize: i, nodeKey: u, fileUploadDate: g }) {
+	let [y] = h(), { t: b } = p();
+	return /* @__PURE__ */ d(r, {
+		isSelected: !1,
+		children: /* @__PURE__ */ f(_, { children: [
+			/* @__PURE__ */ d(c, { children: l(e) }),
+			/* @__PURE__ */ d(a, { children: /* @__PURE__ */ d(n, { text: e }) }),
+			/* @__PURE__ */ d(o, { children: g }),
+			/* @__PURE__ */ f(s, { children: [(i / (1024 * 1024)).toFixed(1), " MB"] }),
+			/* @__PURE__ */ d(v, {
+				color: "icon",
+				size: "xsmall",
+				icon: /* @__PURE__ */ d(t, {}),
+				onClick: () => {
+					y.update(() => {
+						m(u)?.remove();
+					});
+				},
+				"aria-label": b("삭제", { context: "버튼, 게시글 본문 파일" })
+			})
+		] })
+	});
+}
+var _ = u(i)`
+  cursor: default;
+`, v = u(e)`
+  flex-shrink: 0;
+`;
+//#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>, {}>;

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

@@ -1,126 +1,55 @@
-import e from "../../../../icons/custom/colored/filename-all-color.js";
-import t from "../../../../icons/custom/colored/filename-doc-color.js";
-import n from "../../../../icons/custom/colored/filename-hwp-color.js";
-import r from "../../../../icons/custom/colored/filename-img-color.js";
-import i from "../../../../icons/custom/colored/filename-mp4-color.js";
-import a from "../../../../icons/custom/colored/filename-pdf-color.js";
-import o from "../../../../icons/custom/colored/filename-ppt-color.js";
-import s from "../../../../icons/custom/colored/filename-xls-color.js";
-import c from "../../../../icons/custom/colored/filename-zip-color.js";
-import { OverflowTooltip as l } from "../../../../components/OverflowTooltip.js";
+import { OverflowTooltip as e } from "../../../../components/OverflowTooltip.js";
+import { LexicalCustomConfigContext as t } from "../../LexicalCustomConfigContext.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 { CompactFileView as l } from "./CompactFileView.js";
 import { FileDownloadButton as u } from "./FileDownloadButton.js";
 import { $isFileNode as d } from "./FileNode.js";
-import { css as f } from "@emotion/react";
-import { useCallback as p, useEffect as m, useRef as h } from "react";
-import g from "@emotion/styled";
-import { Fragment as _, jsx as v, jsxs as y } from "@emotion/react/jsx-runtime";
-import { $getSelection as b, $isNodeSelection as x, CLICK_COMMAND as S, COMMAND_PRIORITY_LOW as C, KEY_BACKSPACE_COMMAND as w, KEY_DELETE_COMMAND as T } from "lexical";
-import { mergeRegister as E } from "@lexical/utils";
-import { useLexicalComposerContext as D } from "@lexical/react/LexicalComposerContext";
-import { useLexicalNodeSelection as O } from "@lexical/react/useLexicalNodeSelection";
-import { useLexicalEditable as k } from "@lexical/react/useLexicalEditable";
+import { useCallback as f, useContext as p, useEffect as m, useRef as h } from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "@emotion/react/jsx-runtime";
+import { $getSelection as y, $isNodeSelection as b, CLICK_COMMAND as x, COMMAND_PRIORITY_LOW as S, KEY_BACKSPACE_COMMAND as C, KEY_DELETE_COMMAND as w } from "lexical";
+import { mergeRegister as T } from "@lexical/utils";
+import { useLexicalComposerContext as E } from "@lexical/react/LexicalComposerContext";
+import { useLexicalNodeSelection as D } from "@lexical/react/useLexicalNodeSelection";
+import { useLexicalEditable as O } from "@lexical/react/useLexicalEditable";
 //#region src/cds/patterns/LexicalEditor/nodes/FileNode/FileComponent.tsx
-function A({ fileName: e, fileSize: t, nodeKey: n, fileUrl: r, fileUploadDate: i }) {
-	let [a] = D(), [o, s, c] = O(n), f = h(null), g = k(), A = p((e) => {
-		let t = b();
-		return o && x(t) && (e.preventDefault(), a.update(() => {
+function k({ fileName: k, fileSize: A, nodeKey: j, fileUrl: M, fileUploadDate: N }) {
+	let [P] = E(), [F, I, L] = D(j), R = h(null), z = O(), { compactEditorMode: B } = p(t), V = f((e) => {
+		let t = y();
+		return F && b(t) && (e.preventDefault(), P.update(() => {
 			t.getNodes().forEach((e) => {
 				d(e) && e.remove();
 			});
 		})), !1;
-	}, [a, o]);
-	return m(() => E(a.registerCommand(S, (e) => f.current && f.current.contains(e.target) ? (e.shiftKey || c(), s(!0), !0) : !1, C), a.registerCommand(T, A, C), a.registerCommand(w, A, C)), [
-		c,
-		a,
-		o,
-		n,
-		A,
-		s
-	]), /* @__PURE__ */ v(_, { children: g ? /* @__PURE__ */ v(N, {
-		isSelected: o,
-		ref: f,
-		children: /* @__PURE__ */ y(F, { children: [
-			/* @__PURE__ */ v(P, { children: M(e) }),
-			/* @__PURE__ */ v(j, { children: /* @__PURE__ */ v(l, { text: e }) }),
-			/* @__PURE__ */ v(L, { children: i }),
-			/* @__PURE__ */ y(I, { children: [(t / (1024 * 1024)).toFixed(1), " MB"] })
+	}, [P, F]);
+	return m(() => {
+		if (!B) return T(P.registerCommand(x, (e) => R.current && R.current.contains(e.target) ? (e.shiftKey || L(), I(!0), !0) : !1, S), P.registerCommand(w, V, S), P.registerCommand(C, V, S));
+	}, [
+		L,
+		P,
+		F,
+		j,
+		V,
+		I,
+		B
+	]), B && z ? /* @__PURE__ */ _(l, {
+		fileName: k,
+		fileSize: A,
+		fileUploadDate: N,
+		nodeKey: j
+	}) : /* @__PURE__ */ _(g, { children: z ? /* @__PURE__ */ _(n, {
+		isSelected: F,
+		ref: R,
+		children: /* @__PURE__ */ v(r, { children: [
+			/* @__PURE__ */ _(s, { children: c(k) }),
+			/* @__PURE__ */ _(i, { children: /* @__PURE__ */ _(e, { text: k }) }),
+			/* @__PURE__ */ _(a, { children: N }),
+			/* @__PURE__ */ v(o, { children: [(A / (1024 * 1024)).toFixed(1), " MB"] })
 		] })
-	}) : /* @__PURE__ */ v(u, {
-		fileName: e,
-		fileUrl: r,
-		fileSize: t
+	}) : /* @__PURE__ */ _(u, {
+		fileName: k,
+		fileUrl: M,
+		fileSize: A
 	}) });
 }
-var j = g.div`
-  flex: 1;
-  overflow: hidden;
-`;
-function M(l) {
-	switch (l.split(".").pop()?.toLowerCase()) {
-		case "zip":
-		case "rar":
-		case "7z": return /* @__PURE__ */ v(c, {});
-		case "ppt":
-		case "pptx": return /* @__PURE__ */ v(o, {});
-		case "xlsx":
-		case "xls": return /* @__PURE__ */ v(s, {});
-		case "hwp": return /* @__PURE__ */ v(n, {});
-		case "doc":
-		case "docx": return /* @__PURE__ */ v(t, {});
-		case "png":
-		case "jpg":
-		case "jpeg":
-		case "gif":
-		case "bmp": return /* @__PURE__ */ v(r, {});
-		case "mp4":
-		case "avi":
-		case "mov":
-		case "wmv": return /* @__PURE__ */ v(i, {});
-		case "pdf": return /* @__PURE__ */ v(a, {});
-		default: return /* @__PURE__ */ v(e, {});
-	}
-}
-var N = g.div(({ isSelected: e, theme: t }) => f`
-    display: flex;
-    flex-direction: column;
-    width: 620px;
-    min-width: 400px;
-    background: ${e ? t.color.background.neutralAltActive : t.color.background.neutralAlt};
-    border-radius: 10px;
-  `), P = g.div`
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
-`, F = g.div(({ theme: e }) => f`
-    display: flex;
-    padding: 16px;
-    align-items: center;
-    height: 48px;
-    gap: 8px;
-    color: ${e.color.foreground.neutralBase};
-    font-family: ${e.fontFamily.ui};
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 20px; /* 125% */
-    border-radius: 10px;
-    cursor: pointer;
-  `), I = g.span(({ theme: e }) => f`
-    flex-shrink: 0;
-    margin-left: auto;
-    color: ${e.color.foreground.neutralBaseDisabled};
-    font-family: ${e.fontFamily.ui};
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 20px; /* 142.857% */
-  `), L = g.div(({ theme: e }) => f`
-    font-family: ${e.fontFamily.ui};
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px;
-    color: ${e.color.foreground.neutralBaseDisabled};
-    text-align: right;
-    flex-shrink: 0;
-  `);
 //#endregion
-export { A as FileComponent, I as FileSize, P as IconContainer, M as getFileIcon };
+export { k as FileComponent };

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

@@ -1,7 +1,7 @@
 import { HOVER as e } from "../../../../utils/hover.js";
 import { OverflowTooltip as t } from "../../../../components/OverflowTooltip.js";
 import { CdsContext as n } from "../../../../CdsProvider.js";
-import { FileSize as r, IconContainer as i, getFileIcon as a } from "./FileComponent.js";
+import { FileSize as r, IconContainer as i, getFileIcon as a } from "./fileStyles.js";
 import { css as o, useTheme as s } from "@emotion/react";
 import { useContext as c } from "react";
 import l from "@emotion/styled";

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

@@ -0,0 +1,27 @@
+export declare function getFileIcon(fileName: string): import("@emotion/react/jsx-runtime").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 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>, {}>;

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

@@ -0,0 +1,85 @@
+import e from "../../../../icons/custom/colored/filename-all-color.js";
+import t from "../../../../icons/custom/colored/filename-doc-color.js";
+import n from "../../../../icons/custom/colored/filename-hwp-color.js";
+import r from "../../../../icons/custom/colored/filename-img-color.js";
+import i from "../../../../icons/custom/colored/filename-mp4-color.js";
+import a from "../../../../icons/custom/colored/filename-pdf-color.js";
+import o from "../../../../icons/custom/colored/filename-ppt-color.js";
+import s from "../../../../icons/custom/colored/filename-xls-color.js";
+import c from "../../../../icons/custom/colored/filename-zip-color.js";
+import { css as l } from "@emotion/react";
+import u from "@emotion/styled";
+import { jsx as d } from "@emotion/react/jsx-runtime";
+//#region src/cds/patterns/LexicalEditor/nodes/FileNode/fileStyles.tsx
+function f(l) {
+	switch (l.split(".").pop()?.toLowerCase()) {
+		case "zip":
+		case "rar":
+		case "7z": return /* @__PURE__ */ d(c, {});
+		case "ppt":
+		case "pptx": return /* @__PURE__ */ d(o, {});
+		case "xlsx":
+		case "xls": return /* @__PURE__ */ d(s, {});
+		case "hwp": return /* @__PURE__ */ d(n, {});
+		case "doc":
+		case "docx": return /* @__PURE__ */ d(t, {});
+		case "png":
+		case "jpg":
+		case "jpeg":
+		case "gif":
+		case "bmp": return /* @__PURE__ */ d(r, {});
+		case "mp4":
+		case "avi":
+		case "mov":
+		case "wmv": return /* @__PURE__ */ d(i, {});
+		case "pdf": return /* @__PURE__ */ d(a, {});
+		default: return /* @__PURE__ */ d(e, {});
+	}
+}
+var p = u.div`
+  flex: 1;
+  overflow: hidden;
+`, m = u.div(({ isSelected: e, theme: t }) => l`
+    display: flex;
+    flex-direction: column;
+    width: 620px;
+    min-width: 400px;
+    background: ${e ? t.color.background.neutralAltActive : t.color.background.neutralAlt};
+    border-radius: 10px;
+  `), h = u.div`
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+`, g = u.div(({ theme: e }) => l`
+    display: flex;
+    padding: 16px;
+    align-items: center;
+    height: 48px;
+    gap: 8px;
+    color: ${e.color.foreground.neutralBase};
+    font-family: ${e.fontFamily.ui};
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 20px; /* 125% */
+    border-radius: 10px;
+    cursor: pointer;
+  `), _ = u.span(({ theme: e }) => l`
+    flex-shrink: 0;
+    margin-left: auto;
+    color: ${e.color.foreground.neutralBaseDisabled};
+    font-family: ${e.fontFamily.ui};
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
+  `), v = u.div(({ theme: e }) => l`
+    font-family: ${e.fontFamily.ui};
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    color: ${e.color.foreground.neutralBaseDisabled};
+    text-align: right;
+    flex-shrink: 0;
+  `);
+//#endregion
+export { m as FileDetailContainer, g as FileInfo, p as FileName, v as FileOptionalInfo, _ as FileSize, h as IconContainer, f as getFileIcon };

package/dist/patterns/LexicalEditor/nodes/Form/FormInput.js

@@ -1,4 +1,4 @@
-import e from "../../../../node_modules/.pnpm/remixicon@4.3.0/node_modules/remixicon/icons/System/error-warning-fill.js";
+import e from "../../../../node_modules/remixicon/icons/System/error-warning-fill.js";
 import { Input as t } from "../../../../components/Input.js";
 import { useState as n } from "react";
 import { jsx as r } from "react/jsx-runtime";

package/dist/patterns/LexicalEditor/nodes/ImageNode/CompactImageView.d.ts

@@ -0,0 +1,6 @@
+import { NodeKey } from 'lexical';
+export declare function CompactImageView({ src, altText, nodeKey, }: {
+    src: string;
+    altText: string;
+    nodeKey: NodeKey;
+}): JSX.Element;

package/dist/patterns/LexicalEditor/nodes/ImageNode/CompactImageView.js

@@ -0,0 +1,77 @@
+import { SquareButton as e } from "../../../../components/SquareButton.js";
+import t from "../../../../node_modules/remixicon/icons/System/delete-bin-line.js";
+import { css as n } from "@emotion/react";
+import { useState as r } from "react";
+import i from "@emotion/styled";
+import { jsx as a, jsxs as o } from "@emotion/react/jsx-runtime";
+import { useTranslation as s } from "react-i18next";
+import { $getNodeByKey as c } from "lexical";
+import { useLexicalComposerContext as l } from "@lexical/react/LexicalComposerContext";
+import { useLexicalEditable as u } from "@lexical/react/useLexicalEditable";
+//#region src/cds/patterns/LexicalEditor/nodes/ImageNode/CompactImageView.tsx
+function d({ src: e, altText: n, nodeKey: i }) {
+	let [d] = l(), _ = u(), [v, y] = r(!1), { t: b } = s();
+	return v ? /* @__PURE__ */ a(g, { children: n || b("이미지를 불러올 수 없습니다.") }) : _ ? /* @__PURE__ */ o(f, { children: [/* @__PURE__ */ a(m, {
+		src: e,
+		alt: n,
+		onError: () => y(!0)
+	}), /* @__PURE__ */ a(h, {
+		color: "grey",
+		size: "xsmall",
+		icon: /* @__PURE__ */ a(t, {}),
+		onClick: () => {
+			d.update(() => {
+				c(i)?.remove();
+			});
+		},
+		"aria-label": b("삭제", { context: "버튼, 게시글 본문 이미지" })
+	})] }) : /* @__PURE__ */ a(p, {
+		type: "button",
+		onClick: () => window.open(e, "_blank", "noopener"),
+		title: b("클릭해서 원본 이미지 보기"),
+		children: /* @__PURE__ */ a(m, {
+			src: e,
+			alt: n,
+			onError: () => y(!0)
+		})
+	});
+}
+var f = i.div`
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+`, p = i.button`
+  display: inline-block;
+  max-width: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+`, m = i.img`
+  display: block;
+  max-width: 100%;
+  max-height: 400px;
+  height: auto;
+  object-fit: contain;
+  border-radius: 10px;
+`, h = i(e)`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+`, g = i.div(({ theme: e }) => n`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-height: 80px;
+    padding: 16px;
+    border-radius: 10px;
+    background: ${e.color.background.neutralAlt};
+    color: ${e.color.foreground.neutralBaseDisabled};
+    font-family: ${e.fontFamily.ui};
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+  `);
+//#endregion
+export { d as CompactImageView };