@team-monolith/cds 1.125.0 → 1.126.0

package/dist/components/CheckboxInput.js

@@ -22,104 +22,104 @@ export const checkboxInputClasses = {
     label: "CheckboxInput-label",
 };
 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};
-              }
-            }
-            input[type="checkbox"]:focus-visible + & {
-              rect {
-                stroke: ${theme.color.background.primary};
-              }
-            }
-          `}
+        : css `
+            input[type="checkbox"]:hover + & {
+              rect {
+                stroke: ${theme.color.background.primary};
+              }
+            }
+            input[type="checkbox"]:focus-visible + & {
+              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};
-              }
-            }
-            input[type="checkbox"]:focus-visible + & {
-              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};
+              }
+            }
+            input[type="checkbox"]:focus-visible + & {
+              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;
-              }
-            }
-            input[type="checkbox"]:focus-visible + & {
-              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;
+              }
+            }
+            input[type="checkbox"]:focus-visible + & {
+              rect {
+                stroke: ${theme.color.background.primaryActive};
+              }
+              rect + rect {
+                fill: ${theme.color.background.primaryActive};
+                stroke: none;
+              }
+            }
+          `}
     `,
 })[type];
 /**
@@ -141,8 +141,8 @@ export const CheckboxInput = React.forwardRef(function CheckboxInput(props, ref)
     };
     return (_jsxs(Label, Object.assign({ className: [checkboxInputClasses.root, className]
             .filter(Boolean)
-            .join(" "), ref: ref, disabled: disabled !== null && disabled !== void 0 ? disabled : false }, other, { children: [_jsx(Checkbox, Object.assign({ className: checkboxInputClasses.checkbox }, checkboxProps)), _jsx("span", { className: checkboxInputClasses.label, css: css `
-          margin-left: 8px;
+            .join(" "), ref: ref, disabled: disabled !== null && disabled !== void 0 ? disabled : false }, other, { children: [_jsx(Checkbox, Object.assign({ className: checkboxInputClasses.checkbox }, checkboxProps)), _jsx("span", { className: checkboxInputClasses.label, css: css `
+          margin-left: 8px;
         `, children: label })] })));
 });
 const Checkbox = React.forwardRef(function Checkbox(props, ref) {
@@ -155,68 +155,68 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
     const clampedSize = Math.max(hitAreaSize, DEFAULT_CHECKBOX_SIZE);
     return (_jsxs(CheckboxContainer, Object.assign({ className: className, spacer: spacer, disabled: disabled, hitAreaSize: clampedSize, ref: ref }, other, { children: [_jsx(StyledInput, Object.assign({ type: "checkbox" }, inputProps, { checked: checked, disabled: disabled, onClick: onClick, onChange: onChange, size: clampedSize })), _jsx(CheckboxIcon, { type: type, disabled: disabled })] })));
 });
-const CheckboxContainer = styled.span(({ theme, spacer, disabled, hitAreaSize }) => css `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    width: ${DEFAULT_CHECKBOX_SIZE}px;
-    height: ${DEFAULT_CHECKBOX_SIZE}px;
-    cursor: ${disabled ? "default" : "pointer"};
-    margin-bottom: ${spacer ? "8px" : "0"};
-
-    svg {
-      z-index: 1;
-      pointer-events: none;
-    }
-
+const CheckboxContainer = styled.span(({ theme, spacer, disabled, hitAreaSize }) => css `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: ${DEFAULT_CHECKBOX_SIZE}px;
+    height: ${DEFAULT_CHECKBOX_SIZE}px;
+    cursor: ${disabled ? "default" : "pointer"};
+    margin-bottom: ${spacer ? "8px" : "0"};
+
+    svg {
+      z-index: 1;
+      pointer-events: none;
+    }
+
     ${hitAreaSize > DEFAULT_CHECKBOX_SIZE &&
-    css `
-      &::before {
-        content: "";
-        position: absolute;
-        top: ${(DEFAULT_CHECKBOX_SIZE - hitAreaSize) / 2}px;
-        left: ${(DEFAULT_CHECKBOX_SIZE - hitAreaSize) / 2}px;
-        width: ${hitAreaSize}px;
-        height: ${hitAreaSize}px;
-        border-radius: 50%;
-        background: ${theme.color.background.neutralAltActive};
-        opacity: 0;
-        pointer-events: none;
-      }
-    `}
+    css `
+      &::before {
+        content: "";
+        position: absolute;
+        top: ${(DEFAULT_CHECKBOX_SIZE - hitAreaSize) / 2}px;
+        left: ${(DEFAULT_CHECKBOX_SIZE - hitAreaSize) / 2}px;
+        width: ${hitAreaSize}px;
+        height: ${hitAreaSize}px;
+        border-radius: 50%;
+        background: ${theme.color.background.neutralAltActive};
+        opacity: 0;
+        pointer-events: none;
+      }
+    `}
     ${!disabled &&
-    css `
-      &:hover::before,
-      &:focus-visible::before {
-        opacity: 0.5; /* input 영역 hover 및 focus 시 표시 */
-      }
-    `}
+    css `
+      &:hover::before,
+      &:focus-visible::before {
+        opacity: 0.5; /* input 영역 hover 및 focus 시 표시 */
+      }
+    `}
   `);
