@team-monolith/cds 1.124.0 → 1.125.1

package/dist/components/Button.js

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

package/dist/icons/custom/colored/Microsoft.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare const CustomMicrosoftIcon: React.ForwardRefExoticComponent<{
+    className?: string;
+} & React.RefAttributes<SVGSVGElement>>;
+export declare const customMicrosoftSvg: string;

package/dist/icons/custom/colored/Microsoft.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import svgImport from "./microsoft.svg";
+export const CustomMicrosoftIcon = forwardRef(function CustomMicrosoftIcon(props, ref) {
+    return (_jsxs("svg", Object.assign({ width: 24, height: 24, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ref: ref }, props, { children: [_jsx("path", { d: "M0 0H7.54294V7.54294H0V0Z", fill: "#F35325" }), _jsx("path", { d: "M0 8.29039H7.54294V15.8333H0V8.29039Z", fill: "#05A6F0" }), _jsx("path", { d: "M8.29039 0H15.8333V7.54294H8.29039V0Z", fill: "#81BC06" }), _jsx("path", { d: "M8.29039 8.29039H15.8333V15.8333H8.29039V8.29039Z", fill: "#FFBA08" })] })));
+});
+export const customMicrosoftSvg = svgImport;

package/dist/icons/custom/colored/index.d.ts

@@ -47,6 +47,7 @@ export * from "./Material";
 export * from "./MedalBronze";
 export * from "./MedalGold";
 export * from "./MedalSilver";
+export * from "./Microsoft";
 export * from "./Pro";
 export * from "./Problem";
 export * from "./PythonColor";

package/dist/icons/custom/colored/index.js

@@ -47,6 +47,7 @@ export * from "./Material";
 export * from "./MedalBronze";
 export * from "./MedalGold";
 export * from "./MedalSilver";
+export * from "./Microsoft";
 export * from "./Pro";
 export * from "./Problem";
 export * from "./PythonColor";

package/dist/icons/custom/colored/microsoft.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0H7.54294V7.54294H0V0Z" fill="#F35325"/>
+<path d="M0 8.29039H7.54294V15.8333H0V8.29039Z" fill="#05A6F0"/>
+<path d="M8.29039 0H15.8333V7.54294H8.29039V0Z" fill="#81BC06"/>
+<path d="M8.29039 8.29039H15.8333V15.8333H8.29039V8.29039Z" fill="#FFBA08"/>
+</svg>

package/dist/patterns/Dropdown/DropdownItem/DropdownItem.js

@@ -19,10 +19,15 @@ import { useContext, useId, useRef } from "react";
 import { DropdownMenu } from "../DropdownMenu";
 import { DropdownContext } from "../DropdownContext";
 import { getSelected, setSelected } from "./selected";
-const TYPE_TO_COLOR = (theme, type) => ({
-    default: theme.color.foreground.neutralBase,
-    danger: theme.color.foreground.danger,
-})[type];
+const TYPE_TO_COLOR = (theme, type, disabled) => disabled
+    ? {
+        default: theme.color.foreground.neutralBaseDisabled,
+        danger: theme.color.foreground.dangerDisabled,
+    }[type]
+    : {
+        default: theme.color.foreground.neutralBase,
+        danger: theme.color.foreground.danger,
+    }[type];
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=106-1900&t=FwczLZ1IVvskUVbT-0)
  */
@@ -62,16 +67,16 @@ const DropdownItem = React.forwardRef(function DropdownItem(props, ref) {
                 }
                 : {}), { children: _jsxs(Item, { ref: itemRef, disabled: disabled, selected: isSubMenuShowed || Boolean(active), children: [_jsxs(LeftWrapper, { children: [checkbox && (_jsx(StyledCheckboxInput, Object.assign({}, checkboxProps, { disabled: disabled, onClick: (e) => {
                                         e.stopPropagation();
-                                    } }))), startIcon && (_jsx(IconDiv, { type: type, preserveIconColor: preserveIconColor, children: startIcon })), _jsx(OverflowTooltip, { childrenCss: css `
+                                    } }))), startIcon && (_jsx(IconDiv, { type: type, preserveIconColor: preserveIconColor, disabled: Boolean(disabled), children: startIcon })), _jsx(OverflowTooltip, { childrenCss: css `
                 flex: 1;
                 min-width: 0;
                 overflow: hidden;
                 font-size: 14px;
                 font-weight: 400;
                 font-family: ${theme.fontFamily.ui};
-                color: ${TYPE_TO_COLOR(theme, type)};
+                color: ${TYPE_TO_COLOR(theme, type, Boolean(disabled))};
                 ${labelCss}
-              `, text: label })] }), endIcon && (_jsx(IconDiv, { type: type, preserveIconColor: preserveIconColor, children: endIcon })), !endIcon && isSubMenuExist && (_jsx(IconDiv, { type: type, preserveIconColor: preserveIconColor, children: _jsx(ArrowRightSLineIcon, {}) }))] }) })), isSubMenuExist && (_jsx(DropdownContext.Provider, { value: {
+              `, text: label })] }), endIcon && (_jsx(IconDiv, { type: type, preserveIconColor: preserveIconColor, disabled: false, children: endIcon })), !endIcon && isSubMenuExist && (_jsx(IconDiv, { type: type, preserveIconColor: preserveIconColor, disabled: false, children: _jsx(ArrowRightSLineIcon, {}) }))] }) })), isSubMenuExist && (_jsx(DropdownContext.Provider, { value: {
                     open,
                     onCloseOnItemClick,
                     nestedIndex: absItemIndex,
@@ -86,8 +91,8 @@ const StyledCheckboxInput = styled(CheckboxInput) `
   margin: 4px;
 `;
 const IconDiv = styled("div", {
-    shouldForwardProp: (prop) => prop !== "preserveIconColor",
-})(({ theme, type, preserveIconColor }) => css `
+    shouldForwardProp: (prop) => prop !== "preserveIconColor" && prop !== "disabled",
+})(({ theme, type, preserveIconColor, disabled }) => css `
     width: 14px;
     height: 14px;
     svg {
@@ -97,7 +102,7 @@ const IconDiv = styled("div", {
       ${!preserveIconColor &&
     css `
         path {
-          fill: ${TYPE_TO_COLOR(theme, type)};
+          fill: ${TYPE_TO_COLOR(theme, type, disabled)};
         }
       `}
     }
@@ -133,8 +138,6 @@ const Item = styled.div(({ theme, selected, disabled }) => css `
     ${disabled &&
     css `
       cursor: auto;
-      // mui MenuItem-disabled의 opacity: 0.38을 참고하여 적용합니다.
-      opacity: 0.38;
       background-color: ${theme.color.background.neutralBase};
     `}
   `);

package/package.json

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