@shoplflow/base 0.24.27 → 0.24.28

package/dist/index.js

@@ -1834,16 +1834,42 @@ var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
   }
   return colorTokens.neutral300;
 };
+var getStyleByType = ({
+  type,
+  height,
+  minHeight,
+  maxHeight,
+  width,
+  minWidth,
+  maxWidth
+}) => {
+  if (type === "number") {
+    return css`
+      width: 64px;
+      height: 32px;
+    `;
+  }
+  if (type === "text" || type === "password") {
+    return 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"};
+    `;
+  }
+  return css`
+    width: 64px;
+    height: 32px;
+  `;
+};
 var InputWrapper = styled5.label`
+  position: relative;
   display: flex;
   align-items: center;
   flex-direction: ${({ direction }) => direction || "row"};
-  width: ${({ width }) => width != null ? width : "100%"};
-  min-width: ${({ minWidth }) => minWidth != null ? minWidth : "initial"};
-  max-width: ${({ maxWidth }) => maxWidth != null ? maxWidth : "initial"};
-  min-height: ${({ minHeight }) => minHeight != null ? minHeight : "initial"};
-  max-height: ${({ maxHeight }) => maxHeight != null ? maxHeight : "initial"};
-  height: ${({ height }) => height != null ? height : "initial"};
+  ${({ type, height, minHeight, maxHeight, width, maxWidth, minWidth }) => getStyleByType({ type, height, minHeight, maxHeight, width, maxWidth, minWidth })};
   justify-content: space-between;
   gap: 8px;
   border: 1px solid ${(props) => getBorderColorByStatus(props)};
@@ -2578,7 +2604,8 @@ var TagSizeVariants = {
 var StyledInput = styled5.input`
   padding: 4px 0 4px 12px;
   background-color: transparent;
-  width: 100%;
+  display: flex;
+  min-width: 64px;
   border: none;
   box-sizing: border-box;
   &::placeholder {
@@ -2599,6 +2626,12 @@ var StyledInput = styled5.input`
     text-align: center;
     -moz-appearance: textfield;
   }
+
+  *,
+  *:before,
+  *:after {
+    box-sizing: inherit;
+  }
 `;
 var RightElementWrapper = styled5.div`
   display: flex;
@@ -2661,7 +2694,7 @@ var Input = forwardRef(
       min,
       max,
       className,
-      width = "100%"
+      width
     } = _b, rest = __objRest(_b, [
       "onFocus",
       "onBlur",
@@ -2680,7 +2713,7 @@ var Input = forwardRef(
     ]);
     const [text, setText] = useState("");
     const [isFocused, setIsFocused] = useState(false);
-    const [type, setType] = useState("text");
+    const [type, setType] = useState(void 0);
     const [isHovered, setIsHovered] = useState(false);
     const uniqueId = useId();
     const inputRef = React2__default.useRef(null);
@@ -2727,13 +2760,6 @@ var Input = forwardRef(
       }
       setText(slicedText);
     };
-    const getWidth = () => {
-      if (type === "number") {
-        return "64px";
-      } else {
-        return width;
-      }
-    };
     const handleOnClear = () => {
       onClear && onClear();
       if (inputRef.current) {
@@ -2777,9 +2803,10 @@ var Input = forwardRef(
         isHovered,
         onMouseEnter: handleOnMouseEnter,
         onMouseLeave: handleOnMouseLeave,
-        width: getWidth(),
-        height: type === "number" ? "32px" : "40px",
-        maxHeight: type === "number" ? "32px" : "40px",
+        type,
+        width,
+        height: "40px",
+        maxHeight: "40px",
         "data-shoplflow": "input",
         children: [
           /* @__PURE__ */ jsx(