@shoplflow/base 0.31.20 → 0.32.0

package/dist/index.cjs

@@ -1745,7 +1745,8 @@ var IconButton = React3.forwardRef(
       color,
       onMouseEnter,
       onMouseLeave,
-      isLoading = false
+      isLoading = false,
+      type = "button"
     } = _b, rest = __objRest(_b, [
       "styleVar",
       "sizeVar",
@@ -1754,7 +1755,8 @@ var IconButton = React3.forwardRef(
       "color",
       "onMouseEnter",
       "onMouseLeave",
-      "isLoading"
+      "isLoading",
+      "type"
     ]);
     const [isHovered, setIsHovered] = React3.useState(false);
     const handleOnMouseEnter = (e) => {
@@ -1775,7 +1777,8 @@ var IconButton = React3.forwardRef(
         ref,
         onMouseEnter: handleOnMouseEnter,
         onMouseLeave: handleOnMouseLeave,
-        isHovered
+        isHovered,
+        type
       }, rest), {
         "data-shoplflow": "IconButton",
         children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner_default, { color: styleVar === "SECONDARY" || styleVar === "GHOST" ? "neutral500" : "neutral0" }) : children
@@ -2796,7 +2799,7 @@ var getRadiusBySize = (size2) => {
       `;
   }
 };
-var getColorsByStyleVariant = (styleVariant, color = "neutral700") => {
+var getColorsByStyleVariant = (styleVariant, color = "neutral700", background2) => {
   switch (styleVariant) {
     case "SOLID":
       return react$1.css`
@@ -2805,7 +2808,7 @@ var getColorsByStyleVariant = (styleVariant, color = "neutral700") => {
       `;
     case "TINT":
       return react$1.css`
-        background: ${exports.colorTokens[getNextColor(color, -2)]};
+        background: ${background2 ? exports.colorTokens[background2] : exports.colorTokens[getNextColor(color, -2)]};
         color: ${exports.colorTokens[color]};
       `;
     case "LINE":
@@ -2828,7 +2831,7 @@ var StyledTag = styled6__default.default.div`
   cursor: default;
   gap: 2px;
   ${({ sizeVar }) => getTagStyleBySize(sizeVar)};
-  ${({ color, styleVar }) => getColorsByStyleVariant(styleVar, color)};
+  ${({ color, styleVar, background: background2 }) => getColorsByStyleVariant(styleVar, color, background2)};
   ${({ radius, sizeVar }) => radius && getRadiusBySize(sizeVar)};
 `;
 
@@ -3950,9 +3953,6 @@ var PageItem = styled6__default.default.button`
   height: 32px;
   border-radius: ${exports.borderRadiusTokens.borderRadius08};
   background-color: ${({ isActive }) => isActive ? exports.colorTokens.neutral300 : exports.colorTokens.neutral0};
-  font-size: 13px;
-  font-weight: ${({ isActive }) => isActive && "600"};
-  line-height: 2;
   cursor: pointer;
 
   &:hover {
@@ -4029,19 +4029,19 @@ var Pagination = (_a) => {
     /* @__PURE__ */ jsxRuntime.jsxs(StyledPagination, { "data-shoplflow": "Pagination", children: [
       /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", styleVar: "GHOST", disabled: !canPreviousPage, onClick: () => gotoPage(0), children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.FirstPageIcon, color: "neutral400", sizeVar: "S" }) }),
       /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", styleVar: "GHOST", onClick: previousPage, disabled: !canPreviousPage, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.LeftArrowIcon, color: "neutral400", sizeVar: "S" }) }),
-      showLeftEllipsis && /* @__PURE__ */ jsxRuntime.jsx(Ellipsis, { children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { children: "..." }) }),
+      showLeftEllipsis && /* @__PURE__ */ jsxRuntime.jsx(Ellipsis, { children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body2_700", children: "..." }) }),
       [...Array(pageTotalCount)].splice(0, pageCount).map(
         (_, idx) => idx + Math.floor(currentPage / pageCount) * pageCount < pageTotalCount && /* @__PURE__ */ jsxRuntime.jsx(
           PageItem,
           {
             isActive: currentPage === idx + Math.floor(currentPage / pageCount) * pageCount,
             onClick: () => gotoPage(idx + Math.floor(currentPage / pageCount) * pageCount),
-            children: idx + 1 + Math.floor(currentPage / pageCount) * pageCount
+            children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body2_700", children: idx + 1 + Math.floor(currentPage / pageCount) * pageCount })
           },
           idx
         )
       ),
-      showRightEllipsis && /* @__PURE__ */ jsxRuntime.jsx(Ellipsis, { children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { children: "..." }) }),
+      showRightEllipsis && /* @__PURE__ */ jsxRuntime.jsx(Ellipsis, { children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body2_700", children: "..." }) }),
       /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", styleVar: "GHOST", onClick: nextPage, disabled: !canNextPage, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.RightArrowIcon, color: "neutral400", sizeVar: "S" }) }),
       /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", styleVar: "GHOST", disabled: !canNextPage, onClick: () => gotoPage(pageTotalCount - 1), children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.EndPageIcon, color: "neutral400", sizeVar: "S" }) })
     ] }),