@shoplflow/base 0.31.5 → 0.31.7

package/dist/index.cjs

@@ -2074,33 +2074,47 @@ var getStyleByType = ({
   maxHeight,
   width,
   minWidth,
-  maxWidth
+  maxWidth,
+  borderRadius,
+  customNumberInputHeight
 }) => {
   if (type === "number") {
     return react$1.css`
-      width: 64px;
-      height: 32px;
+      width: ${width || "64px"};
+      height: ${customNumberInputHeight || "32px"};
+      border-radius: ${borderRadius ? exports.borderRadiusTokens[borderRadius] : "6px"};
     `;
   }
   return react$1.css`
-    width: ${width != null ? width : "100%"};
-    min-width: ${minWidth != null ? minWidth : "initial"};
-    max-width: ${maxWidth != null ? maxWidth : "initial"};
-    height: ${height != null ? height : "initial"};
-    min-height: ${minHeight != null ? minHeight : "initial"};
-    max-height: ${maxHeight != null ? maxHeight : "initial"};
+    width: ${width || "100%"};
+    min-width: ${minWidth || "initial"};
+    max-width: ${maxWidth || "initial"};
+    height: ${height || "initial"};
+    min-height: ${minHeight || "initial"};
+    max-height: ${maxHeight || "initial"};
+    border-radius: ${borderRadius ? exports.borderRadiusTokens[borderRadius] : "6px"};
   `;
 };
 var InputWrapper = styled6__default.default.label`
   position: relative;
   display: flex;
   align-items: center;
+  border-radius: 6px;
   flex-direction: ${({ direction }) => direction || "row"};
-  ${({ type, height, minHeight, maxHeight, width, maxWidth, minWidth }) => getStyleByType({ type, height, minHeight, maxHeight, width, maxWidth, minWidth })};
+  ${({ type, height, minHeight, maxHeight, width, maxWidth, minWidth, borderRadius, customNumberInputHeight }) => getStyleByType({
+  customNumberInputHeight,
+  type,
+  height,
+  minHeight,
+  maxHeight,
+  width,
+  maxWidth,
+  minWidth,
+  borderRadius
+})};
   justify-content: space-between;
   gap: 8px;
   border: 1px solid ${(props) => getBorderColorByStatus(props)};
-  border-radius: 6px;
   background-color: ${exports.colorTokens.neutral0};
   overflow: hidden;
   ${({ disabled }) => disabled && react$1.css`
@@ -3089,7 +3103,9 @@ var Input = React3.forwardRef(
       min,
       max,
       className,
-      width
+      width,
+      borderRadius,
+      customNumberInputHeight
     } = _b, rest = __objRest(_b, [
       "onFocus",
       "onBlur",
@@ -3104,7 +3120,9 @@ var Input = React3.forwardRef(
       "min",
       "max",
       "className",
-      "width"
+      "width",
+      "borderRadius",
+      "customNumberInputHeight"
     ]);
     const [text, setText] = React3.useState("");
     const [isFocused, setIsFocused] = React3.useState(false);
@@ -3203,6 +3221,8 @@ var Input = React3.forwardRef(
         height: "40px",
         maxHeight: "40px",
         "data-shoplflow": "input",
+        borderRadius,
+        customNumberInputHeight,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             StyledInput,