@shoplflow/base 0.22.5 → 0.23.1

package/dist/index.cjs

@@ -2509,7 +2509,7 @@ var Input = React3.forwardRef(
   }
 );
 exports.Input = Input;
-exports.StyledInputButton = styled6__default.default.button`
+exports.StyledInputButton = styled6__default.default.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -2551,6 +2551,7 @@ var InputButton = React3.forwardRef(
       }
     };
     const handleOnClear = (e) => {
+      e.preventDefault();
       e.stopPropagation();
       if (!disabled) {
         onClear && onClear(e);
@@ -2736,6 +2737,95 @@ var TextArea = React3.forwardRef(
   }
 );
 exports.TextArea = TextArea;
+var StyledSelectInputButton = styled6__default.default.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  background: ${exports.colorTokens.neutral0};
+  gap: 4px;
+  padding: 4px 4px 4px 12px;
+  cursor: pointer;
+  ${({ disabled }) => disabled && react$1.css`
+      background-color: ${exports.colorTokens.neutral100};
+      cursor: not-allowed;
+    `}
+`;
+var SelectInputButton = (_a) => {
+  var _b = _a, {
+    disabled,
+    isSelected,
+    onMouseEnter,
+    onMouseLeave,
+    onClick,
+    onClear,
+    value,
+    placeholder,
+    label,
+    width,
+    rightSource
+  } = _b, rest = __objRest(_b, [
+    "disabled",
+    "isSelected",
+    "onMouseEnter",
+    "onMouseLeave",
+    "onClick",
+    "onClear",
+    "value",
+    "placeholder",
+    "label",
+    "width",
+    "rightSource"
+  ]);
+  const [isHovered, setIsHovered] = React3.useState(false);
+  const handleOnClick = (e) => {
+    e.preventDefault();
+    if (!disabled) {
+      onClick && onClick(e);
+    }
+  };
+  const handleOnClear = (e) => {
+    e.stopPropagation();
+    if (!disabled) {
+      onClear && onClear(e);
+    }
+  };
+  const handleOnMouseEnter = (e) => {
+    setIsHovered(true);
+    onMouseEnter && onMouseEnter(e);
+  };
+  const handleOnMouseLeave = (e) => {
+    setIsHovered(false);
+    onMouseLeave && onMouseLeave(e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    InputWrapper,
+    __spreadProps(__spreadValues({
+      onMouseEnter: handleOnMouseEnter,
+      onMouseLeave: handleOnMouseLeave,
+      onClick: handleOnClick,
+      isHovered,
+      isFocused: isSelected,
+      disabled,
+      width
+    }, 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 }),
+        /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Horizontal, { align: "center", children: [
+          value && value.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(exports.Text, { typography: "body1_400", color: "neutral700", children: [
+            "+",
+            value.length - 1
+          ] }),
+          value && value.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", onClick: handleOnClear, styleVar: "GHOST", disabled, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: assetFunction("DeleteIcon"), color: "neutral350" }) }),
+          rightSource
+        ] })
+      ] })
+    })
+  );
+};
+exports.SelectInputButton = SelectInputButton;
 var Container2 = styled6__default.default.div`
   width: 32px;
   height: 32px;