@team-monolith/cds 1.125.0 → 1.126.0

package/dist/patterns/Dropdown/DropdownMenu/DropdownMenu.js

@@ -23,11 +23,11 @@ const DropdownMenu = React.forwardRef(function DropdownMenu(props, ref) {
     }, closeOnItemClick, children, menuCss, itemState = EMPTY_MAP, setItemState = () => { }, dropdownMenuId, } = props;
     const { nestedIndex, onCloseOnItemClick } = useContext(DropdownContext);
     // 드롭다운 메뉴 위치 조정
-    const menuStyle = css `
-    .MuiPaper-root {
-      ${menuCss}
-      ${ORIGIN_PROPS_TO_MARGIN(anchorOrigin, isNestedMenu)}
-    }
+    const menuStyle = css `
+    .MuiPaper-root {
+      ${menuCss}
+      ${ORIGIN_PROPS_TO_MARGIN(anchorOrigin, isNestedMenu)}
+    }
   `;
     if (!anchorEl) {
         return _jsx(_Fragment, {});
@@ -55,30 +55,30 @@ const DropdownMenu = React.forwardRef(function DropdownMenu(props, ref) {
             // 실제 드롭다운 메뉴 영역에서만 포인터 이벤트를 감지하도록 처리
             css: [
                 menuStyle,
-                css `
-            pointer-events: none;
-            .MuiPaper-root {
-              pointer-events: auto;
-            }
+                css `
+            pointer-events: none;
+            .MuiPaper-root {
+              pointer-events: auto;
+            }
           `,
             ], children: children }) }));
 });
 export { DropdownMenu };
-const Menu = styled(Popover)(({ theme }) => css `
-    .MuiPaper-root {
-      position: fixed;
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      padding: 4px;
-      background-color: ${theme.color.background.neutralBase};
-      box-shadow: ${shadows.shadow04};
-      border-radius: 8px;
-      width: ${DROPDOWN_MENU_WIDTH}px;
-      max-height: ${DROPDOWN_MENU_MAX_HEIGHT}px;
-      overflow-y: auto;
-      overflow-x: hidden;
-      // 최상위 메뉴의 mui modal 백드롭의 z-index는 1300입니다.
-      z-index: 1300;
-    }
+const Menu = styled(Popover)(({ theme }) => css `
+    .MuiPaper-root {
+      position: fixed;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      padding: 4px;
+      background-color: ${theme.color.background.neutralBase};
+      box-shadow: ${shadows.shadow04};
+      border-radius: 8px;
+      width: ${DROPDOWN_MENU_WIDTH}px;
+      max-height: ${DROPDOWN_MENU_MAX_HEIGHT}px;
+      overflow-y: auto;
+      overflow-x: hidden;
+      // 최상위 메뉴의 mui modal 백드롭의 z-index는 1300입니다.
+      z-index: 1300;
+    }
   `);

package/dist/patterns/Dropdown/DropdownMenu/style.js

@@ -7,37 +7,37 @@ export const ORIGIN_PROPS_TO_MARGIN = (anchorOrigin, nested) => {
     const { vertical, horizontal } = anchorOrigin;
     return {
         top: {
-            left: css `
-        margin-right: 12px;
+            left: css `
+        margin-right: 12px;
       `,
-            center: css `
-        margin-bottom: 8px;
+            center: css `
+        margin-bottom: 8px;
       `,
-            right: css `
-        margin-left: ${nested ? 8 : 4}px;
+            right: css `
+        margin-left: ${nested ? 8 : 4}px;
       `,
         },
         center: {
-            left: css `
-        margin-right: 12px;
+            left: css `
+        margin-right: 12px;
       `,
-            center: css `
-        margin-bottom: 8px;
+            center: css `
+        margin-bottom: 8px;
       `,
-            right: css `
-        margin-left: 4px;
+            right: css `
+        margin-left: 4px;
       `,
         },
         bottom: {
-            left: css `
-        margin-top: 8px;
+            left: css `
+        margin-top: 8px;
       `,
-            center: css `
-        margin-top: 8px;
+            center: css `
+        margin-top: 8px;
       `,
-            right: css `
-        margin-top: 8px;
-        margin-left: 4px;
+            right: css `
+        margin-top: 8px;
+        margin-left: 4px;
       `,
         },
     }[vertical][horizontal];

