@shoplflow/base 0.41.7 → 0.41.9

package/dist/index.cjs

@@ -1562,6 +1562,10 @@ var ChipButton = (_a) => {
 };
 exports.ChipButton = ChipButton;
 var getStyleByStyleVar = (styleVar, color, disabled) => {
+  const domain = exports.getDomain();
+  const secondaryBorderColor = domain === "hada" ? exports.colorTokens.hada150 : exports.colorTokens.neutral350;
+  const secondaryBackgroundColor = domain === "hada" ? exports.colorTokens.hada100 : exports.colorTokens.neutral0;
+  const secondaryHoverBackgroundColor = domain === "hada" ? exports.colorTokens.hada150 : exports.colorTokens.neutral100;
   switch (styleVar) {
     case "PRIMARY":
       return react$1.css`
@@ -1573,10 +1577,10 @@ var getStyleByStyleVar = (styleVar, color, disabled) => {
       `;
     case "SECONDARY":
       return react$1.css`
-        border: 1px solid ${exports.colorTokens.neutral350};
-        background-color: ${exports.colorTokens.neutral0};
+        border: 1px solid ${secondaryBorderColor};
+        background-color: ${secondaryBackgroundColor};
         :hover {
-          background-color: ${!disabled && exports.colorTokens.neutral100};
+          background-color: ${!disabled && secondaryHoverBackgroundColor};
         }
       `;
     case "SOLID":
@@ -2086,18 +2090,21 @@ var MinusButton = React3.forwardRef((_a, ref) => {
 MinusButton[MUNUS_BUTTON_SYMBOL_KEY] = true;
 exports.MinusButton = MinusButton;
 var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
+  const domain = exports.getDomain();
+  const primaryColor = domain === "hada" ? exports.colorTokens.neutral700 : exports.colorTokens.primary300;
+  const primaryHoverColor = domain === "hada" ? exports.colorTokens.neutral700 : exports.colorTokens.primary400;
   switch (styleVariant) {
     case "PRIMARY":
       if (isSelected) {
         return react$1.css`
-          background: ${exports.colorTokens.primary300};
-          border: 1.5px solid ${exports.colorTokens.primary300};
+          background: ${primaryColor};
+          border: 1.5px solid ${primaryColor};
           & > svg > path {
             fill: ${exports.colorTokens.neutral0};
           }
           ${isHovered && react$1.css`
-            border: 1.5px solid ${exports.colorTokens.primary400};
-            background: ${exports.colorTokens.primary400};
+            border: 1.5px solid ${primaryHoverColor};
+            background: ${primaryHoverColor};
           `}
         `;
       }
@@ -2818,6 +2825,9 @@ var StyledCallout = styled6__default.default.div`
   border-radius: ${exports.borderRadiusTokens.borderRadius08};
   ${({ styleVar }) => styleVar === "INFORMATION" && informationStyle}
   ${({ styleVar }) => styleVar === "ALERT" && alertStyle}
+  ${({ fillWidth }) => fillWidth && react$1.css`
+      width: 100%;
+    `}
 `;
 var StyledCalloutIcon = styled6__default.default.svg`
   display: flex;
@@ -2830,8 +2840,8 @@ styled6__default.default.div`
   padding: 2px 0;
 `;
 var Callout = (_a) => {
-  var _b = _a, { children, styleVar = "INFORMATION" } = _b, rest = __objRest(_b, ["children", "styleVar"]);
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledCallout, __spreadProps(__spreadValues({}, rest), { styleVar, "data-shoplflow": "Callout", children }));
+  var _b = _a, { children, styleVar = "INFORMATION", fillWidth } = _b, rest = __objRest(_b, ["children", "styleVar", "fillWidth"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledCallout, __spreadProps(__spreadValues({}, rest), { styleVar, "data-shoplflow": "Callout", fillWidth, children }));
 };
 var CalloutText = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);

package/dist/index.d.cts

@@ -730,13 +730,17 @@ declare const CalloutTypes: {
     readonly ALERT: "ALERT";
 };
 declare type CalloutType = $Values<typeof CalloutTypes>;
-interface CalloutProps extends CalloutOptionProps, ChildrenProps, StyleVariantProps<CalloutType> {
+interface CalloutProps extends CalloutOptionProps, ChildrenProps, StyleVariantProps<CalloutType>, HTMLAttributes<HTMLDivElement> {
 }
 interface CalloutOptionProps {
+    /**
+     * Callout 컴포넌트의 너비를 100%로 설정합니다.
+     */
+    fillWidth?: boolean;
 }
 
 declare const Callout: {
-    ({ children, styleVar, ...rest }: CalloutProps): react_jsx_runtime.JSX.Element;
+    ({ children, styleVar, fillWidth, ...rest }: CalloutProps): react_jsx_runtime.JSX.Element;
     Text: ({ children, ...rest }: TextProps) => react_jsx_runtime.JSX.Element;
     Icon: ({ iconSource }: IconSourceProps) => react_jsx_runtime.JSX.Element;
 };

package/dist/index.d.ts

@@ -730,13 +730,17 @@ declare const CalloutTypes: {
     readonly ALERT: "ALERT";
 };
 declare type CalloutType = $Values<typeof CalloutTypes>;
-interface CalloutProps extends CalloutOptionProps, ChildrenProps, StyleVariantProps<CalloutType> {
+interface CalloutProps extends CalloutOptionProps, ChildrenProps, StyleVariantProps<CalloutType>, HTMLAttributes<HTMLDivElement> {
 }
 interface CalloutOptionProps {
+    /**
+     * Callout 컴포넌트의 너비를 100%로 설정합니다.
+     */
+    fillWidth?: boolean;
 }
 
 declare const Callout: {
-    ({ children, styleVar, ...rest }: CalloutProps): react_jsx_runtime.JSX.Element;
+    ({ children, styleVar, fillWidth, ...rest }: CalloutProps): react_jsx_runtime.JSX.Element;
     Text: ({ children, ...rest }: TextProps) => react_jsx_runtime.JSX.Element;
     Icon: ({ iconSource }: IconSourceProps) => react_jsx_runtime.JSX.Element;
 };

package/dist/index.js

@@ -1535,6 +1535,10 @@ var ChipButton = (_a) => {
 };
 var ChipButton_default = ChipButton;
 var getStyleByStyleVar = (styleVar, color, disabled) => {
+  const domain = getDomain();
+  const secondaryBorderColor = domain === "hada" ? colorTokens.hada150 : colorTokens.neutral350;
+  const secondaryBackgroundColor = domain === "hada" ? colorTokens.hada100 : colorTokens.neutral0;
+  const secondaryHoverBackgroundColor = domain === "hada" ? colorTokens.hada150 : colorTokens.neutral100;
   switch (styleVar) {
     case "PRIMARY":
       return css`
@@ -1546,10 +1550,10 @@ var getStyleByStyleVar = (styleVar, color, disabled) => {
       `;
     case "SECONDARY":
       return css`
-        border: 1px solid ${colorTokens.neutral350};
-        background-color: ${colorTokens.neutral0};
+        border: 1px solid ${secondaryBorderColor};
+        background-color: ${secondaryBackgroundColor};
         :hover {
-          background-color: ${!disabled && colorTokens.neutral100};
+          background-color: ${!disabled && secondaryHoverBackgroundColor};
         }
       `;
     case "SOLID":
@@ -2059,18 +2063,21 @@ var MinusButton = forwardRef((_a, ref) => {
 MinusButton[MUNUS_BUTTON_SYMBOL_KEY] = true;
 var MinusButton_default = MinusButton;
 var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
+  const domain = getDomain();
+  const primaryColor = domain === "hada" ? colorTokens.neutral700 : colorTokens.primary300;
+  const primaryHoverColor = domain === "hada" ? colorTokens.neutral700 : colorTokens.primary400;
   switch (styleVariant) {
     case "PRIMARY":
       if (isSelected) {
         return css`
-          background: ${colorTokens.primary300};
-          border: 1.5px solid ${colorTokens.primary300};
+          background: ${primaryColor};
+          border: 1.5px solid ${primaryColor};
           & > svg > path {
             fill: ${colorTokens.neutral0};
           }
           ${isHovered && css`
-            border: 1.5px solid ${colorTokens.primary400};
-            background: ${colorTokens.primary400};
+            border: 1.5px solid ${primaryHoverColor};
+            background: ${primaryHoverColor};
           `}
         `;
       }
@@ -2791,6 +2798,9 @@ var StyledCallout = styled6.div`
   border-radius: ${borderRadiusTokens.borderRadius08};
   ${({ styleVar }) => styleVar === "INFORMATION" && informationStyle}
   ${({ styleVar }) => styleVar === "ALERT" && alertStyle}
+  ${({ fillWidth }) => fillWidth && css`
+      width: 100%;
+    `}
 `;
 var StyledCalloutIcon = styled6.svg`
   display: flex;
@@ -2803,8 +2813,8 @@ styled6.div`
   padding: 2px 0;
 `;
 var Callout = (_a) => {
-  var _b = _a, { children, styleVar = "INFORMATION" } = _b, rest = __objRest(_b, ["children", "styleVar"]);
-  return /* @__PURE__ */ jsx(StyledCallout, __spreadProps(__spreadValues({}, rest), { styleVar, "data-shoplflow": "Callout", children }));
+  var _b = _a, { children, styleVar = "INFORMATION", fillWidth } = _b, rest = __objRest(_b, ["children", "styleVar", "fillWidth"]);
+  return /* @__PURE__ */ jsx(StyledCallout, __spreadProps(__spreadValues({}, rest), { styleVar, "data-shoplflow": "Callout", fillWidth, children }));
 };
 var CalloutText = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.41.7",
+  "version": "0.41.9",
   "type": "module",
   "license": "Apache-2.0",
   "main": "dist/index.js",