@team-monolith/cds 1.103.4 → 1.105.0

package/dist/components/RadioInput.js

@@ -16,54 +16,54 @@ import * as React from "react";
 import styled from "@emotion/styled";
 import { ZINDEX } from "../utils/zIndex";
 const TYPE_TO_ICON_STYLE = (theme, type, disabled) => ({
-    default: css `
-      path {
-        stroke: ${theme.color.background.neutralAltActive};
-        fill: ${theme.color.background.neutralBase};
-      }
+    default: css `
+      path {
+        stroke: ${theme.color.background.neutralAltActive};
+        fill: ${theme.color.background.neutralBase};
+      }
       ${disabled
-        ? css `
-            path {
-              stroke: ${theme.color.foreground.neutralBaseDisabled};
-              fill: ${theme.color.background.neutralBaseDisabled};
-            }
+        ? css `
+            path {
+              stroke: ${theme.color.foreground.neutralBaseDisabled};
+              fill: ${theme.color.background.neutralBaseDisabled};
+            }
           `
-        : css `
-            input[type="radio"]:hover + & {
-              path {
-                stroke: ${theme.color.background.primary};
-              }
-            }
-          `}
+        : css `
+            input[type="radio"]:hover + & {
+              path {
+                stroke: ${theme.color.background.primary};
+              }
+            }
+          `}
     `,
-    selected: css `
-      path {
-        stroke: ${theme.color.background.primary};
-        fill: ${theme.color.background.neutralBase};
-      }
-      rect {
-        fill: ${theme.color.background.primary};
-      }
+    selected: css `
+      path {
+        stroke: ${theme.color.background.primary};
+        fill: ${theme.color.background.neutralBase};
+      }
+      rect {
+        fill: ${theme.color.background.primary};
+      }
       ${disabled
-        ? css `
-            path {
-              stroke: ${theme.color.background.primaryDisabled};
-              fill: ${theme.color.background.neutralBaseDisabled};
-            }
-            rect {
-              fill: ${theme.color.background.primaryDisabled};
-            }
+        ? css `
+            path {
+              stroke: ${theme.color.background.primaryDisabled};
+              fill: ${theme.color.background.neutralBaseDisabled};
+            }
+            rect {
+              fill: ${theme.color.background.primaryDisabled};
+            }
           `
-        : css `
-            input[type="radio"]:hover + & {
-              path {
-                stroke: ${theme.color.background.primaryActive};
-              }
-              rect {
-                fill: ${theme.color.background.primaryActive};
-              }
-            }
-          `}
+        : css `
+            input[type="radio"]:hover + & {
+              path {
+                stroke: ${theme.color.background.primaryActive};
+              }
+              rect {
+                fill: ${theme.color.background.primaryActive};
+              }
+            }
+          `}
     `,
 })[type];
 /**
@@ -81,8 +81,8 @@ export const RadioInput = React.forwardRef(function RadioInput(props, ref) {
         onChange,
         inputProps,
     };
-    return (_jsxs(Label, Object.assign({ className: className, ref: ref, disabled: disabled !== null && disabled !== void 0 ? disabled : false }, other, { children: [_jsx(RadioButton, Object.assign({}, radioProps)), _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(RadioButton, Object.assign({}, radioProps)), _jsx("span", { css: css `
+          margin-left: 8px;
         `, children: label })] })));
 });
 const RadioButton = React.forwardRef(function RadioButton(props, ref) {
@@ -90,38 +90,38 @@ const RadioButton = React.forwardRef(function RadioButton(props, ref) {
     const type = props.checked ? "selected" : "default";
     return (_jsxs(RadioButtonContainer, Object.assign({ className: className, spacer: spacer, disabled: disabled, ref: ref }, other, { children: [_jsx(StyledInput, Object.assign({ type: "radio" }, inputProps, { checked: checked, disabled: disabled, onChange: onChange })), _jsx(RadioButtonIcon, { type: type, disabled: disabled })] })));
 });
-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 RadioButtonContainer = styled.span(({ spacer, disabled }) => css `
-    display: inline-flex;
-    position: relative;
-    width: 16px;
-    height: 16px;
-    cursor: ${disabled ? "default" : "pointer"};
-    margin-bottom: ${spacer ? "8px" : "0"};
+const RadioButtonContainer = 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};
 `;
 // default와 selected 구조가 유사하여 하나의 컴포넌트로 표현합니다.
 const RadioButtonIcon = (props) => {

package/dist/components/SquareButton.js

@@ -17,128 +17,128 @@ import { HOVER } from "../utils/hover";
 import { Spinner } from "./Spinner";
 const COLOR_TO_BUTTON_STYLE = (theme, color, disabled) => ({
     danger: disabled
-        ? css `
-          background: ${theme.color.background.dangerDisabled};
-          color: ${theme.color.foreground.neutralAltDisabled};
+        ? css `
+          background: ${theme.color.background.dangerDisabled};
+          color: ${theme.color.foreground.neutralAltDisabled};
         `
-        : css `
-          background: ${theme.color.background.danger};
-          color: ${theme.color.foreground.neutralAlt};
-          ${HOVER(css `
-            background: ${theme.color.background.dangerActive};
-            color: ${theme.color.foreground.neutralAltActive};
-          `)}
+        : css `
+          background: ${theme.color.background.danger};
+          color: ${theme.color.foreground.neutralAlt};
+          ${HOVER(css `
+            background: ${theme.color.background.dangerActive};
+            color: ${theme.color.foreground.neutralAltActive};
+          `)}
         `,
     grey: 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};
+          `)}
         `,
     primary: disabled
-        ? css `
-          background: ${theme.color.background.primaryDisabled};
-          color: ${theme.color.foreground.neutralAltDisabled};
+        ? css `
+          background: ${theme.color.background.primaryDisabled};
+          color: ${theme.color.foreground.neutralAltDisabled};
         `
-        : css `
-          background: ${theme.color.background.primary};
-          color: ${theme.color.foreground.neutralAlt};
-          ${HOVER(css `
-            background: ${theme.color.background.primaryActive};
-            color: ${theme.color.foreground.neutralAltActive};
-          `)}
+        : css `
+          background: ${theme.color.background.primary};
+          color: ${theme.color.foreground.neutralAlt};
+          ${HOVER(css `
+            background: ${theme.color.background.primaryActive};
+            color: ${theme.color.foreground.neutralAltActive};
+          `)}
         `,
     icon: 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};
+          `)}
         `,
     black: 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: 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 `
-    width: 56px;
-    height: 56px;
-    padding: 12px;
-    border-radius: 8px;
-
-    svg {
-      width: 32px;
-      height: 32px;
-    }
+    large: css `
+    width: 56px;
+    height: 56px;
+    padding: 12px;
+    border-radius: 8px;
+
+    svg {
+      width: 32px;
+      height: 32px;
+    }
   `,
-    medium: css `
-    width: 48px;
-    height: 48px;
-    padding: 10px;
-    border-radius: 8px;
-
-    svg {
-      width: 28px;
-      height: 28px;
-    }
+    medium: css `
+    width: 48px;
+    height: 48px;
+    padding: 10px;
+    border-radius: 8px;
+
+    svg {
+      width: 28px;
+      height: 28px;
+    }
   `,
-    small: css `
-    width: 36px;
-    height: 36px;
-    padding: 8px;
-    border-radius: 8px;
-
-    svg {
-      width: 20px;
-      height: 20px;
-    }
+    small: css `
+    width: 36px;
+    height: 36px;
+    padding: 8px;
+    border-radius: 8px;
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
   `,
-    xsmall: css `
-    width: 28px;
-    height: 28px;
-    padding: 6px;
-    border-radius: 4px;
-
-    svg {
-      width: 16px;
-      height: 16px;
-    }
+    xsmall: css `
+    width: 28px;
+    height: 28px;
+    padding: 6px;
+    border-radius: 4px;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
   `,
 };
 /**
@@ -148,17 +148,17 @@ export const SquareButton = React.forwardRef(function SquareButton(props, ref) {
     const { className, component: Component = "button", disabled, color, size, icon, onClick, loading = false } = props, other = __rest(props, ["className", "component", "disabled", "color", "size", "icon", "onClick", "loading"]);
     const theme = useTheme();
     return (_jsx(Component, Object.assign({ type: Component === "button" || Component === "input" ? "button" : undefined }, other, { ref: ref, className: className, css: [
-            css `
-            border: none;
-
+            css `
+            border: none;
+
             ${disabled || loading
-                ? css `
-                  cursor: default;
-                  pointer-events: none;
+                ? css `
+                  cursor: default;
+                  pointer-events: none;
                 `
-                : css `
-                  cursor: pointer;
-                `}
+                : css `
+                  cursor: pointer;
+                `}
           `,
             COLOR_TO_BUTTON_STYLE(theme, color, Boolean(disabled || loading)),
             SIZE_TO_BUTTON_STYLE[size],

package/dist/components/Switch.js

@@ -38,73 +38,73 @@ const SIZE_TO_SWTICH_SIZE = {
 };
 const StyledSwitch = styled(MuiSwitch, {
     shouldForwardProp: (prop) => prop !== "switchSize",
-})(({ theme, switchSize }) => css `
-    // Specificity를 높이기 위해 최상위에 &.MuiSwitch-root를 추가
-    &.MuiSwitch-root {
-      width: ${SIZE_TO_SWTICH_SIZE[switchSize].width};
-      height: ${SIZE_TO_SWTICH_SIZE[switchSize].height};
-      padding: 0; // 기존 Mui padding 속성 override
-      .MuiSwitch-switchBase {
-        padding: 2px;
-        &.Mui-checked {
-          transform: translateX(${SIZE_TO_SWTICH_SIZE[switchSize].translateX});
-        }
-      }
-
-      .MuiSwitch-thumb {
-        box-shadow: none;
-        filter: drop-shadow(0px 2px 4px rgba(0, 35, 11, 0.2));
-        width: ${SIZE_TO_SWTICH_SIZE[switchSize].thumbSize};
-        height: ${SIZE_TO_SWTICH_SIZE[switchSize].thumbSize};
-        border-radius: 77px;
-        transition: color 0.3s ease;
-
-        color: ${theme.color.foreground.primary};
-      }
-
-      .MuiSwitch-track {
-        border-radius: 16px;
-        opacity: 1;
-        box-sizing: border-box;
-
-        background: none;
-        border: 1px solid ${theme.color.background.primary};
-      }
-
-      .Mui-disabled {
-        & + .MuiSwitch-track {
-          opacity: 1;
-          border-color: ${theme.color.background.primaryDisabled};
-        }
-
-        .MuiSwitch-thumb {
-          filter: none;
-          color: ${theme.color.foreground.primaryDisabled};
-        }
-      }
-
-      .Mui-checked {
-        & + .MuiSwitch-track {
-          opacity: 1;
-          border-color: ${theme.color.background.primary};
-          background-color: ${theme.color.background.primary};
-        }
-
-        .MuiSwitch-thumb {
-          color: ${theme.color.background.neutralBase};
-        }
-      }
-
-      .Mui-checked.Mui-disabled {
-        & + .MuiSwitch-track {
-          opacity: 1;
-          border-color: ${theme.color.background.primaryDisabled};
-          background-color: ${theme.color.background.primaryDisabled};
-        }
-
-        .MuiSwitch-thumb {
-          color: ${theme.color.background.neutralBaseDisabled};
-        }
-      }
-    }
+})(({ theme, switchSize }) => css `
+    // Specificity를 높이기 위해 최상위에 &.MuiSwitch-root를 추가
+    &.MuiSwitch-root {
+      width: ${SIZE_TO_SWTICH_SIZE[switchSize].width};
+      height: ${SIZE_TO_SWTICH_SIZE[switchSize].height};
+      padding: 0; // 기존 Mui padding 속성 override
+      .MuiSwitch-switchBase {
+        padding: 2px;
+        &.Mui-checked {
+          transform: translateX(${SIZE_TO_SWTICH_SIZE[switchSize].translateX});
+        }
+      }
+
+      .MuiSwitch-thumb {
+        box-shadow: none;
+        filter: drop-shadow(0px 2px 4px rgba(0, 35, 11, 0.2));
+        width: ${SIZE_TO_SWTICH_SIZE[switchSize].thumbSize};
+        height: ${SIZE_TO_SWTICH_SIZE[switchSize].thumbSize};
+        border-radius: 77px;
+        transition: color 0.3s ease;
+
+        color: ${theme.color.foreground.primary};
+      }
+
+      .MuiSwitch-track {
+        border-radius: 16px;
+        opacity: 1;
+        box-sizing: border-box;
+
+        background: none;
+        border: 1px solid ${theme.color.background.primary};
+      }
+
+      .Mui-disabled {
+        & + .MuiSwitch-track {
+          opacity: 1;
+          border-color: ${theme.color.background.primaryDisabled};
+        }
+
+        .MuiSwitch-thumb {
+          filter: none;
+          color: ${theme.color.foreground.primaryDisabled};
+        }
+      }
+
+      .Mui-checked {
+        & + .MuiSwitch-track {
+          opacity: 1;
+          border-color: ${theme.color.background.primary};
+          background-color: ${theme.color.background.primary};
+        }
+
+        .MuiSwitch-thumb {
+          color: ${theme.color.background.neutralBase};
+        }
+      }
+
+      .Mui-checked.Mui-disabled {
+        & + .MuiSwitch-track {
+          opacity: 1;
+          border-color: ${theme.color.background.primaryDisabled};
+          background-color: ${theme.color.background.primaryDisabled};
+        }
+
+        .MuiSwitch-thumb {
+          color: ${theme.color.background.neutralBaseDisabled};
+        }
+      }
+    }
   `);