@shoplflow/base 0.24.27 → 0.24.28

package/dist/index.cjs

@@ -1859,16 +1859,42 @@ var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
   }
   return exports.colorTokens.neutral300;
 };
+var getStyleByType = ({
+  type,
+  height,
+  minHeight,
+  maxHeight,
+  width,
+  minWidth,
+  maxWidth
+}) => {
+  if (type === "number") {
+    return react$1.css`
+      width: 64px;
+      height: 32px;
+    `;
+  }
+  if (type === "text" || type === "password") {
+    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"};
+    `;
+  }
+  return react$1.css`
+    width: 64px;
+    height: 32px;
+  `;
+};
 var InputWrapper = styled5__default.default.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)};
@@ -2603,7 +2629,8 @@ exports.TagSizeVariants = {
 var StyledInput = styled5__default.default.input`
   padding: 4px 0 4px 12px;
   background-color: transparent;
-  width: 100%;
+  display: flex;
+  min-width: 64px;
   border: none;
   box-sizing: border-box;
   &::placeholder {
@@ -2624,6 +2651,12 @@ var StyledInput = styled5__default.default.input`
     text-align: center;
     -moz-appearance: textfield;
   }
+
+  *,
+  *:before,
+  *:after {
+    box-sizing: inherit;
+  }
 `;
 var RightElementWrapper = styled5__default.default.div`
   display: flex;
@@ -2686,7 +2719,7 @@ var Input = React2.forwardRef(
       min,
       max,
       className,
-      width = "100%"
+      width
     } = _b, rest = __objRest(_b, [
       "onFocus",
       "onBlur",
@@ -2705,7 +2738,7 @@ var Input = React2.forwardRef(
     ]);
     const [text, setText] = React2.useState("");
     const [isFocused, setIsFocused] = React2.useState(false);
-    const [type, setType] = React2.useState("text");
+    const [type, setType] = React2.useState(void 0);
     const [isHovered, setIsHovered] = React2.useState(false);
     const uniqueId = React2.useId();
     const inputRef = React2__namespace.default.useRef(null);
@@ -2752,13 +2785,6 @@ var Input = React2.forwardRef(
       }
       setText(slicedText);
     };
-    const getWidth = () => {
-      if (type === "number") {
-        return "64px";
-      } else {
-        return width;
-      }
-    };
     const handleOnClear = () => {
       onClear && onClear();
       if (inputRef.current) {
@@ -2802,9 +2828,10 @@ var Input = React2.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__ */ jsxRuntime.jsx(