@team-monolith/cds 1.103.3 → 1.103.4

package/dist/components/Button.js

@@ -17,193 +17,193 @@ import React from "react";
 import { HOVER } from "../utils/hover";
 import { Spinner } from "..";
 const COLOR_TO_BUTTON_STYLE = (theme, color, disabled) => ({
-    primary: css `
+    primary: css `
       ${disabled
-        ? css `
-            color: ${theme.color.foreground.neutralAltDisabled};
-            background: ${theme.color.background.primaryDisabled};
+        ? css `
+            color: ${theme.color.foreground.neutralAltDisabled};
+            background: ${theme.color.background.primaryDisabled};
           `
-        : css `
-            color: ${theme.color.foreground.neutralAlt};
-            background: ${theme.color.background.primary};
-            ${HOVER(css `
-              color: ${theme.color.foreground.neutralAltActive};
-              background: ${theme.color.background.primaryActive};
-            `)}
-          `}
+        : css `
+            color: ${theme.color.foreground.neutralAlt};
+            background: ${theme.color.background.primary};
+            ${HOVER(css `
+              color: ${theme.color.foreground.neutralAltActive};
+              background: ${theme.color.background.primaryActive};
+            `)}
+          `}
     `,
-    grey: css `
+    grey: css `
       ${disabled
-        ? css `
-            background: ${theme.color.background.neutralAltDisabled};
-            color: ${theme.color.foreground.neutralBaseDisabled};
+        ? css `
+            background: ${theme.color.background.neutralAltDisabled};
+            color: ${theme.color.foreground.neutralBaseDisabled};
           `
-        : css `
-            background: ${theme.color.background.neutralAlt};
-            color: ${theme.color.foreground.neutralBase};
-            ${HOVER(css `
-              background: ${theme.color.background.neutralAltActive};
-              color: ${theme.color.foreground.neutralBaseActive};
-            `)}
-          `}
+        : css `
+            background: ${theme.color.background.neutralAlt};
+            color: ${theme.color.foreground.neutralBase};
+            ${HOVER(css `
+              background: ${theme.color.background.neutralAltActive};
+              color: ${theme.color.foreground.neutralBaseActive};
+            `)}
+          `}
     `,
-    danger: css `
+    danger: css `
       ${disabled
-        ? css `
-            color: ${theme.color.foreground.neutralAltDisabled};
-            background: ${theme.color.background.dangerDisabled};
+        ? css `
+            color: ${theme.color.foreground.neutralAltDisabled};
+            background: ${theme.color.background.dangerDisabled};
           `
-        : css `
-            color: ${theme.color.foreground.neutralAlt};
-            background: ${theme.color.background.danger};
-            ${HOVER(css `
-              color: ${theme.color.foreground.neutralAltActive};
-              background: ${theme.color.background.dangerActive};
-            `)}
-          `}
+        : css `
+            color: ${theme.color.foreground.neutralAlt};
+            background: ${theme.color.background.danger};
+            ${HOVER(css `
+              color: ${theme.color.foreground.neutralAltActive};
+              background: ${theme.color.background.dangerActive};
+            `)}
+          `}
     `,
-    textNeutral: css `
+    textNeutral: css `
       ${disabled
-        ? css `
-            background: none;
-            color: ${theme.color.foreground.neutralBaseDisabled};
+        ? css `
+            background: none;
+            color: ${theme.color.foreground.neutralBaseDisabled};
           `
-        : css `
-            background: none;
-            color: ${theme.color.foreground.neutralBase};
-            ${HOVER(css `
-              background: ${theme.color.blanket.neutralLight};
-              color: ${theme.color.foreground.neutralBaseActive};
-            `)}
-          `}
+        : css `
+            background: none;
+            color: ${theme.color.foreground.neutralBase};
+            ${HOVER(css `
+              background: ${theme.color.blanket.neutralLight};
+              color: ${theme.color.foreground.neutralBaseActive};
+            `)}
+          `}
     `,
-    textDanger: css `
+    textDanger: css `
       ${disabled
-        ? css `
-            background: none;
-            color: ${theme.color.foreground.dangerDisabled};
+        ? css `
+            background: none;
+            color: ${theme.color.foreground.dangerDisabled};
           `
-        : css `
-            background: none;
-            color: ${theme.color.foreground.danger};
-            ${HOVER(css `
-              background: ${theme.color.blanket.neutralLight};
-              color: ${theme.color.foreground.dangerActive};
-            `)}
-          `}
+        : css `
+            background: none;
+            color: ${theme.color.foreground.danger};
+            ${HOVER(css `
+              background: ${theme.color.blanket.neutralLight};
+              color: ${theme.color.foreground.dangerActive};
+            `)}
+          `}
     `,
-    textPrimary: css `
+    textPrimary: css `
       ${disabled
-        ? css `
-            background: none;
-            color: ${theme.color.foreground.primaryDisabled};
+        ? css `
+            background: none;
+            color: ${theme.color.foreground.primaryDisabled};
           `
-        : css `
-            background: none;
-            color: ${theme.color.foreground.primary};
-            ${HOVER(css `
-              background: ${theme.color.blanket.neutralLight};
-              color: ${theme.color.foreground.primaryActive};
-            `)}
-          `}
+        : css `
+            background: none;
+            color: ${theme.color.foreground.primary};
+            ${HOVER(css `
+              background: ${theme.color.blanket.neutralLight};
+              color: ${theme.color.foreground.primaryActive};
+            `)}
+          `}
     `,
-    black: css `
+    black: css `
       ${disabled
-        ? css `
-            background: ${theme.color.background.inverseDisabled};
-            color: ${theme.color.foreground.neutralAltDisabled};
+        ? css `
+            background: ${theme.color.background.inverseDisabled};
+            color: ${theme.color.foreground.neutralAltDisabled};
           `
-        : css `
-            background: ${theme.color.background.inverse};
-            color: ${theme.color.foreground.neutralAlt};
-            ${HOVER(css `
-              background: ${theme.color.background.inverseActive};
-              color: ${theme.color.foreground.neutralAltActive};
-            `)}
-          `}
+        : css `
+            background: ${theme.color.background.inverse};
+            color: ${theme.color.foreground.neutralAlt};
+            ${HOVER(css `
+              background: ${theme.color.background.inverseActive};
+              color: ${theme.color.foreground.neutralAltActive};
+            `)}
+          `}
     `,
-    white: css `
+    white: css `
       ${disabled
-        ? css `
-            background: ${theme.color.background.neutralAltDisabled};
-            color: ${theme.color.foreground.neutralBaseDisabled};
+        ? css `
+            background: ${theme.color.background.neutralAltDisabled};
+            color: ${theme.color.foreground.neutralBaseDisabled};
           `
-        : css `
-            background: ${theme.color.background.neutralBase};
-            color: ${theme.color.foreground.neutralBase};
-            ${HOVER(css `
-              background: ${theme.color.background.neutralAltActive};
-              color: ${theme.color.foreground.neutralBaseActive};
-            `)}
-          `}
+        : css `
+            background: ${theme.color.background.neutralBase};
+            color: ${theme.color.foreground.neutralBase};
+            ${HOVER(css `
+              background: ${theme.color.background.neutralAltActive};
+              color: ${theme.color.foreground.neutralBaseActive};
+            `)}
+          `}
     `,
 })[color];
 const SIZE_TO_BUTTON_STYLE = {
-    large: css `
-    min-width: 100px;
-    height: 56px;
-    padding: 0 20px;
-    gap: 10px;
-    border-radius: 12px;
-
-    svg {
-      width: 24px;
-      height: 24px;
-    }
+    large: css `
+    min-width: 100px;
+    height: 56px;
+    padding: 0 20px;
+    gap: 10px;
+    border-radius: 12px;
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
   `,
-    medium: css `
-    min-width: 82px;
-    height: 48px;
-    padding: 0 16px;
-    gap: 8px;
-    border-radius: 10px;
-
-    svg {
-      width: 20px;
-      height: 20px;
-    }
+    medium: css `
+    min-width: 82px;
+    height: 48px;
+    padding: 0 16px;
+    gap: 8px;
+    border-radius: 10px;
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
   `,
-    small: css `
-    min-width: 64px;
-    height: 36px;
-    padding: 0 12px;
-    gap: 8px;
-    border-radius: 8px;
-
-    svg {
-      width: 16px;
-      height: 16px;
-    }
+    small: css `
+    min-width: 64px;
+    height: 36px;
+    padding: 0 12px;
+    gap: 8px;
+    border-radius: 8px;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
   `,
-    xsmall: css `
-    min-width: 52px;
-    height: 28px;
-    padding: 0 8px;
-    gap: 4px;
-    border-radius: 6px;
-
-    svg {
-      width: 12px;
-      height: 12px;
-    }
+    xsmall: css `
+    min-width: 52px;
+    height: 28px;
+    padding: 0 8px;
+    gap: 4px;
+    border-radius: 6px;
+
+    svg {
+      width: 12px;
+      height: 12px;
+    }
   `,
 };
 const SIZE_TO_LABEL_STYLE = {
-    large: css `
-    font-size: 20px;
-    line-height: 24px;
+    large: css `
+    font-size: 20px;
+    line-height: 24px;
   `,
-    medium: css `
-    font-size: 18px;
-    line-height: 20px;
+    medium: css `
+    font-size: 18px;
+    line-height: 20px;
   `,
-    small: css `
-    font-size: 14px;
-    line-height: 16px;
+    small: css `
+    font-size: 14px;
+    line-height: 16px;
   `,
-    xsmall: css `
-    font-size: 14px;
-    line-height: 16px;
+    xsmall: css `
+    font-size: 14px;
+    line-height: 16px;
   `,
 };
 /**
@@ -213,40 +213,40 @@ export const Button = React.forwardRef(function Button(props, ref) {
     const { className, component: Component = "button", disabled, color, size, startIcon, endIcon, label, fullWidth, bold = false, loading = false } = props, other = __rest(props, ["className", "component", "disabled", "color", "size", "startIcon", "endIcon", "label", "fullWidth", "bold", "loading"]);
     const theme = useTheme();
     return (_jsxs(Component, Object.assign({ type: Component === "button" || Component === "input" ? "button" : undefined }, other, { className: className, ref: ref, css: [
-            css `
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          gap: 8px;
-
-          border: none;
-
+            css `
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+
+          border: none;
+
           ${disabled || loading
-                ? css `
-                cursor: default;
-                pointer-events: none;
+                ? css `
+                cursor: default;
+                pointer-events: none;
               `
-                : css `
-                cursor: pointer;
-              `}
-
-          font-family: ${theme.fontFamily.ui};
-          text-decoration: none;
-
+                : css `
+                cursor: pointer;
+              `}
+
+          font-family: ${theme.fontFamily.ui};
+          text-decoration: none;
+
           ${fullWidth
-                ? css `
-                width: 100%;
+                ? css `
+                width: 100%;
               `
-                : css `
-                flex-shrink: 0;
-              `};
+                : css `
+                flex-shrink: 0;
+              `};
         `,
             COLOR_TO_BUTTON_STYLE(theme, color, Boolean(disabled || loading)),
             SIZE_TO_BUTTON_STYLE[size],
         ], disabled: disabled || loading, children: [loading ? _jsx(Spinner, {}) : startIcon, label && (_jsx(Label, { size: size, bold: bold, children: label })), endIcon] })));
 });
-const Label = styled.span `
-  font-weight: ${({ bold }) => (bold ? 700 : 400)};
-  white-space: nowrap;
-  ${({ size }) => SIZE_TO_LABEL_STYLE[size]}
+const Label = styled.span `
+  font-weight: ${({ bold }) => (bold ? 700 : 400)};
+  white-space: nowrap;
+  ${({ size }) => SIZE_TO_LABEL_STYLE[size]}
 `;

package/dist/components/CheckboxInput.js

@@ -16,84 +16,84 @@ import * as React from "react";
 import styled from "@emotion/styled";
 import { ZINDEX } from "../utils/zIndex";
 const CHECKBOX_ICON_STYLE = (theme, type, disabled) => ({
-    default: css `
-      rect {
-        fill: ${theme.color.background.neutralBase};
-        stroke: ${theme.color.background.neutralAltActive};
-      }
+    default: css `
+      rect {
+        fill: ${theme.color.background.neutralBase};
+        stroke: ${theme.color.background.neutralAltActive};
+      }
       ${disabled
-        ? css `
-            rect {
-              fill: ${theme.color.background.neutralBaseDisabled};
-              stroke: ${theme.color.foreground.neutralBaseDisabled};
-            }
+        ? css `
+            rect {
+              fill: ${theme.color.background.neutralBaseDisabled};
+              stroke: ${theme.color.foreground.neutralBaseDisabled};
+            }
           `
-        : css `
-            input[type="checkbox"]:hover + & {
-              rect {
-                stroke: ${theme.color.background.primary};
-              }
-            }
-          `}
+        : css `
+            input[type="checkbox"]:hover + & {
+              rect {
+                stroke: ${theme.color.background.primary};
+              }
+            }
+          `}
     `,
-    checked: css `
-      rect {
-        fill: ${theme.color.background.primary};
-        stroke: ${theme.color.background.primary};
-      }
-      path {
-        fill: ${theme.color.background.neutralBase};
-      }
+    checked: css `
+      rect {
+        fill: ${theme.color.background.primary};
+        stroke: ${theme.color.background.primary};
+      }
+      path {
+        fill: ${theme.color.background.neutralBase};
+      }
       ${disabled
-        ? css `
-            rect {
-              fill: ${theme.color.background.neutralBaseDisabled};
-              stroke: ${theme.color.background.primaryDisabled};
-            }
-            path {
-              fill: ${theme.color.background.primaryDisabled};
-            }
+        ? css `
+            rect {
+              fill: ${theme.color.background.neutralBaseDisabled};
+              stroke: ${theme.color.background.primaryDisabled};
+            }
+            path {
+              fill: ${theme.color.background.primaryDisabled};
+            }
           `
-        : css `
-            input[type="checkbox"]:hover + & {
-              rect {
-                fill: ${theme.color.background.primaryActive};
-                stroke: ${theme.color.background.primaryActive};
-              }
-            }
-          `}
+        : css `
+            input[type="checkbox"]:hover + & {
+              rect {
+                fill: ${theme.color.background.primaryActive};
+                stroke: ${theme.color.background.primaryActive};
+              }
+            }
+          `}
     `,
-    partial: css `
-      rect {
-        fill: ${theme.color.background.neutralBase};
-        stroke: ${theme.color.background.primary};
-      }
-      rect + rect {
-        fill: ${theme.color.background.primary};
-        stroke: none;
-      }
+    partial: css `
+      rect {
+        fill: ${theme.color.background.neutralBase};
+        stroke: ${theme.color.background.primary};
+      }
+      rect + rect {
+        fill: ${theme.color.background.primary};
+        stroke: none;
+      }
       ${disabled
-        ? css `
-            rect {
-              fill: ${theme.color.background.neutralBaseDisabled};
-              stroke: ${theme.color.background.primaryDisabled};
-            }
-            rect + rect {
-              fill: ${theme.color.background.primaryDisabled};
-              stroke: none;
-            }
+        ? css `
+            rect {
+              fill: ${theme.color.background.neutralBaseDisabled};
+              stroke: ${theme.color.background.primaryDisabled};
+            }
+            rect + rect {
+              fill: ${theme.color.background.primaryDisabled};
+              stroke: none;
+            }
           `
-        : css `
-            input[type="checkbox"]:hover + & {
-              rect {
-                stroke: ${theme.color.background.primaryActive};
-              }
-              rect + rect {
-                fill: ${theme.color.background.primaryActive};
-                stroke: none;
-              }
-            }
-          `}
+        : css `
+            input[type="checkbox"]:hover + & {
+              rect {
+                stroke: ${theme.color.background.primaryActive};
+              }
+              rect + rect {
+                fill: ${theme.color.background.primaryActive};
+                stroke: none;
+              }
+            }
+          `}
     `,
 })[type];
 /**
@@ -112,8 +112,8 @@ export const CheckboxInput = React.forwardRef(function CheckboxInput(props, ref)
         onChange,
         inputProps,
     };
-    return (_jsxs(Label, Object.assign({ className: className, ref: ref, disabled: disabled !== null && disabled !== void 0 ? disabled : false }, other, { children: [_jsx(Checkbox, Object.assign({}, checkboxProps)), _jsx("span", { css: css `
-          margin-left: 8px;
+    return (_jsxs(Label, Object.assign({ className: className, ref: ref, disabled: disabled !== null && disabled !== void 0 ? disabled : false }, other, { children: [_jsx(Checkbox, Object.assign({}, checkboxProps)), _jsx("span", { css: css `
+          margin-left: 8px;
         `, children: label })] })));
 });
 const Checkbox = React.forwardRef(function Checkbox(props, ref) {
@@ -125,38 +125,38 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
             : "default";
     return (_jsxs(CheckboxContainer, Object.assign({ className: className, spacer: spacer, disabled: disabled, ref: ref }, other, { children: [_jsx(StyledInput, Object.assign({ type: "checkbox" }, inputProps, { checked: checked, disabled: disabled, onClick: onClick, onChange: onChange })), _jsx(CheckboxIcon, { type: type, disabled: disabled })] })));
 });
-const CheckboxContainer = styled.span(({ spacer, disabled }) => css `
-    display: inline-flex;
-    position: relative;
-    width: 16px;
-    height: 16px;
-    cursor: ${disabled ? "default" : "pointer"};
-    margin-bottom: ${spacer ? "8px" : "0"};
+const CheckboxContainer = styled.span(({ spacer, disabled }) => css `
+    display: inline-flex;
+    position: relative;
+    width: 16px;
+    height: 16px;
+    cursor: ${disabled ? "default" : "pointer"};
+    margin-bottom: ${spacer ? "8px" : "0"};
   `);
-const StyledInput = styled.input `
-  cursor: inherit;
-  position: absolute;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  padding: 0;
-  // input 컴포넌트는 보이지 않지만, 클릭이 가능하게 z-index를 설정합니다.
-  z-index: ${ZINDEX.inputBase};
+const StyledInput = styled.input `
+  cursor: inherit;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+  // input 컴포넌트는 보이지 않지만, 클릭이 가능하게 z-index를 설정합니다.
+  z-index: ${ZINDEX.inputBase};
 `;
-const Label = styled.label `
-  display: flex;
-  position: relative;
-  width: fit-content;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 16px;
+const Label = styled.label `
+  display: flex;
+  position: relative;
+  width: fit-content;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 16px;
   color: ${({ theme, disabled }) => disabled
     ? theme.color.foreground.neutralBaseDisabled
-    : theme.color.foreground.neutralBase};
-  align-self: center;
+    : theme.color.foreground.neutralBase};
+  align-self: center;
 `;
 const CheckboxIcon = (props) => {
     const theme = useTheme();

package/dist/components/FileTypeAlertDialog.js

@@ -7,10 +7,10 @@ import { Button } from "./Button";
 export function FileTypeAlertDialog(props) {
     const { open, onClose, content, openFileBrowser } = props;
     const theme = useTheme();
-    return (_jsxs(AlertDialog, { open: open, onClose: onClose, icon: _jsx(AlertFillIcon, { css: css `
-            color: ${theme.color.background.danger};
-          ` }), children: [_jsx(AlertDialogTitle, { css: css `
-          font-weight: 700;
+    return (_jsxs(AlertDialog, { open: open, onClose: onClose, icon: _jsx(AlertFillIcon, { css: css `
+            color: ${theme.color.background.danger};
+          ` }), children: [_jsx(AlertDialogTitle, { css: css `
+          font-weight: 700;
         `, onClose: onClose, children: "\uD30C\uC77C \uD615\uC2DD\uC744 \uD655\uC778\uD574\uC8FC\uC138\uC694." }), _jsx(AlertDialogContent, { children: content }), _jsxs(AlertDialogActions, { children: [_jsx(Button, { color: "grey", label: "\uB2EB\uAE30", size: "medium", onClick: onClose, bold: true }), _jsx(Button, { color: "primary", label: "\uB2E4\uC2DC \uC5C5\uB85C\uB4DC", size: "medium", onClick: () => {
                             onClose();
                             openFileBrowser();