@shoplflow/base 0.24.21 → 0.24.24

package/dist/index.cjs

@@ -546,6 +546,7 @@ var setEllipsis = (maxLines) => {
     -webkit-line-clamp: ${maxLines};
     -webkit-box-orient: vertical;
     overflow: hidden;
+    word-break: break-all;
     text-overflow: ellipsis;
   `;
 };
@@ -1398,7 +1399,8 @@ var Button = React2.forwardRef(
       as,
       children,
       leftSource,
-      rightSource
+      rightSource,
+      lineClamp
     } = _b, rest = __objRest(_b, [
       "styleVar",
       "sizeVar",
@@ -1407,7 +1409,8 @@ var Button = React2.forwardRef(
       "as",
       "children",
       "leftSource",
-      "rightSource"
+      "rightSource",
+      "lineClamp"
     ]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       StyledButton,
@@ -1426,8 +1429,7 @@ var Button = React2.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx(
             exports.Text,
             {
-              wordBreak: "keep-all",
-              whiteSpace: "nowrap",
+              lineClamp,
               color: styleVar === "PRIMARY" ? "neutral0" : "neutral700",
               typography: sizeVar === "M" ? "body1_400" : "body2_400",
               children
@@ -1860,11 +1862,24 @@ var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
 var InputWrapper = styled5__default.default.label`
   display: flex;
   align-items: center;
-  width: ${({ width }) => width != null ? width : "100%"};
-  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: ${({ height }) => height != null ? height : "40px"};
+  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)};
@@ -1919,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) => {
@@ -1943,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,
@@ -2666,7 +2682,7 @@ var Input = React2.forwardRef(
       min,
       max,
       className,
-      width
+      width = "100%"
     } = _b, rest = __objRest(_b, [
       "onFocus",
       "onBlur",
@@ -2792,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(
@@ -2936,7 +2953,7 @@ var StyledTextarea = styled5__default.default.textarea`
   background-color: transparent;
   resize: none;
   width: 100%;
-  height: ${({ minHeight }) => minHeight ? `${minHeight}px` : "300px"};
+  height: 100%;
   flex: 1;
   word-break: break-all;
   ${({ disabled }) => getDisabledStyle(disabled)};
@@ -2957,8 +2974,9 @@ var TextArea = React2.forwardRef(
       defaultValue,
       onBlur,
       onFocus,
-      minHeight = 100,
+      minHeight = "100px",
       width,
+      height,
       className
     } = _b, rest = __objRest(_b, [
       "name",
@@ -2973,6 +2991,7 @@ var TextArea = React2.forwardRef(
       "onFocus",
       "minHeight",
       "width",
+      "height",
       "className"
     ]);
     const [text, setText] = React2.useState("");
@@ -3032,6 +3051,8 @@ var TextArea = React2.forwardRef(
         direction: "column",
         onMouseEnter: handleOnMouseEnter,
         onMouseLeave: handleOnMouseLeave,
+        height,
+        minHeight,
         width,
         "data-shoplflow": "text-area",
         children: [
@@ -3048,8 +3069,7 @@ var TextArea = React2.forwardRef(
               value,
               ref,
               maxLength,
-              disabled,
-              minHeight
+              disabled
             }, rest)
           ),
           /* @__PURE__ */ jsxRuntime.jsx(BottomElementWrapper, { children: maxLength && /* @__PURE__ */ jsxRuntime.jsx(TextCounter_default, { currentLength: String(text).length, maxLength }) })