@shoplflow/base 0.23.0 → 0.23.2

package/dist/index.cjs

@@ -588,7 +588,11 @@ exports.AvatarSizeVariants = {
 exports.StyledStack = styled6__default.default.div`
   display: flex;
   width: ${({ width }) => width};
+  max-width: ${({ maxWidth }) => maxWidth};
+  min-width: ${({ minWidth }) => minWidth};
   height: ${({ height }) => height};
+  max-height: ${({ maxHeight }) => maxHeight};
+  min-height: ${({ minHeight }) => minHeight};
   flex-direction: ${({ direction }) => direction};
   align-items: ${({ align }) => align};
   justify-content: ${({ justify }) => justify};
@@ -2737,6 +2741,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;