package/dist/patterns/LexicalEditor/Plugins.js

@@ -56,44 +56,44 @@ export function Plugins(props) {
                 // ignore 하지 않으면 Form에서 수정하지 않았는데 Dirty로 처리됨.
                 ignoreSelectionChange: true }), autoFocus && _jsx(AutoFocusPlugin, {}), isEditable && (_jsxs(_Fragment, { children: [_jsx(TabIndentationPlugin, {}), _jsx(ComponentPickerMenuPlugin, { isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled, showFileUpload: showFileUpload }), _jsx(MarkdownShortcutPlugin, { transformers: CUSTOM_TRANSFORMERS }), _jsx(HistoryPlugin, {}), _jsx(ParagraphPlaceholderPlugin, { placeholder: t("명령어 사용 시에는 '/'를 누르세요. 블록에 마우스를 올려 나타나는 '+'를 클릭하면 아래에 블록을 추가할 수 있습니다.") })] })), floatingAnchorElem && isEditable && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem, isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled, showFileUpload: showFileUpload }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode })] })), !isEditable && _jsx(ClickableLinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(ImagesPlugin, {}), _jsx(VideosPlugin, {}), _jsx(FilePlugin, {}), _jsx(TablePlugin, {}), _jsx(LinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 5 }), _jsx(ProblemInputPlugin, {}), _jsx(ProblemSelectPlugin, {}), _jsx(LayoutPlugin, {}), _jsx(SheetSelectPlugin, {}), _jsx(SheetInputPlugin, {}), _jsx(SelfEvaluationPlugin, {}), _jsx(AutoLinkPlugin, {})] }));
 }
-const ScrollArea = styled.div `
-  min-height: 150px;
-  border: 0;
-  display: flex;
-  position: relative;
-  outline: 0;
-  z-index: 0;
-  overflow: auto;
+const ScrollArea = styled.div `
+  min-height: 150px;
+  border: 0;
+  display: flex;
+  position: relative;
+  outline: 0;
+  z-index: 0;
+  overflow: auto;
 `;
-const FloatingAnchor = styled.div `
-  flex: auto;
-  position: relative;
-  z-index: -1;
+const FloatingAnchor = styled.div `
+  flex: auto;
+  position: relative;
+  z-index: -1;
 `;
 const StyledContentEditable = styled(ContentEditable, {
     shouldForwardProp: (prop) => prop !== "isEditable",
-}) `
-  border: 0;
-  font-size: 15px;
-  display: block;
-  position: relative;
-  outline: 0;
-  // ComponentAdder 를 위한 공간
-  ${({ isEditable }) => isEditable && "padding-left: 64px;"}
-  // ScrollArea에서 스크롤이 발생해도 64px 더 아래로 내릴 수 있도록 합니다.
-  padding-bottom: 64px;
-  min-height: 150px;
-
-  hr {
-    // HorizontalRuleNode는 Lexical theme에 등록되어 있지 않습니다.
-    // 따라서 hr 태그를 직접 조작합니다.
-
-    // FloatingMenu가 올바른 위치에 붙으려면 충분한 높이를 가져야합니다.
-    // HR 태그에서 border를 이용해서 중심에 선을 그리기 어렵습니다.
-    // hr svg는 1px 높이의 svg입니다.
-    // center 및 repeat-x를 지정하여 좌우로 긴 선을 그립니다.
-    height: 26px;
-    border: 0;
-    background: url(${hr}) center repeat-x;
-  }
+}) `
+  border: 0;
+  font-size: 15px;
+  display: block;
+  position: relative;
+  outline: 0;
+  // ComponentAdder 를 위한 공간
+  ${({ isEditable }) => isEditable && "padding-left: 64px;"}
+  // ScrollArea에서 스크롤이 발생해도 64px 더 아래로 내릴 수 있도록 합니다.
+  padding-bottom: 64px;
+  min-height: 150px;
+
+  hr {
+    // HorizontalRuleNode는 Lexical theme에 등록되어 있지 않습니다.
+    // 따라서 hr 태그를 직접 조작합니다.
+
+    // FloatingMenu가 올바른 위치에 붙으려면 충분한 높이를 가져야합니다.
+    // HR 태그에서 border를 이용해서 중심에 선을 그리기 어렵습니다.
+    // hr svg는 1px 높이의 svg입니다.
+    // center 및 repeat-x를 지정하여 좌우로 긴 선을 그립니다.
+    height: 26px;
+    border: 0;
+    background: url(${hr}) center repeat-x;
+  }
 `;

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

@@ -10,7 +10,6 @@ interface FileSelectInputProps {
         size: number;
         uploadDate: string;
     }) => void;
-    bold?: boolean;
 }
 /**
  * 파일 탐색기를 열어 특정 파일을 업로드 한 후, 그 경로를 onChange로 전달합니다.

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

@@ -38,7 +38,7 @@ const MAX_FILE_SIZE = 1 * 1024 * 1024 * 1024; // 1GB
  * @returns
  */
 export function FileSelectInput(props) {
-    const { onChange, fileType, onFileSubmit, bold = false } = props;
+    const { onChange, fileType, onFileSubmit } = props;
     const [errorMessage, setErrorMessage] = useState(null);
     const inputRef = useRef(null);
     const { t } = useTranslation();
@@ -82,32 +82,32 @@ export function FileSelectInput(props) {
     return (_jsxs(_Fragment, { children: [_jsxs(Container, { children: [_jsx(Button, { fullWidth: true, color: "grey", size: "medium", label: t("파일 선택하기"), onClick: () => {
                             var _a;
                             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-                        }, startIcon: _jsx(UploadLineIcon, {}), bold: bold }), _jsx(IconAndErrorMessage, { children: errorMessage && (_jsxs(_Fragment, { children: [_jsx(FileWarningLineIcon, { css: css `
