@shoplflow/base 0.31.21 → 0.32.1

package/dist/index.cjs

@@ -2799,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`
@@ -2808,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":
@@ -2831,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)};
 `;
 
@@ -3170,6 +3170,7 @@ var Input = React3.forwardRef(
     };
     const handleOnBlur = (event) => {
       onBlur && onBlur(event);
+      !isHovered && setIsFocused(false);
     };
     const handleOnKeyDown = (event) => {
       if (event.code === "Tab") {
@@ -3953,9 +3954,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 {
@@ -4032,19 +4030,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" }) })
     ] }),