-const StyledInput = styled.input(({ size }) => css `
-    cursor: inherit;
-    position: absolute;
-    top: ${(DEFAULT_CHECKBOX_SIZE - size) / 2}px;
-    left: ${(DEFAULT_CHECKBOX_SIZE - size) / 2}px;
-    opacity: 0;
-    width: ${size}px;
-    height: ${size}px;
-    margin: 0;
-    padding: 0;
-    // input 컴포넌트는 보이지 않지만, 클릭이 가능하게 z-index를 설정합니다.
-    z-index: ${ZINDEX.inputBase};
+const StyledInput = styled.input(({ size }) => css `
+    cursor: inherit;
+    position: absolute;
+    top: ${(DEFAULT_CHECKBOX_SIZE - size) / 2}px;
+    left: ${(DEFAULT_CHECKBOX_SIZE - size) / 2}px;
+    opacity: 0;
+    width: ${size}px;
+    height: ${size}px;
+    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

@@ -17,12 +17,12 @@ export function FileTypeAlertDialog(props) {
     const { t } = useTranslation();
     return (_jsxs(AlertDialog, { className: [fileTypeAlertDialogClasses.root, className]
             .filter(Boolean)
-            .join(" "), open: open, onClose: onClose, icon: _jsx(AlertFillIcon, { css: css `
-            color: ${theme.color.background.danger};
-          ` }), children: [_jsx(AlertDialogTitle, { className: fileTypeAlertDialogClasses.title, css: css `
-          font-weight: 700;
-        `, onClose: onClose, children: t("파일 형식을 확인해주세요.") }), _jsx(AlertDialogContent, { className: fileTypeAlertDialogClasses.content, children: content }), _jsxs(AlertDialogActions, { className: fileTypeAlertDialogClasses.actions, children: [_jsx(Button, { color: "grey", label: t("닫기", { context: "다이얼로그" }), size: "medium", onClick: onClose, bold: true }), _jsx(Button, { color: "primary", label: t("다시 업로드"), size: "medium", onClick: () => {
+            .join(" "), open: open, onClose: onClose, icon: _jsx(AlertFillIcon, { css: css `
+            color: ${theme.color.background.danger};
+          ` }), children: [_jsx(AlertDialogTitle, { className: fileTypeAlertDialogClasses.title, css: css `
+          font-weight: 700;
+        `, onClose: onClose, children: t("파일 형식을 확인해주세요.") }), _jsx(AlertDialogContent, { className: fileTypeAlertDialogClasses.content, children: content }), _jsxs(AlertDialogActions, { className: fileTypeAlertDialogClasses.actions, children: [_jsx(Button, { color: "grey", label: t("닫기", { context: "다이얼로그" }), size: "medium", onClick: onClose }), _jsx(Button, { color: "primary", label: t("다시 업로드"), size: "medium", onClick: () => {
                             onClose();
                             openFileBrowser();
-                        }, bold: true })] })] }));
+                        } })] })] }));
 }

package/dist/components/Input.js

@@ -21,50 +21,50 @@ export const inputClasses = {
     hint: "Input-hint",
 };
 const COLOR_TO_HINT_STYLES = (theme, color, disabled) => disabled
-    ? css `
-        color: ${theme.color.foreground.neutralBaseDisabled};
+    ? css `
+        color: ${theme.color.foreground.neutralBaseDisabled};
       `
     : {
-        default: css `
-          color: ${theme.color.foreground.neutralBaseDisabled};
+        default: css `
+          color: ${theme.color.foreground.neutralBaseDisabled};
         `,
-        base: css `
-          color: ${theme.color.foreground.neutralBaseDisabled};
+        base: css `
+          color: ${theme.color.foreground.neutralBaseDisabled};
         `,
-        activePrimary: css `
-          color: ${theme.color.foreground.neutralBaseDisabled};
+        activePrimary: css `
+          color: ${theme.color.foreground.neutralBaseDisabled};
         `,
