@team-monolith/cds 1.125.0 → 1.126.0

package/dist/components/Button.js

@@ -21,236 +21,236 @@ export const buttonClasses = {
     label: "Button-label",
 };
 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;
   `,
 };
 /**
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=20-173&t=cXcCv3QijbX7MkoC-0)
  */
 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 { className, component: Component = "button", disabled, color, size, startIcon, endIcon, label, fullWidth, loading = false } = props, other = __rest(props, ["className", "component", "disabled", "color", "size", "startIcon", "endIcon", "label", "fullWidth", "loading"]);
     const theme = useTheme();
     return (_jsxs(Component, Object.assign({ type: Component === "button" || Component === "input" ? "button" : undefined }, other, { className: [buttonClasses.root, className].filter(Boolean).join(" "), 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, { className: buttonClasses.label, size: size, bold: bold, children: label })), endIcon] })));
+        ], disabled: disabled || loading, children: [loading ? _jsx(Spinner, {}) : startIcon, label && (_jsx(Label, { className: buttonClasses.label, size: size, 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: 700;
+  white-space: nowrap;
+  ${({ size }) => SIZE_TO_LABEL_STYLE[size]}
 `;