@shoplflow/base 0.31.21 → 0.32.1

package/dist/index.d.cts

@@ -921,7 +921,7 @@ declare type TagStyleVariantType = $Values<typeof TagStyleVariants>;
 declare type TagSizeVariantType = $Values<typeof TagSizeVariants>;
 interface TagProps extends TagOptionProps {
 }
-interface TagOptionProps extends SizeVariantProps<TagSizeVariantType>, StyleVariantProps<TagStyleVariantType>, ColorTokenProps, LeftAndRightElementProps, ChildrenProps, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+interface TagOptionProps extends SizeVariantProps<TagSizeVariantType>, StyleVariantProps<TagStyleVariantType>, ColorTokenProps, LeftAndRightElementProps, ChildrenProps, BackgroundColorProps, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
     radius?: boolean;
 }
 

package/dist/index.d.ts

@@ -921,7 +921,7 @@ declare type TagStyleVariantType = $Values<typeof TagStyleVariants>;
 declare type TagSizeVariantType = $Values<typeof TagSizeVariants>;
 interface TagProps extends TagOptionProps {
 }
-interface TagOptionProps extends SizeVariantProps<TagSizeVariantType>, StyleVariantProps<TagStyleVariantType>, ColorTokenProps, LeftAndRightElementProps, ChildrenProps, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+interface TagOptionProps extends SizeVariantProps<TagSizeVariantType>, StyleVariantProps<TagStyleVariantType>, ColorTokenProps, LeftAndRightElementProps, ChildrenProps, BackgroundColorProps, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
     radius?: boolean;
 }
 

package/dist/index.js

@@ -2772,7 +2772,7 @@ var getRadiusBySize = (size2) => {
       `;
   }
 };
-var getColorsByStyleVariant = (styleVariant, color = "neutral700") => {
+var getColorsByStyleVariant = (styleVariant, color = "neutral700", background2) => {
   switch (styleVariant) {
     case "SOLID":
       return css`
@@ -2781,7 +2781,7 @@ var getColorsByStyleVariant = (styleVariant, color = "neutral700") => {
       `;
     case "TINT":
       return css`
-        background: ${colorTokens[getNextColor(color, -2)]};
+        background: ${background2 ? colorTokens[background2] : colorTokens[getNextColor(color, -2)]};
         color: ${colorTokens[color]};
       `;
     case "LINE":
@@ -2804,7 +2804,7 @@ var StyledTag = styled6.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)};
 `;
 
@@ -3143,6 +3143,7 @@ var Input = forwardRef(
     };
     const handleOnBlur = (event) => {
       onBlur && onBlur(event);
+      !isHovered && setIsFocused(false);
     };
     const handleOnKeyDown = (event) => {
       if (event.code === "Tab") {
@@ -3926,9 +3927,6 @@ var PageItem = styled6.button`
   height: 32px;
   border-radius: ${borderRadiusTokens.borderRadius08};
   background-color: ${({ isActive }) => isActive ? colorTokens.neutral300 : colorTokens.neutral0};
-  font-size: 13px;
-  font-weight: ${({ isActive }) => isActive && "600"};
-  line-height: 2;
   cursor: pointer;
 
   &:hover {
@@ -4005,19 +4003,19 @@ var Pagination = (_a) => {
     /* @__PURE__ */ jsxs(StyledPagination, { "data-shoplflow": "Pagination", children: [
       /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", styleVar: "GHOST", disabled: !canPreviousPage, onClick: () => gotoPage(0), children: /* @__PURE__ */ jsx(Icon_default, { iconSource: FirstPageIcon, color: "neutral400", sizeVar: "S" }) }),
       /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", styleVar: "GHOST", onClick: previousPage, disabled: !canPreviousPage, children: /* @__PURE__ */ jsx(Icon_default, { iconSource: LeftArrowIcon, color: "neutral400", sizeVar: "S" }) }),
-      showLeftEllipsis && /* @__PURE__ */ jsx(Ellipsis, { children: /* @__PURE__ */ jsx(Text_default, { children: "..." }) }),
+      showLeftEllipsis && /* @__PURE__ */ jsx(Ellipsis, { children: /* @__PURE__ */ jsx(Text_default, { typography: "body2_700", children: "..." }) }),
       [...Array(pageTotalCount)].splice(0, pageCount).map(
         (_, idx) => idx + Math.floor(currentPage / pageCount) * pageCount < pageTotalCount && /* @__PURE__ */ 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__ */ jsx(Text_default, { typography: "body2_700", children: idx + 1 + Math.floor(currentPage / pageCount) * pageCount })
           },
           idx
         )
       ),
-      showRightEllipsis && /* @__PURE__ */ jsx(Ellipsis, { children: /* @__PURE__ */ jsx(Text_default, { children: "..." }) }),
+      showRightEllipsis && /* @__PURE__ */ jsx(Ellipsis, { children: /* @__PURE__ */ jsx(Text_default, { typography: "body2_700", children: "..." }) }),
       /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", styleVar: "GHOST", onClick: nextPage, disabled: !canNextPage, children: /* @__PURE__ */ jsx(Icon_default, { iconSource: RightArrowIcon, color: "neutral400", sizeVar: "S" }) }),
       /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", styleVar: "GHOST", disabled: !canNextPage, onClick: () => gotoPage(pageTotalCount - 1), children: /* @__PURE__ */ jsx(Icon_default, { iconSource: EndPageIcon, color: "neutral400", sizeVar: "S" }) })
     ] }),