@team-monolith/cds 1.123.1 → 1.124.0

package/dist/components/Banner.js

@@ -14,6 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { css, useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { CloseFillIcon } from "../icons";
 import { SquareButton } from "./SquareButton";
 import { Button } from "./Button";
@@ -60,6 +61,7 @@ export const Banner = React.forwardRef(function Banner(props, ref) {
     var _a;
     const { className, component: Component = "div", headline, content, icon, color, buttonLabel, onButtonClick, buttonProps, close, onClose, fullWidth } = props, other = __rest(props, ["className", "component", "headline", "content", "icon", "color", "buttonLabel", "onButtonClick", "buttonProps", "close", "onClose", "fullWidth"]);
     const theme = useTheme();
+    const { t } = useTranslation();
     return (_jsxs(Component, Object.assign({}, other, { ref: ref, className: [bannerClasses.root, className].filter(Boolean).join(" "), css: [
             css `
           display: flex;
@@ -90,7 +92,7 @@ export const Banner = React.forwardRef(function Banner(props, ref) {
                 // component 속성이 없는 경우 제네릭 인자로 전달되는 타입을 확인하지 못하므로 component 속성 명시
                 component: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.component) !== null && _a !== void 0 ? _a : "button" }))), close && (_jsx(SquareButton, { className: bannerClasses.closeSquareButton, css: css `
             color: ${COLOR_PALETTE(theme, color).content};
-          `, color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose, "aria-label": "\uB2EB\uAE30" }))] })));
+          `, color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose, "aria-label": t("닫기", { context: "배너" }) }))] })));
 });
 const Icon = styled.div `
   display: flex;

package/dist/components/Button.js

@@ -145,8 +145,7 @@ const COLOR_TO_BUTTON_STYLE = (theme, color, disabled) => ({
 const SIZE_TO_BUTTON_STYLE = {
     large: css `
     min-width: 100px;
-    height: 56px;
-    padding: 0 20px;
+    padding: 16px 20px;
     gap: 10px;
     border-radius: 12px;
 
@@ -157,8 +156,7 @@ const SIZE_TO_BUTTON_STYLE = {
   `,
     medium: css `
     min-width: 82px;
-    height: 48px;
-    padding: 0 16px;
+    padding: 14px 16px;
     gap: 8px;
     border-radius: 10px;
 
@@ -169,8 +167,7 @@ const SIZE_TO_BUTTON_STYLE = {
   `,
     small: css `
     min-width: 64px;
-    height: 36px;
-    padding: 0 12px;
+    padding: 10px 12px;
     gap: 8px;
     border-radius: 8px;
 
@@ -181,8 +178,7 @@ const SIZE_TO_BUTTON_STYLE = {
   `,
     xsmall: css `
     min-width: 52px;
-    height: 28px;
-    padding: 0 8px;
+    padding: 6px 8px;
     gap: 4px;
     border-radius: 6px;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.123.1",
+  "version": "1.124.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,