@shoplflow/base 0.42.22 → 0.43.0

package/dist/index.cjs

@@ -1297,7 +1297,7 @@ var StyledSwitch = styled6__default.default.input`
   position: relative;
   display: flex;
   align-items: center;
-  background: ${exports.colorTokens.neutral350};
+  background: ${({ sizeVar }) => sizeVar === "M" ? exports.colorTokens.neutral350 : exports.colorTokens.neutral400};
   padding: 2px;
   margin: 0;
 
@@ -3631,7 +3631,7 @@ exports.TreeItem[exports.TREE_SYMBOL_KEY] = true;
 Tree.Item = exports.TreeItem;
 exports.Tree = Tree;
 var StyledInput = styled6__default.default.input`
-  padding: 4px 0 4px 12px;
+  padding: ${({ sizeVar }) => sizeVar === "S" ? "0 0 0 8px" : "4px 0 4px 12px"};
   background-color: transparent;
   display: flex;
   min-width: ${({ minWidth }) => minWidth || "64px"};
@@ -3760,7 +3760,7 @@ var InputWrapper = styled6__default.default.label`
   borderRadius
 })};
   justify-content: space-between;
-  gap: ${({ gap }) => gap || "8px"};
+  gap: ${({ gap, sizeVar }) => gap || (sizeVar === "S" ? "4px" : "8px")};
   border: 1px solid ${(props) => getBorderColorByStatus2(props)};
   background-color: ${exports.colorTokens.neutral0};
   overflow: hidden;
@@ -3942,6 +3942,7 @@ var Input = React3.forwardRef(
         borderRadius,
         customNumberInputHeight,
         gap,
+        sizeVar,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             StyledInput,
@@ -3957,6 +3958,7 @@ var Input = React3.forwardRef(
               id: uniqueId,
               ref: refs,
               minWidth,
+              sizeVar,
               className: "body1_400" + (className ? ` ${className}` : "")
             }, rest)
           ),
@@ -4795,6 +4797,8 @@ var PaginationSizeSelector = ({ data, pageSize, setPageSize }) => {
     handleToggleSelect(value);
     setPageSize(value);
   };
+  const currentItem = selectedItem || data.find((item) => item.value === pageSize);
+  const displayLabel = currentItem ? currentItem.label : String(pageSize);
   return /* @__PURE__ */ jsxRuntime.jsx(
     exports.Dropdown,
     {
@@ -4805,7 +4809,7 @@ var PaginationSizeSelector = ({ data, pageSize, setPageSize }) => {
         {
           placeholder: String(pageSize),
           sizeVar: "S",
-          value: selectedItem && /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", color: "neutral400", children: selectedItem.label })
+          value: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", color: "neutral400", children: displayLabel })
         }
       ),
       popper: /* @__PURE__ */ jsxRuntime.jsx(exports.Dropdown.Content, { type: "FILL", children: data.map((item) => {

package/dist/index.js

@@ -1270,7 +1270,7 @@ var StyledSwitch = styled6.input`
   position: relative;
   display: flex;
   align-items: center;
-  background: ${colorTokens.neutral350};
+  background: ${({ sizeVar }) => sizeVar === "M" ? colorTokens.neutral350 : colorTokens.neutral400};
   padding: 2px;
   margin: 0;
 
@@ -3604,7 +3604,7 @@ TreeItem[TREE_SYMBOL_KEY] = true;
 Tree.Item = TreeItem;
 var Tree_default = Tree;
 var StyledInput = styled6.input`
-  padding: 4px 0 4px 12px;
+  padding: ${({ sizeVar }) => sizeVar === "S" ? "0 0 0 8px" : "4px 0 4px 12px"};
   background-color: transparent;
   display: flex;
   min-width: ${({ minWidth }) => minWidth || "64px"};
@@ -3733,7 +3733,7 @@ var InputWrapper = styled6.label`
   borderRadius
 })};
   justify-content: space-between;
-  gap: ${({ gap }) => gap || "8px"};
+  gap: ${({ gap, sizeVar }) => gap || (sizeVar === "S" ? "4px" : "8px")};
   border: 1px solid ${(props) => getBorderColorByStatus2(props)};
   background-color: ${colorTokens.neutral0};
   overflow: hidden;
@@ -3915,6 +3915,7 @@ var Input = forwardRef(
         borderRadius,
         customNumberInputHeight,
         gap,
+        sizeVar,
         children: [
           /* @__PURE__ */ jsx(
             StyledInput,
@@ -3930,6 +3931,7 @@ var Input = forwardRef(
               id: uniqueId,
               ref: refs,
               minWidth,
+              sizeVar,
               className: "body1_400" + (className ? ` ${className}` : "")
             }, rest)
           ),
@@ -4768,6 +4770,8 @@ var PaginationSizeSelector = ({ data, pageSize, setPageSize }) => {
     handleToggleSelect(value);
     setPageSize(value);
   };
+  const currentItem = selectedItem || data.find((item) => item.value === pageSize);
+  const displayLabel = currentItem ? currentItem.label : String(pageSize);
   return /* @__PURE__ */ jsx(
     Dropdown_default,
     {
@@ -4778,7 +4782,7 @@ var PaginationSizeSelector = ({ data, pageSize, setPageSize }) => {
         {
           placeholder: String(pageSize),
           sizeVar: "S",
-          value: selectedItem && /* @__PURE__ */ jsx(Text_default, { typography: "body1_400", color: "neutral400", children: selectedItem.label })
+          value: /* @__PURE__ */ jsx(Text_default, { typography: "body1_400", color: "neutral400", children: displayLabel })
         }
       ),
       popper: /* @__PURE__ */ jsx(Dropdown_default.Content, { type: "FILL", children: data.map((item) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.42.22",
+  "version": "0.43.0",
   "type": "module",
   "license": "Apache-2.0",
   "main": "dist/index.js",
@@ -90,8 +90,8 @@
     "react-datepicker": "^7.3.0",
     "react-dom": "^18.2.0",
     "simplebar-react": "^3.2.6",
+    "@shoplflow/shopl-assets": "^0.12.26",
     "@shoplflow/hada-assets": "^0.1.8",
-    "@shoplflow/shopl-assets": "^0.12.25",
     "@shoplflow/utils": "^0.7.0"
   },
   "scripts": {