@team-monolith/cds 1.124.0 → 1.125.0

package/dist/components/SquareButton.js

@@ -20,128 +20,128 @@ export const squareButtonClasses = {
 };
 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;
+    }
   `,
 };
 /**
@@ -153,17 +153,17 @@ export const SquareButton = React.forwardRef(function SquareButton(props, ref) {
     return (_jsx(Component, Object.assign({ type: Component === "button" || Component === "input" ? "button" : undefined }, other, { ref: ref, className: [squareButtonClasses.root, className]
             .filter(Boolean)
             .join(" "), 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

@@ -41,73 +41,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};
+        }
+      }
+    }
   `);

package/dist/components/SwitchButton.js

@@ -20,111 +20,111 @@ export const switchButtonClasses = {
     content: "SwitchButton-content",
 };
 const COLOR_TO_SWITCH_BUTTON_STYLE = (theme, color, isOn) => ({
-    grey: css `
+    grey: css `
       ${isOn
-        ? css `
-            background: ${theme.color.background.neutralAltActive};
-            span {
-              opacity: 1;
-              font-weight: 700;
-            }
-            svg {
-              opacity: 1;
-            }
+        ? css `
+            background: ${theme.color.background.neutralAltActive};
+            span {
+              opacity: 1;
+              font-weight: 700;
+            }
+            svg {
+              opacity: 1;
+            }
           `
-        : css `
-            background: ${theme.color.background.neutralAlt};
-            span,
-            svg {
-              opacity: 0.6;
-            }
-            ${HOVER(css `
-              span,
-              svg {
-                opacity: 1;
-              }
-            `)}
-          `}
+        : css `
+            background: ${theme.color.background.neutralAlt};
+            span,
+            svg {
+              opacity: 0.6;
+            }
+            ${HOVER(css `
+              span,
+              svg {
+                opacity: 1;
+              }
+            `)}
+          `}
     `,
-    white: css `
+    white: css `
       ${isOn
-        ? css `
-            background: ${theme.color.background.neutralAlt};
-            span {
-              opacity: 1;
-              font-weight: 700;
-            }
-            svg {
-              opacity: 1;
-            }
+        ? css `
+            background: ${theme.color.background.neutralAlt};
+            span {
+              opacity: 1;
+              font-weight: 700;
+            }
+            svg {
+              opacity: 1;
+            }
           `
-        : css `
-            background: ${theme.color.background.neutralBase};
-            span,
-            svg {
-              opacity: 0.6;
-            }
-            ${HOVER(css `
-              span,
-              svg {
-                opacity: 1;
-              }
-            `)}
-          `}
+        : css `
+            background: ${theme.color.background.neutralBase};
+            span,
+            svg {
+              opacity: 0.6;
+            }
+            ${HOVER(css `
+              span,
+              svg {
+                opacity: 1;
+              }
+            `)}
+          `}
     `,
-    none: css `
+    none: css `
       ${isOn
-        ? css `
-            background: ${theme.color.blanket.neutralLight};
-            span {
-              opacity: 1;
-              font-weight: 700;
-            }
-            svg {
-              opacity: 1;
-            }
+        ? css `
+            background: ${theme.color.blanket.neutralLight};
+            span {
+              opacity: 1;
+              font-weight: 700;
+            }
+            svg {
+              opacity: 1;
+            }
           `
-        : css `
-            background: none;
-            span,
-            svg {
-              opacity: 0.6;
-            }
-            ${HOVER(css `
-              span,
-              svg {
-                opacity: 1;
-              }
-            `)}
-          `}
+        : css `
+            background: none;
+            span,
+            svg {
+              opacity: 0.6;
+            }
+            ${HOVER(css `
+              span,
+              svg {
+                opacity: 1;
+              }
+            `)}
+          `}
     `,
 })[color];
 const SIZE_TO_SWITCH_BUTTON_STYLE = (size) => ({
-    medium: css `
-      padding: 8px 12px;
-      gap: 8px;
-      height: 40px;
-      svg {
-        width: 24px;
-        height: 24px;
-      }
-      span {
-        font-size: 16px;
-        line-height: 20px;
-      }
+    medium: css `
+      padding: 8px 12px;
+      gap: 8px;
+      height: 40px;
+      svg {
+        width: 24px;
+        height: 24px;
+      }
+      span {
+        font-size: 16px;
+        line-height: 20px;
+      }
     `,
-    xsmall: css `
-      padding: 4px 6px;
-      gap: 4px;
-      height: 24px;
-      svg {
-        width: 16px;
-        height: 16px;
-      }
-      span {
-        font-size: 12px;
-        line-height: 16px;
-      }
+    xsmall: css `
+      padding: 4px 6px;
+      gap: 4px;
+      height: 24px;
+      svg {
+        width: 16px;
+        height: 16px;
+      }
+      span {
+        font-size: 12px;
+        line-height: 16px;
+      }
     `,
 })[size];
 /**
@@ -136,23 +136,23 @@ export const SwitchButton = React.forwardRef(function SwitchButton(props, ref) {
     return (_jsxs(Component, Object.assign({ type: "button" }, other, { className: [switchButtonClasses.root, className]
             .filter(Boolean)
             .join(" "), ref: ref, css: [
-            css `
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: fit-content;
-            cursor: pointer;
-            border: none;
-            border-radius: 99px;
-            text-decoration: none;
+            css `
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: fit-content;
+            cursor: pointer;
+            border: none;
+            border-radius: 99px;
+            text-decoration: none;
           `,
             COLOR_TO_SWITCH_BUTTON_STYLE(theme, color, isOn),
             SIZE_TO_SWITCH_BUTTON_STYLE(size),
         ], onClick: onClick, children: [isOn ? onIcon : offIcon, content && (_jsx(Content, { className: switchButtonClasses.content, children: content }))] })));
 });
-const Content = styled.span(({ theme }) => css `
-    color: ${theme.color.foreground.neutralBase};
-    /* Default/Label/16px-Md */
-    font-family: ${theme.fontFamily.ui};
-    font-weight: 500;
+const Content = styled.span(({ theme }) => css `
+    color: ${theme.color.foreground.neutralBase};
+    /* Default/Label/16px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-weight: 500;
   `);