-        activeDanger: css `
-          color: ${theme.color.foreground.danger};
+        activeDanger: css `
+          color: ${theme.color.foreground.danger};
         `,
-        activeSuccess: css `
-          color: ${theme.color.foreground.success};
+        activeSuccess: css `
+          color: ${theme.color.foreground.success};
         `,
     }[color];
 const SIZE_TO_FONT_STYLES = (size) => ({
-    small: css `
-      font-size: 14px;
-      line-height: 20px;
-      svg {
-        width: 16px;
-        height: 16px;
-      }
+    small: css `
+      font-size: 14px;
+      line-height: 20px;
+      svg {
+        width: 16px;
+        height: 16px;
+      }
     `,
-    medium: css `
-      font-size: 16px;
-      line-height: 24px;
-      svg {
-        width: 16px;
-        height: 16px;
-      }
+    medium: css `
+      font-size: 16px;
+      line-height: 24px;
+      svg {
+        width: 16px;
+        height: 16px;
+      }
     `,
-    large: css `
-      font-size: 18px;
-      line-height: 28px;
-      svg {
-        width: 18px;
-        height: 18px;
-      }
+    large: css `
+      font-size: 18px;
+      line-height: 28px;
+      svg {
+        width: 18px;
+        height: 18px;
+      }
     `,
 })[size];
 /**
@@ -81,27 +81,27 @@ export const Input = React.forwardRef(function Input(props, ref) {
 });
 const InputWrapper = styled("span", {
     shouldForwardProp: (prop) => prop !== "fullWidth",
-}) `
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  ${({ size }) => SIZE_TO_FONT_STYLES(size)}
-  ${({ fullWidth }) => fullWidth && `width: 100%;`}
-
-  position: relative;
+}) `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  ${({ size }) => SIZE_TO_FONT_STYLES(size)}
+  ${({ fullWidth }) => fullWidth && `width: 100%;`}
+
+  position: relative;
 `;
-const Label = styled.label `
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+const Label = styled.label `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
   ${({ theme, disabled }) => disabled &&
-    css `
-      color: ${theme.color.foreground.neutralBaseDisabled};
-    `}
+    css `
+      color: ${theme.color.foreground.neutralBaseDisabled};
+    `}
 `;
-const Hint = styled.div(({ theme, color, disabled }) => css `
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    ${COLOR_TO_HINT_STYLES(theme, color, disabled)};
+const Hint = styled.div(({ theme, color, disabled }) => css `
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    ${COLOR_TO_HINT_STYLES(theme, color, disabled)};
   `);

package/dist/components/InputBase.js