-                  padding: 0 4px;
-                  width: 24px;
-                  height: 24px;
-                  color: ${theme.color.background.danger};
+                        }, startIcon: _jsx(UploadLineIcon, {}) }), _jsx(IconAndErrorMessage, { children: errorMessage && (_jsxs(_Fragment, { children: [_jsx(FileWarningLineIcon, { css: css `
+                  padding: 0 4px;
+                  width: 24px;
+                  height: 24px;
+                  color: ${theme.color.background.danger};
                 ` }), _jsx(ErrorMessage, { children: errorMessage })] })) })] }), _jsx(HiddenInput, { ref: inputRef, type: "file", accept: accept, onChange: handleFileChange })] }));
 }
-const HiddenInput = styled.input `
-  display: none;
+const HiddenInput = styled.input `
+  display: none;
 `;
-const ErrorMessage = styled.div(({ theme }) => css `
-    color: ${theme.color.foreground.danger};
-    font-family: ${theme.fontFamily.ui};
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 20px;
+const ErrorMessage = styled.div(({ theme }) => css `
+    color: ${theme.color.foreground.danger};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
   `);
-const Container = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 `;
-const IconAndErrorMessage = styled.div `
-  padding-left: 8px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 4px;
+const IconAndErrorMessage = styled.div `
+  padding-left: 8px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
 `;

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

@@ -8,8 +8,8 @@ export function ImagePreview(props) {
     const { t } = useTranslation();
     return (_jsxs(Container, { children: [t("이미지 미리보기"), erroredSrc === src ? (fallback) : (_jsx("img", { src: src, alt: alt, onError: () => setErroredSrc(src) }))] }));
 }
