@shoplflow/base 0.24.26 → 0.24.27

package/dist/index.js

@@ -1837,27 +1837,16 @@ var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
 var InputWrapper = styled5.label`
   display: flex;
   align-items: center;
-  width: ${({ width }) => {
-  var _a;
-  return (_a = `calc(${width} - 2px)`) != null ? _a : "calc(100% - 2px)";
-}};
-  min-width: ${({ minWidth }) => {
-  var _a;
-  return (_a = `calc(${minWidth} - 2px)`) != null ? _a : "fit-content";
-}};
-  height: ${({ height }) => {
-  var _a;
-  return (_a = `calc(${height} - 2px)`) != null ? _a : "fit-content";
-}};
   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"};
   justify-content: space-between;
-  min-height: ${({ minHeight }) => {
-  var _a;
-  return (_a = `calc(${minHeight} - 2px)`) != null ? _a : "fit-content";
-}};
-  margin: 1px;
   gap: 8px;
-  box-shadow: 0 0 0 1px ${(props) => getBorderColorByStatus(props)};
+  border: 1px solid ${(props) => getBorderColorByStatus(props)};
   border-radius: 6px;
   background-color: ${colorTokens.neutral0};
   overflow: hidden;
@@ -2645,6 +2634,17 @@ var assetFunction = (iconName, domainProps) => {
   const ShoplIcon = ShoplAssets[iconName];
   return domain === "hada" ? HadaIcon : ShoplIcon;
 };
+
+// src/components/Inputs/Input/utils/getNumberLimiteRange.ts
+var getNumberLimitRange = (value, min, max) => {
+  if (min && value < min) {
+    return String(min);
+  }
+  if (max && value > max) {
+    return String(max);
+  }
+  return String(value);
+};
 var Input = forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -2700,18 +2700,6 @@ var Input = forwardRef(
       },
       [maxLength]
     );
-    const limitRange = useCallback(
-      (value2) => {
-        if (min && Number(value2) < Number(min)) {
-          return String(min);
-        }
-        if (max && Number(value2) > Number(max)) {
-          return String(max);
-        }
-        return value2;
-      },
-      [max, min]
-    );
     const handleOnMouseEnter = () => {
       setIsHovered(true);
     };
@@ -2730,7 +2718,10 @@ var Input = forwardRef(
       onChange && onChange(event);
       const slicedText = sliceText(event.target.value);
       if (type === "number") {
-        const limitedText = limitRange(slicedText);
+        const numberValue = Number(slicedText);
+        const numberMin = Number(min);
+        const numberMax = Number(max);
+        const limitedText = getNumberLimitRange(numberValue, numberMin, numberMax);
         setText(limitedText);
         return;
       }
@@ -2788,6 +2779,7 @@ var Input = forwardRef(
         onMouseLeave: handleOnMouseLeave,
         width: getWidth(),
         height: type === "number" ? "32px" : "40px",
+        maxHeight: type === "number" ? "32px" : "40px",
         "data-shoplflow": "input",
         children: [
           /* @__PURE__ */ jsx(
@@ -2927,6 +2919,7 @@ var InputButton = forwardRef(
         isFocused: isSelected,
         disabled,
         minHeight: "40px",
+        maxHeight: "40px",
         width,
         children: /* @__PURE__ */ jsxs(StyledInputButton, { onClick: handleOnClick, disabled, children: [
           /* @__PURE__ */ jsx(StyledInputButtonContent, __spreadValues({ className: "body1_400", defaultValue: text, ref }, rest)),