@shoplflow/base 0.24.23 → 0.24.25

package/dist/index.cjs

@@ -1862,12 +1862,24 @@ var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
 var InputWrapper = styled5__default.default.label`
   display: flex;
   align-items: center;
-  width: ${({ width }) => width != null ? width : "calc(100% - 2px)"};
-  min-width: ${({ minWidth }) => minWidth != null ? minWidth : "fit-content"};
-  height: ${({ height }) => height != null ? height : "fit-content"};
+  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"};
   justify-content: space-between;
-  min-height: ${({ minHeight }) => minHeight != null ? minHeight : "38px"};
+  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)};
@@ -1922,7 +1934,7 @@ var Icon = React2.forwardRef((_a, ref) => {
 exports.Icon = Icon;
 var DropdownButton = React2.forwardRef(
   (_a, ref) => {
-    var _b = _a, { width, onClick, sizeVar = "M", placeholder, value, disabled, leftSource } = _b, rest = __objRest(_b, ["width", "onClick", "sizeVar", "placeholder", "value", "disabled", "leftSource"]);
+    var _b = _a, { width = "100%", onClick, sizeVar = "M", isError, placeholder, value, disabled, leftSource } = _b, rest = __objRest(_b, ["width", "onClick", "sizeVar", "isError", "placeholder", "value", "disabled", "leftSource"]);
     const { isOpen, setIsOpen } = useDropdown();
     const [isHovered, setIsHovered] = React2.useState(false);
     const handleOnClick = (e) => {
@@ -1946,6 +1958,7 @@ var DropdownButton = React2.forwardRef(
         isHovered,
         disabled,
         width,
+        isError,
         height: exports.getDropdownHeightBySizeVar(sizeVar),
         children: /* @__PURE__ */ jsxRuntime.jsxs(exports.StyledDropdownButton, __spreadProps(__spreadValues({ ref, onClick: handleOnClick, disabled }, rest), { sizeVar, children: [
           leftSource && leftSource,
@@ -2669,7 +2682,7 @@ var Input = React2.forwardRef(
       min,
       max,
       className,
-      width
+      width = "100%"
     } = _b, rest = __objRest(_b, [
       "onFocus",
       "onBlur",
@@ -2795,6 +2808,7 @@ var Input = React2.forwardRef(
         onMouseEnter: handleOnMouseEnter,
         onMouseLeave: handleOnMouseLeave,
         width: getWidth(),
+        height: type === "number" ? "32px" : "40px",
         "data-shoplflow": "input",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -2856,7 +2870,27 @@ exports.StyledInputButtonContent = styled5__default.default.input`
 `;
 var InputButton = React2.forwardRef(
   (_a, ref) => {
-    var _b = _a, { value, defaultValue, onChange, onClick, isSelected, disabled = false, rightSource, onClear, width } = _b, rest = __objRest(_b, ["value", "defaultValue", "onChange", "onClick", "isSelected", "disabled", "rightSource", "onClear", "width"]);
+    var _b = _a, {
+      value,
+      defaultValue,
+      onChange,
+      onClick,
+      isSelected,
+      disabled = false,
+      rightSource,
+      onClear,
+      width = "100%"
+    } = _b, rest = __objRest(_b, [
+      "value",
+      "defaultValue",
+      "onChange",
+      "onClick",
+      "isSelected",
+      "disabled",
+      "rightSource",
+      "onClear",
+      "width"
+    ]);
     const [text, setText] = React2.useState("");
     const [isHovered, setIsHovered] = React2.useState(false);
     const prevValue = React2.useRef(value);
@@ -2913,6 +2947,7 @@ var InputButton = React2.forwardRef(
         isHovered,
         isFocused: isSelected,
         disabled,
+        minHeight: "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)),
@@ -3091,7 +3126,7 @@ var SelectInputButton = (_a) => {
     value,
     placeholder,
     label,
-    width,
+    width = "100%",
     rightSource
   } = _b, rest = __objRest(_b, [
     "disabled",
@@ -3138,11 +3173,12 @@ var SelectInputButton = (_a) => {
       isHovered,
       isFocused: isSelected,
       disabled,
-      width
+      width,
+      minHeight: "40px"
     }, rest), {
       "data-shoplflow": "SelectInputButton",
       children: /* @__PURE__ */ jsxRuntime.jsxs(StyledSelectInputButton, { children: [
-        value && value.length > 0 && label ? /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", children: value[0][label] }) : /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", color: "neutral350", children: placeholder }),
+        value && value.length > 0 && label ? /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", lineClamp: 1, children: value[0][label] }) : /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", lineClamp: 1, color: "neutral350", children: placeholder }),
         /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Horizontal, { align: "center", spacing: "spacing04", children: [
           value && value.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(exports.Text, { typography: "body1_400", color: "neutral700", children: [
             "+",