@shoplflow/base 0.24.25 → 0.24.27

package/dist/index.cjs

@@ -1862,27 +1862,16 @@ var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
 var InputWrapper = styled5__default.default.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: ${exports.colorTokens.neutral0};
   overflow: hidden;
@@ -2625,6 +2614,10 @@ var StyledInput = styled5__default.default.input`
     -webkit-appearance: none;
     margin: 0;
   }
+  ${({ disabled }) => disabled && react$1.css`
+      color: ${exports.colorTokens.neutral350};
+      cursor: not-allowed;
+    `};
   /* Firefox */
   &[type='number'] {
     padding: 4px 8px;
@@ -2666,6 +2659,17 @@ var assetFunction = (iconName, domainProps) => {
   const ShoplIcon = ShoplAssets__namespace[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 = React2.forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -2721,18 +2725,6 @@ var Input = React2.forwardRef(
       },
       [maxLength]
     );
-    const limitRange = React2.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);
     };
@@ -2751,7 +2743,10 @@ var Input = React2.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;
       }
@@ -2809,6 +2804,7 @@ var Input = React2.forwardRef(
         onMouseLeave: handleOnMouseLeave,
         width: getWidth(),
         height: type === "number" ? "32px" : "40px",
+        maxHeight: type === "number" ? "32px" : "40px",
         "data-shoplflow": "input",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -2948,6 +2944,7 @@ var InputButton = React2.forwardRef(
         isFocused: isSelected,
         disabled,
         minHeight: "40px",
+        maxHeight: "40px",
         width,
         children: /* @__PURE__ */ jsxRuntime.jsxs(exports.StyledInputButton, { onClick: handleOnClick, disabled, children: [
           /* @__PURE__ */ jsxRuntime.jsx(exports.StyledInputButtonContent, __spreadValues({ className: "body1_400", defaultValue: text, ref }, rest)),