@shoplflow/base 0.13.6 → 0.13.8

package/dist/index.cjs

@@ -1110,7 +1110,7 @@ var ChipButton = (_a) => {
   );
 };
 exports.ChipButton = ChipButton;
-var getStyleByStyleVar = (styleVar, disabled) => {
+var getStyleByStyleVar = (styleVar, color, disabled) => {
   switch (styleVar) {
     case "PRIMARY":
       return react.css`
@@ -1129,11 +1129,14 @@ var getStyleByStyleVar = (styleVar, disabled) => {
         }
       `;
     case "SOLID":
+      if (!color) {
+        throw new Error("Button\uC758 SOLID \uC18D\uC131\uC740 color\uB97C \uD544\uC218\uB85C \uBC1B\uC2B5\uB2C8\uB2E4.");
+      }
       return react.css`
-        border: 1px solid ${exports.colorTokens.coolgray100};
-        background-color: ${exports.colorTokens.coolgray50};
+        border: 1px solid ${exports.colorTokens[getNextColor(color)]};
+        background-color: ${exports.colorTokens[color]};
         :hover {
-          background-color: ${!disabled && exports.colorTokens.coolgray100};
+          background-color: ${exports.colorTokens[getNextColor(color)]};
         }
       `;
     case "GHOST":
@@ -1180,7 +1183,7 @@ var StyledButton = styled5__default.default.button`
   padding: 0 12px;
   border-radius: 6px;
   cursor: pointer;
-  ${({ styleVar, disabled }) => getStyleByStyleVar(styleVar, disabled)};
+  ${({ styleVar, color, disabled }) => getStyleByStyleVar(styleVar, color, disabled)};
   ${({ sizeVar }) => getStyleBySizeVar2(sizeVar)};
   ${({ disabled }) => getDisabledStyle(disabled)};
 `;
@@ -1273,27 +1276,47 @@ var getWidthAndHeightFromSizeVar = (sizeVar) => {
       `;
   }
 };
-var getStyleByStyleVar2 = (styleVar) => {
+var getStyleByStyleVar2 = (styleVar, color) => {
   switch (styleVar) {
+    case "PRIMARY":
+      return react.css`
+        background: ${exports.colorTokens.primary300};
+        border: 1px solid ${exports.colorTokens.primary400};
+        &:hover {
+          background: ${exports.colorTokens.primary400};
+        }
+      `;
+    case "SECONDARY":
+      return react.css`
+        background: ${exports.colorTokens.neutral0};
+        border: 1px solid ${exports.colorTokens.neutral350};
+        &:hover {
+          background: ${exports.colorTokens.neutral100};
+        }
+      `;
     case "SOLID":
+      if (!color) {
+        throw new Error("IconButton\uC758 SOLID \uC18D\uC131\uC740 color\uB97C \uD544\uC218\uB85C \uBC1B\uC2B5\uB2C8\uB2E4.");
+      }
       return react.css`
-        border: 1px solid ${exports.colorTokens.neutral200};
+        border: 1px solid ${exports.colorTokens[getNextColor(color)]};
+        background: ${exports.colorTokens[color]};
         &:hover {
-          background-color: ${exports.colorTokens.neutral100};
+          background: ${exports.colorTokens[getNextColor(color)]};
         }
       `;
     case "GHOST":
       return react.css`
         border: 1px solid transparent;
         &:hover {
-          background-color: ${exports.colorTokens.neutral400_5};
+          background: ${exports.colorTokens.neutral400_5};
         }
       `;
     default:
       return react.css`
         border: 1px solid ${exports.colorTokens.neutral200};
         &:hover {
-          background-color: ${exports.colorTokens.neutral100};
+          background: ${exports.colorTokens.neutral100};
         }
       `;
   }
@@ -1304,9 +1327,9 @@ var StyledIconButton = styled5__default.default.button`
   border-radius: ${exports.borderRadiusTokens.borderRadius06};
   justify-content: center;
   align-items: center;
-  background-color: ${exports.colorTokens.neutral0};
+  background: ${exports.colorTokens.neutral0};
   cursor: pointer;
-  ${({ styleVar }) => getStyleByStyleVar2(styleVar)};
+  ${({ styleVar, color }) => getStyleByStyleVar2(styleVar, color)};
   ${({ sizeVar }) => getWidthAndHeightFromSizeVar(sizeVar)};
   ${({ disabled }) => getDisabledStyle(disabled)};
   & > svg {
@@ -1314,62 +1337,20 @@ var StyledIconButton = styled5__default.default.button`
     height: 20px;
   }
 `;
-
-// src/components/Icon/Icon.types.ts
-exports.IconSizeVariants = {
-  XS: "XS",
-  S: "S",
-  M: "M",
-  L: "L",
-  XL: "XL"
-};
-
-// src/components/Icon/Icon.styled.ts
-var getIconSize = (size) => {
-  switch (size) {
-    case exports.IconSizeVariants.XS:
-      return "12px";
-    case exports.IconSizeVariants.S:
-      return "20px";
-    case exports.IconSizeVariants.M:
-      return "24px";
-    case exports.IconSizeVariants.L:
-      return "30px";
-    case exports.IconSizeVariants.XL:
-      return "36px";
-    default:
-      return "24px";
-  }
-};
-exports.StyledIcon = styled5__default.default.svg`
-  width: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
-  min-width: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
-  height: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
-  min-height: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
-
-  & > path {
-    fill: ${({ color }) => color && exports.colorTokens[color]};
-  }
-`;
-var Icon = React3.forwardRef((_a, ref) => {
-  var _b = _a, { iconSource } = _b, rest = __objRest(_b, ["iconSource"]);
-  return /* @__PURE__ */ jsxRuntime.jsx(exports.StyledIcon, __spreadProps(__spreadValues({ as: iconSource, ref }, rest), { "data-shoplflow": "Icon" }));
-});
-exports.Icon = Icon;
 var IconButton = React3.forwardRef(
   (_a, ref) => {
-    var _b = _a, { styleVar, sizeVar, disabled, as, iconSource, color, iconSize } = _b, rest = __objRest(_b, ["styleVar", "sizeVar", "disabled", "as", "iconSource", "color", "iconSize"]);
+    var _b = _a, { styleVar, sizeVar, disabled, children, color } = _b, rest = __objRest(_b, ["styleVar", "sizeVar", "disabled", "children", "color"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       StyledIconButton,
       __spreadProps(__spreadValues({
         styleVar,
         sizeVar,
         disabled,
-        as,
+        color,
         ref
       }, rest), {
         "data-shoplflow": "IconButton",
-        children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource, color, sizeVar: iconSize })
+        children
       })
     );
   }
@@ -1382,6 +1363,8 @@ exports.iconButtonSizeVar = {
   M: "M"
 };
 exports.iconButtonStyleVar = {
+  PRIMARY: "PRIMARY",
+  SECONDARY: "SECONDARY",
   SOLID: "SOLID",
   GHOST: "GHOST"
 };
@@ -1670,6 +1653,48 @@ var InputWrapper = styled5__default.default.label`
   overflow: hidden;
   ${({ disabled }) => getDisabledStyle(disabled)};
 `;
+
+// src/components/Icon/Icon.types.ts
+exports.IconSizeVariants = {
+  XS: "XS",
+  S: "S",
+  M: "M",
+  L: "L",
+  XL: "XL"
+};
+
+// src/components/Icon/Icon.styled.ts
+var getIconSize = (size) => {
+  switch (size) {
+    case exports.IconSizeVariants.XS:
+      return "12px";
+    case exports.IconSizeVariants.S:
+      return "20px";
+    case exports.IconSizeVariants.M:
+      return "24px";
+    case exports.IconSizeVariants.L:
+      return "30px";
+    case exports.IconSizeVariants.XL:
+      return "36px";
+    default:
+      return "24px";
+  }
+};
+exports.StyledIcon = styled5__default.default.svg`
+  width: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
+  min-width: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
+  height: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
+  min-height: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
+
+  & > path {
+    fill: ${({ color }) => color && exports.colorTokens[color]};
+  }
+`;
+var Icon = React3.forwardRef((_a, ref) => {
+  var _b = _a, { iconSource } = _b, rest = __objRest(_b, ["iconSource"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(exports.StyledIcon, __spreadProps(__spreadValues({ as: iconSource, ref }, rest), { "data-shoplflow": "Icon" }));
+});
+exports.Icon = Icon;
 var DropdownButton = React3.forwardRef(
   (_a, ref) => {
     var _b = _a, { width, onClick, sizeVar = "M", placeholder, value, disabled, leftSource } = _b, rest = __objRest(_b, ["width", "onClick", "sizeVar", "placeholder", "value", "disabled", "leftSource"]);
@@ -1968,26 +1993,14 @@ var Input = React3.forwardRef(
           ),
           /* @__PURE__ */ jsxRuntime.jsxs(RightElementWrapper, { children: [
             maxLength && isFocused && /* @__PURE__ */ jsxRuntime.jsx(TextCounter_default, { currentLength: String(text).length, maxLength }),
-            isFocused && Boolean(String(text).length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
-              exports.IconButton,
-              {
-                sizeVar: "S",
-                onClick: handleOnClear,
-                styleVar: "GHOST",
-                iconSource: assetFunction("DeleteIcon"),
-                color: "neutral600"
-              }
-            ),
-            initialType === "password" && /* @__PURE__ */ jsxRuntime.jsx(
-              exports.IconButton,
+            isFocused && Boolean(String(text).length > 0) && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", onClick: handleOnClear, styleVar: "GHOST", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: assetFunction("DeleteIcon"), color: "neutral600" }) }),
+            initialType === "password" && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", onClick: handleTogglePasswordType, styleVar: "GHOST", children: /* @__PURE__ */ jsxRuntime.jsx(
+              exports.Icon,
               {
-                sizeVar: "S",
-                onClick: handleTogglePasswordType,
-                styleVar: "GHOST",
                 color: "neutral600",
                 iconSource: assetFunction(type === "password" ? "ViewOffIcon" : "ViewOnIcon")
               }
-            )
+            ) })
           ] })
         ]
       }
@@ -2001,6 +2014,7 @@ exports.StyledInputButton = styled5__default.default.button`
   align-items: center;
   justify-content: space-between;
   width: 100%;
+  background: ${exports.colorTokens.neutral0};
   gap: 4px;
   padding: 4px 4px 4px 12px;
   cursor: pointer;
@@ -2086,17 +2100,7 @@ var InputButton = React3.forwardRef(
         children: /* @__PURE__ */ jsxRuntime.jsxs(exports.StyledInputButton, __spreadProps(__spreadValues({}, rest), { onClick: handleOnClick, disabled, ref, children: [
           text && text.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", color: "neutral700", textOverflow: "ellipsis", lineClamp: 1, children: text }) : /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", color: "neutral350", textOverflow: "ellipsis", lineClamp: 1, children: placeholder }),
           /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Horizontal, { align: "center", children: [
-            value && /* @__PURE__ */ jsxRuntime.jsx(
-              exports.IconButton,
-              {
-                sizeVar: "S",
-                onClick: handleOnClear,
-                styleVar: "GHOST",
-                iconSource: assetFunction("DeleteIcon"),
-                color: "neutral600",
-                disabled
-              }
-            ),
+            value && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", onClick: handleOnClear, styleVar: "GHOST", disabled, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: assetFunction("DeleteIcon"), color: "neutral600" }) }),
             rightSource
           ] })
         ] }))