@@ -16,79 +16,79 @@ export const inputBaseClasses = {
 // 이 컴포넌트는 multiline을 고려하여 height를 명시적으로 지정하지 않았습니다.
 const COLOR_TO_INPUT_STYLES = (theme, color, disabled) => {
     if (disabled) {
-        return css `
-      border: 2px solid ${theme.color.background.neutralAltActive};
-      background: ${theme.color.background.neutralAltDisabled};
-      color: ${theme.color.foreground.neutralBaseDisabled};
+        return css `
+      border: 2px solid ${theme.color.background.neutralAltActive};
+      background: ${theme.color.background.neutralAltDisabled};
+      color: ${theme.color.foreground.neutralBaseDisabled};
     `;
     }
     return {
-        default: css `
-      border: 2px solid ${theme.color.background.neutralAltActive};
-      background: ${theme.color.background.neutralAlt};
-      color: ${theme.color.foreground.neutralBase};
+        default: css `
+      border: 2px solid ${theme.color.background.neutralAltActive};
+      background: ${theme.color.background.neutralAlt};
+      color: ${theme.color.foreground.neutralBase};
     `,
-        base: css `
-      border: 2px solid transparent;
-      background: ${theme.color.background.neutralBase};
-      color: ${theme.color.foreground.neutralBase};
+        base: css `
+      border: 2px solid transparent;
+      background: ${theme.color.background.neutralBase};
+      color: ${theme.color.foreground.neutralBase};
     `,
-        activePrimary: css `
-      border: 2px solid ${theme.color.foreground.primary};
-      background: ${theme.color.background.neutralBase};
-      color: ${theme.color.foreground.neutralBase};
+        activePrimary: css `
+      border: 2px solid ${theme.color.foreground.primary};
+      background: ${theme.color.background.neutralBase};
+      color: ${theme.color.foreground.neutralBase};
     `,
-        activeDanger: css `
-      border: 2px solid ${theme.color.foreground.danger};
-      background: ${theme.color.background.neutralBase};
-      color: ${theme.color.foreground.neutralBase};
+        activeDanger: css `
+      border: 2px solid ${theme.color.foreground.danger};
+      background: ${theme.color.background.neutralBase};
+      color: ${theme.color.foreground.neutralBase};
     `,
-        activeSuccess: css `
-      border: 2px solid ${theme.color.foreground.success};
-      background: ${theme.color.background.neutralBase};
-      color: ${theme.color.foreground.neutralBase};
+        activeSuccess: css `
+      border: 2px solid ${theme.color.foreground.success};
+      background: ${theme.color.background.neutralBase};
+      color: ${theme.color.foreground.neutralBase};
     `,
     }[color];
 };
 // 아래 padding 값은 피그마와 조금 다릅니다.
 // 왜냐하면 border가 따로 크기가 계산되므로 제외했기 때문입니다.
 const SIZE_TO_STYLES = (size, fullWidth) => ({
-    small: css `
-      padding-top: 6px;
-      padding-bottom: 6px;
-      ${!fullWidth && "max-width: 300px"};
+    small: css `
+      padding-top: 6px;
+      padding-bottom: 6px;
+      ${!fullWidth && "max-width: 300px"};
     `,
-    medium: css `
-      padding-top: 10px;
-      padding-bottom: 10px;
-      ${!fullWidth && "max-width: 375px"};
+    medium: css `
+      padding-top: 10px;
+      padding-bottom: 10px;
+      ${!fullWidth && "max-width: 375px"};
     `,
-    large: css `
-      padding-top: 12px;
-      padding-bottom: 12px;
-      ${!fullWidth && "max-width: 375px"};
+    large: css `
+      padding-top: 12px;
+      padding-bottom: 12px;
+      ${!fullWidth && "max-width: 375px"};
     `,
 })[size];
 function InputComponent(props) {
     const { placeholder, disabled = false, defaultValue, value } = props;
     const theme = useTheme();
-    const style = css `
-    appearance: none;
-    flex: 1;
-    width: 0; // https://stackoverflow.com/questions/42421361/input-button-elements-not-shrinking-in-a-flex-container
-    border: none;
-    padding: 0;
-    background-color: transparent;
-    font: inherit;
-    color: currentColor;
-    resize: none;
-
-    &:focus-visible {
-      outline: none;
-    }
-    &::placeholder {
-      color: ${theme.color.foreground.neutralBaseDisabled};
-    }
+    const style = css `
+    appearance: none;
+    flex: 1;
+    width: 0; // https://stackoverflow.com/questions/42421361/input-button-elements-not-shrinking-in-a-flex-container
+    border: none;
+    padding: 0;
+    background-color: transparent;
+    font: inherit;
+    color: currentColor;
+    resize: none;
+
+    &:focus-visible {
+      outline: none;
+    }
+    &::placeholder {
+      color: ${theme.color.foreground.neutralBaseDisabled};
+    }
   `;
     // Type Safety 때문에 코드의 중복을 허용합니다.
     if (props.multiline) {
@@ -107,24 +107,24 @@ export function InputBase(props) {
 }
 const InputContainer = styled("div", {
     shouldForwardProp: (prop) => !["inputSize", "fullWidth"].includes(prop),
-})(({ theme, color, inputSize, disabled, fullWidth }) => css `
-    display: flex;
-    align-items: center;
-    gap: 16px;
-
-    box-sizing: border-box;
-    padding: 14px 16px;
-    border-radius: 8px;
-    ${COLOR_TO_INPUT_STYLES(theme, color, disabled)}
-    ${SIZE_TO_STYLES(inputSize, fullWidth)}
-    ${fullWidth && `width: inherit;`} // InputWrapper의 width를 따릅니다.
+})(({ theme, color, inputSize, disabled, fullWidth }) => css `
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    box-sizing: border-box;
+    padding: 14px 16px;
+    border-radius: 8px;
+    ${COLOR_TO_INPUT_STYLES(theme, color, disabled)}
+    ${SIZE_TO_STYLES(inputSize, fullWidth)}
+    ${fullWidth && `width: inherit;`} // InputWrapper의 width를 따릅니다.
   `);
-const ClearButton = styled.button `
-  ${RESET_BUTTON}
-  color: currentColor;
-  &:not(:disabled) {
-    cursor: pointer;
-  }
-  display: flex;
-  align-items: center;
+const ClearButton = styled.button `
+  ${RESET_BUTTON}
+  color: currentColor;
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+  display: flex;
+  align-items: center;
 `;

package/dist/components/Modal.js

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 import { Modal as MuiModal, css } from "@mui/material";
-export const Modal = styled(MuiModal)(({ theme }) => css `
-    .MuiModal-backdrop {
-      background-color: ${theme.color.blanket.neutral};
-    }
+export const Modal = styled(MuiModal)(({ theme }) => css `
+    .MuiModal-backdrop {
+      background-color: ${theme.color.blanket.neutral};
+    }
   `);