@team-monolith/cds 1.3.2 → 1.3.3

package/dist/patterns/SegmentedControl/SegmentedControlButton.js

@@ -11,6 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
+import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import React, { useContext } from "react";
 import { SegmentedControlGroupPropsContext } from "./SegmentedControlGroupPropsContext";
@@ -29,10 +30,22 @@ export const SegmentedControlButton = React.forwardRef(function SegmentedControl
     const isActive = context.multiSelect
         ? context.value.includes(props.value)
         : context.value === props.value;
-    return (_jsx(Button, Object.assign({ css: css `
-          display: flex;
-          justify-content: center;
-          flex-grow: 1;
-          ${isActive && `box-shadow: ${shadows.shadow04};`}
-        ` }, other, { ref: ref, color: isActive ? "white" : "textNeutral", size: context.size, onClick: handleClick })));
+    return (_jsx(StyledButton, Object.assign({}, other, { ref: ref, isActive: isActive, color: isActive ? "white" : "textNeutral", size: context.size, onClick: handleClick })));
 });
+const StyledButton = styled(Button, {
+    shouldForwardProp: (prop) => prop !== "isActive",
+})(({ theme, isActive }) => css `
+    display: flex;
+    justify-content: center;
+    flex-grow: 1;
+    ${isActive &&
+    `
+      box-shadow: ${shadows.shadow04};
+      svg {
+        color: ${theme.color.foreground.primary};
+      }
+      span {
+        font-weight: 700;
+      }
+    `}
+  `);

package/dist/patterns/SegmentedControl/SegmentedControlSquareButton.d.ts

@@ -1,5 +1,5 @@
-import { SquareButtonProps } from "../..";
 import React from "react";
+import { SquareButtonProps } from "../..";
 export interface SegmentedControlSquareButtonProps extends Omit<SquareButtonProps, "color" | "size"> {
     value: string;
 }

package/dist/patterns/SegmentedControl/SegmentedControlSquareButton.js

@@ -1,33 +1,51 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import styled from "@emotion/styled";
-import { useContext } from "react";
+import { css } from "@emotion/react";
+import React, { useContext } from "react";
 import { shadows, SquareButton } from "../..";
 import { SegmentedControlGroupPropsContext } from "./SegmentedControlGroupPropsContext";
-import React from "react";
 /**
  * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?node-id=181%3A89883)
  */
 export const SegmentedControlSquareButton = React.forwardRef(function SegmentedControlSquareButton(props, ref) {
+    const { onClick } = props, other = __rest(props, ["onClick"]);
     const context = useContext(SegmentedControlGroupPropsContext);
+    const handleClick = () => {
+        var _a;
+        (_a = context.onClick) === null || _a === void 0 ? void 0 : _a.call(context, props.value);
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
     const isActive = context.multiSelect
         ? context.value.includes(props.value)
         : context.value === props.value;
-    return (_jsx(StyledSquareButton, Object.assign({}, props, { ref: ref, isActive: isActive, color: isActive ? "primary" : "icon", size: context.size, fullWidth: context.fullWidth, onClick: () => {
-            var _a;
-            if (context.onClick) {
-                context.onClick(props.value);
-                (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
-            }
-        } })));
+    return (_jsx(StyledSquareButton, Object.assign({}, other, { ref: ref, isActive: isActive, color: isActive ? "white" : "icon", size: context.size, fullWidth: context.fullWidth, onClick: handleClick })));
 });
 const StyledSquareButton = styled(SquareButton, {
     shouldForwardProp: (prop) => prop !== "isActive",
-}) `
-  display: flex;
-  justify-content: center;
-  flex-grow: 1;
-  button {
-    ${({ isActive }) => isActive && `box-shadow: ${shadows.shadow04};`}
-  }
-`;
+})(({ theme, isActive }) => css `
+    display: flex;
+    justify-content: center;
+    flex-grow: 1;
+    ${isActive &&
+    `
+      box-shadow: ${shadows.shadow04};
+      svg {
+        color: ${theme.color.foreground.primary};
+      }
+      span {
+        font-weight: 700;
+      }
+    `}
+  `);

package/package.json

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