-const Container = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 `;

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

@@ -53,21 +53,21 @@ export function InsertImageDialog(props) {
                                 setValue("src", value);
                             }, fileType: "image" }), _jsx(FormInput, { name: "src", control: control, placeholder: "https://www.pexels.com/photo/n-2848492", size: "medium", label: "URL", fullWidth: true, startIcon: _jsx(LinkIcon, {}) }), previewSrc && (_jsx(ImagePreview, { src: previewSrc, alt: watch("altText"), fallback: _jsx(ImageNotAvailable, {}) })), _jsx(FormInput, { name: "altText", control: control, placeholder: t("삽입하는 이미지에 관한 설명"), size: "medium", label: t("대체 텍스트"), fullWidth: true })] }) }), _jsxs(AlertDialogActions, { children: [_jsx(Button, { type: "submit", fullWidth: true, label: t("삽입하기"), size: "medium", color: "primary", disabled: isDisabled }), onDelete && (_jsx(Button, { color: "danger", size: "medium", fullWidth: true, label: t("삭제하기"), onClick: onDelete }))] })] }));
 }
-const StyledAlertDialog = styled(AlertDialog) `
-  gap: 16px;
+const StyledAlertDialog = styled(AlertDialog) `
+  gap: 16px;
 `;
-const StyledAlertDialogTitle = styled(AlertDialogTitle)(({ theme }) => css `
-    color: ${theme.color.foreground.neutralBase};
-    text-align: center;
-    font-family: ${theme.fontFamily.ui};
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 28px;
-    letter-spacing: 0.25px;
+const StyledAlertDialogTitle = styled(AlertDialogTitle)(({ theme }) => css `
+    color: ${theme.color.foreground.neutralBase};
+    text-align: center;
+    font-family: ${theme.fontFamily.ui};
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 28px;
+    letter-spacing: 0.25px;
   `);
-const Inputs = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
+const Inputs = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 `;

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

@@ -48,8 +48,8 @@ export function InsertVideoDialog(props) {
             handleSubmit(onSubmit)();
         }, disableIconPadding: true, children: [_jsx(StyledAlertDialogTitle, { onClose: handleOnClose, children: title }), _jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(FormInput, { name: "src", control: control, rules: {
                                 validate: (value) => ReactPlayer.canPlay(value) || "올바른 동영상 URL을 입력하세요.",
-                            }, placeholder: "https://example.com/video.mp4", size: "medium", label: "URL", fullWidth: true, startIcon: _jsx(LinkIcon, {}) }), videoCanPlay && (_jsx(ReactPlayer, { css: css `
-                background: black;
+                            }, placeholder: "https://example.com/video.mp4", size: "medium", label: "URL", fullWidth: true, startIcon: _jsx(LinkIcon, {}) }), videoCanPlay && (_jsx(ReactPlayer, { css: css `
+                background: black;
               `, width: "100%", url: previewSrc, controls: true, config: {
                                 file: {
                                     hlsOptions: {
@@ -58,21 +58,21 @@ export function InsertVideoDialog(props) {
                                 },
                             } }))] }) }), _jsxs(AlertDialogActions, { children: [_jsx(Button, { type: "submit", fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: !videoCanPlay }), onDelete && (_jsx(Button, { color: "danger", size: "medium", fullWidth: true, label: "\uC0AD\uC81C\uD558\uAE30", onClick: onDelete }))] })] }));
 }
-const StyledAlertDialog = styled(AlertDialog) `
-  gap: 16px;
+const StyledAlertDialog = styled(AlertDialog) `
+  gap: 16px;
 `;
-const StyledAlertDialogTitle = styled(AlertDialogTitle)(({ theme }) => css `
-    color: ${theme.color.foreground.neutralBase};
-    text-align: center;
-    font-family: ${theme.fontFamily.ui};
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 28px;
-    letter-spacing: 0.25px;
+const StyledAlertDialogTitle = styled(AlertDialogTitle)(({ theme }) => css `
+    color: ${theme.color.foreground.neutralBase};
+    text-align: center;
+    font-family: ${theme.fontFamily.ui};
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 28px;
+    letter-spacing: 0.25px;
   `);
-const Inputs = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
+const Inputs = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 `;

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

@@ -57,6 +57,6 @@ export function UploadFileDialog({ open, onClose, onChange, }) {
     }, [open]);
     return (_jsx(HiddenInput, { ref: inputRef, type: "file", accept: "*", onChange: handleFileChange }));
 }
-const HiddenInput = styled.input `
-  display: none;
+const HiddenInput = styled.input `
+  display: none;
 `;

package/dist/patterns/LexicalEditor/hr.svg

@@ -1,3 +1,3 @@
-<svg width="521" height="1" viewBox="0 0 521 1" fill="none" xmlns="http://www.w3.org/2000/svg">
-<line y1="0.5" x2="521" y2="0.5" stroke="#9C9C9C"/>
-</svg>
+<svg width="521" height="1" viewBox="0 0 521 1" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line y1="0.5" x2="521" y2="0.5" stroke="#9C9C9C"/>
+</svg>

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

@@ -45,9 +45,9 @@ export function FileComponent({ fileName, fileSize, nodeKey, fileUrl, fileUpload
     }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_DELETE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW)), [clearSelection, editor, isSelected, nodeKey, $onDelete, setSelected]);
     return (_jsx(_Fragment, { children: isEditable ? (_jsx(FileDetailContainer, { isSelected: isSelected, ref: ref, children: _jsxs(FileInfo, { children: [_jsx(IconContainer, { children: getFileIcon(fileName) }), _jsx(FileName, { children: _jsx(OverflowTooltip, { text: fileName }) }), _jsx(FileOptionalInfo, { children: fileUploadDate }), _jsxs(FileSize, { children: [(fileSize / (1024 * 1024)).toFixed(1), " MB"] })] }) })) : (_jsx(FileDownloadButton, { fileName: fileName, fileUrl: fileUrl, fileSize: fileSize })) }));
 }
-export const FileName = styled.div `
-  flex: 1;
-  overflow: hidden;
+export const FileName = styled.div `
+  flex: 1;
+  overflow: hidden;
 `;
 export function getFileIcon(fileName) {
     var _a;
@@ -85,51 +85,51 @@ export function getFileIcon(fileName) {
             return _jsx(CustomFilenameAllColorIcon, {});
     }
 }
-export const FileDetailContainer = styled.div(({ isSelected, theme }) => css `
-    display: flex;
-    flex-direction: column;
-    width: 620px;
-    min-width: 400px;
+export const FileDetailContainer = styled.div(({ isSelected, theme }) => css `
+    display: flex;
+    flex-direction: column;
+    width: 620px;
+    min-width: 400px;
     background: ${isSelected
     ? theme.color.background.neutralAltActive
-    : theme.color.background.neutralAlt};
-    border-radius: 10px;
+    : theme.color.background.neutralAlt};
+    border-radius: 10px;
   `);
-export const IconContainer = styled.div `
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
+export const IconContainer = styled.div `
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
 `;
-export const FileInfo = styled.div(({ theme }) => css `
-    display: flex;
-    padding: 16px;
-    align-items: center;
-    height: 48px;
-    gap: 8px;
-    color: ${theme.color.foreground.neutralBase};
-    font-family: ${theme.fontFamily.ui};
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 20px; /* 125% */
-    border-radius: 10px;
-    cursor: pointer;
+export const FileInfo = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 16px;
+    align-items: center;
+    height: 48px;
+    gap: 8px;
+    color: ${theme.color.foreground.neutralBase};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 20px; /* 125% */
+    border-radius: 10px;
+    cursor: pointer;
   `);
-export const FileSize = styled.span(({ theme }) => css `
-    flex-shrink: 0;
-    margin-left: auto;
-    color: ${theme.color.foreground.neutralBaseDisabled};
-    font-family: ${theme.fontFamily.ui};
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 20px; /* 142.857% */
+export const FileSize = styled.span(({ theme }) => css `
+    flex-shrink: 0;
+    margin-left: auto;
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
   `);
-export const FileOptionalInfo = styled.div(({ theme }) => css `
-    font-family: ${theme.fontFamily.ui};
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px;
-    color: ${theme.color.foreground.neutralBaseDisabled};
-    text-align: right;
-    flex-shrink: 0;
+export const FileOptionalInfo = styled.div(({ theme }) => css `
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    text-align: right;
+    flex-shrink: 0;
   `);

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

@@ -59,30 +59,30 @@ export function FileDownloadButton({ fileName, fileSize, fileUrl, }) {
     });
     return (_jsxs(ButtonContainer, { onClick: handleDownload, theme: theme, children: [_jsx(IconContainer, { children: getFileIcon(fileName) }), _jsx(FileNameLabel, { children: _jsx(OverflowTooltip, { text: fileName }) }), _jsxs(FileSize, { children: [(fileSize / (1024 * 1024)).toFixed(1), " MB"] })] }));
 }
-const ButtonContainer = styled.button(({ theme }) => css `
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 12px 16px;
-    height: 48px;
-    background-color: ${theme.color.background.neutralAlt};
-    border: none;
-    border-radius: 10px;
-    cursor: pointer;
-    color: ${theme.color.foreground.neutralBase};
-    font-family: ${theme.fontFamily.ui};
-    font-size: 16px;
-    font-weight: 500;
-    font-style: normal;
-    line-height: 20px; /* 125% */
-    text-align: left;
-    overflow: hidden;
-
-    ${HOVER(css `
-      background: ${theme.color.background.neutralAltActive};
-      color: ${theme.color.foreground.neutralBaseActive};
-    `)}
+const ButtonContainer = styled.button(({ theme }) => css `
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px;
+    height: 48px;
+    background-color: ${theme.color.background.neutralAlt};
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    color: ${theme.color.foreground.neutralBase};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 16px;
+    font-weight: 500;
+    font-style: normal;
+    line-height: 20px; /* 125% */
+    text-align: left;
+    overflow: hidden;
+
+    ${HOVER(css `
+      background: ${theme.color.background.neutralAltActive};
+      color: ${theme.color.foreground.neutralBaseActive};
+    `)}
   `);
-const FileNameLabel = styled.div `
-  max-width: 152px;
+const FileNameLabel = styled.div `
+  max-width: 152px;
 `;

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

@@ -194,15 +194,15 @@ export function ImageComponent({ src, altText, nodeKey, width, height, maxWidth,
     if (!isEditable) {
         return (_jsx(Suspense, { fallback: null, children: _jsx("div", { draggable: draggable, children: isLoadError ? (_jsx(ImageNotAvailable, {})) : (_jsx(LazyImage, { className: isFocused
                         ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}`
-                        : null, css: css `
-                cursor: pointer;
+                        : null, css: css `
+                cursor: pointer;
               `, src: src, altText: altText, imageRef: imageRef, width: width, height: height, maxWidth: maxWidth, onError: () => setIsLoadError(true), buttonProps: {
                         onClick: () => window.open(src, "_blank"),
                     }, title: t("클릭해서 원본 이미지 보기."), addtionalInfoLabel: _jsx("span", { css: VISUALLY_HIDDEN, children: t("(새 창)", { context: "렉시컬 이미지 도구" }) }) })) }) }));
     }
-    return (_jsxs(_Fragment, { children: [_jsxs(EditContainer, { children: [_jsx(Suspense, { fallback: null, children: _jsx("div", { draggable: draggable, css: css `
-              // ImageResizer를 위한 relative 설정입니다.
-              position: relative;
+    return (_jsxs(_Fragment, { children: [_jsxs(EditContainer, { children: [_jsx(Suspense, { fallback: null, children: _jsx("div", { draggable: draggable, css: css `
+              // ImageResizer를 위한 relative 설정입니다.
+              position: relative;
             `, children: isLoadError ? (_jsx(ImageNotAvailable, {})) : (_jsxs(_Fragment, { children: [_jsx(LazyImage, { className: isFocused
                                             ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}`
                                             : null, src: src, altText: altText, imageRef: imageRef, width: width, height: height, maxWidth: maxWidth, onError: () => setIsLoadError(true) }), resizable && $isNodeSelection(selection) && isFocused && (_jsx(ImageResizer, { showCaption: false, setShowCaption: () => { }, editor: editor, buttonRef: buttonRef, imageRef: imageRef, 
@@ -239,7 +239,7 @@ export function ImageComponent({ src, altText, nodeKey, width, height, maxWidth,
                     });
                 } }, src)] }));
 }
-const EditContainer = styled.div `
-  display: flex;
-  gap: 4px;
+const EditContainer = styled.div `
+  display: flex;
+  gap: 4px;
 `;