@shoplflow/base 0.24.4 → 0.24.5

package/dist/index.cjs

@@ -2021,6 +2021,285 @@ var Dropdown = ({
 Dropdown.Button = DropdownButton;
 Dropdown.Content = DropdownContent;
 exports.Dropdown = Dropdown;
+var Container2 = styled6__default.default.div`
+  width: 32px;
+  height: 32px;
+  padding: 7px;
+`;
+var IconButton2 = styled6__default.default.button`
+  display: flex;
+  width: 16px;
+  height: 16px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: ${exports.borderRadiusTokens.borderRadius04};
+  border: none;
+  background: ${({ color }) => exports.colorTokens[color]};
+  cursor: pointer;
+  transition:
+    transform 0.1s ease-out,
+    background 0.1s ease;
+
+  &:hover {
+    background: ${({ color }) => exports.colorTokens[getNextColor(color, 1)]};
+  }
+`;
+var MUNUS_BUTTON_SYMBOL_KEY = Symbol("SHOPLFLOW_MUNUS_BUTTON");
+var MinusButton = React3.forwardRef((_a, ref) => {
+  var _b = _a, { onClick, color = "neutral300" } = _b, rest = __objRest(_b, ["onClick", "color"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Container2, { "data-shoplflow": "minusButton", children: /* @__PURE__ */ jsxRuntime.jsx(IconButton2, __spreadProps(__spreadValues({ color, onClick, ref }, rest), { children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4Z",
+        fill: "none"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M3 8C3 7.44772 3.44772 7 4 7H12C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9H4C3.44772 9 3 8.55228 3 8Z",
+        fill: "white"
+      }
+    )
+  ] }) })) });
+});
+MinusButton[MUNUS_BUTTON_SYMBOL_KEY] = true;
+exports.MinusButton = MinusButton;
+var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
+  switch (styleVariant) {
+    case "PRIMARY":
+      if (isSelected) {
+        return react$1.css`
+          background: ${exports.colorTokens.primary300};
+          border: 1.5px solid ${exports.colorTokens.primary300};
+          & > svg > path {
+            fill: ${exports.colorTokens.neutral0};
+          }
+          ${isHovered && react$1.css`
+            border: 1.5px solid ${exports.colorTokens.primary400};
+            background: ${exports.colorTokens.primary400};
+          `}
+        `;
+      }
+      return react$1.css`
+        background: ${exports.colorTokens.neutral200};
+        border: 1.5px solid ${exports.colorTokens.neutral200};
+        border-radius: 4px;
+        ${isHovered && react$1.css`
+          border: 1.5px solid ${exports.colorTokens.neutral300};
+          background: ${exports.colorTokens.neutral300};
+        `}
+
+        & > svg > path {
+          fill: ${exports.colorTokens.neutral0};
+        }
+      `;
+    case "LINE":
+      if (isSelected) {
+        return react$1.css`
+          border: 1.5px solid ${exports.colorTokens.primary300};
+          background: transparent;
+          border-radius: 4px;
+          & > svg > path {
+            fill: ${exports.colorTokens.primary300};
+          }
+          ${isHovered && react$1.css`
+            border: 1.5px solid ${exports.colorTokens.primary400};
+            & > svg > path {
+              fill: ${exports.colorTokens.primary400};
+            }
+          `}
+        `;
+      }
+      return react$1.css`
+        background: transparent;
+        border: 1.5px solid ${exports.colorTokens.neutral200};
+        border-radius: 4px;
+        & > svg > path {
+          fill: ${exports.colorTokens.neutral200};
+        }
+        ${isHovered && react$1.css`
+          border: 1.5px solid ${exports.colorTokens.neutral300};
+          & > svg > path {
+            fill: ${exports.colorTokens.neutral300};
+          }
+        `}
+      `;
+    default:
+      return "";
+  }
+};
+var StyledCheckbox = styled6__default.default.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  min-height: 16px;
+  width: 16px;
+  height: 16px;
+  background: ${exports.colorTokens.neutral200};
+  border-radius: 4px;
+  box-sizing: border-box;
+  cursor: pointer;
+  ${({ styleVar, isSelected, isHovered }) => getStylesByStyleVariant(styleVar, isSelected, isHovered)};
+  ${({ disabled }) => getDisabledStyle(disabled)}
+`;
+var Container3 = styled6__default.default.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  width: fit-content;
+  height: fit-content;
+`;
+exports.CHECKBOX_SYMBOL_KEY = Symbol("SHOPLFLOW_CHECKBOX");
+var Checkbox = (_a) => {
+  var _b = _a, {
+    defaultSelected,
+    isSelected,
+    disabled,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    styleVar = "PRIMARY"
+  } = _b, rest = __objRest(_b, [
+    "defaultSelected",
+    "isSelected",
+    "disabled",
+    "onClick",
+    "onMouseEnter",
+    "onMouseLeave",
+    "styleVar"
+  ]);
+  const [selected, toggleSelected] = useOnToggle(isSelected, defaultSelected);
+  const [isHovered, toggleHovered] = React3.useState(false);
+  const handleMouseLeave = (e) => {
+    toggleHovered(false);
+    onMouseLeave && onMouseLeave(e);
+  };
+  const handleMouseEnter = (e) => {
+    toggleHovered(true);
+    onMouseEnter && onMouseEnter(e);
+  };
+  const handleClick = (e) => {
+    if (disabled) {
+      return;
+    }
+    onClick && onClick(e);
+    toggleSelected();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Container3,
+    __spreadProps(__spreadValues({
+      onClick: handleClick,
+      onMouseLeave: handleMouseLeave,
+      onMouseEnter: handleMouseEnter,
+      disabled
+    }, rest), {
+      "data-shoplflow": "Checkbox",
+      children: /* @__PURE__ */ jsxRuntime.jsx(StyledCheckbox, { styleVar, isHovered, isSelected: selected, disabled, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M9.78822 0.297596C10.1761 -0.0955083 10.8093 -0.0997053 11.2024 0.288222C11.5653 0.646308 11.5968 1.21334 11.2943 1.60765L11.2118 1.7024L5.31714 7.7024C4.95248 8.07193 4.37282 8.09687 3.97909 7.77976L3.88476 7.69335L0.779404 4.42669C0.396475 4.02871 0.408672 3.39567 0.806647 3.01274C1.17401 2.65926 1.74167 2.64247 2.12801 2.95499L2.2206 3.03998L4.614 5.567L9.78822 0.297596Z",
+          fill: "white"
+        }
+      ) }) })
+    })
+  );
+};
+Checkbox[exports.CHECKBOX_SYMBOL_KEY] = true;
+exports.Checkbox = Checkbox;
+
+// src/components/ControlButtons/Checkbox/Checkbox.types.ts
+exports.CheckboxStyleVariants = {
+  PRIMARY: "PRIMARY",
+  LINE: "LINE"
+};
+var getSelectedStyle = (isHovered) => {
+  return react$1.css`
+    & > svg > circle {
+      stroke: ${exports.colorTokens.primary300};
+    }
+    ${isHovered && react$1.css`
+      & > svg > circle {
+        stroke: ${exports.colorTokens.primary400};
+      }
+    `}
+  `;
+};
+var StyledRadio = styled6__default.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  min-height: 16px;
+  width: 16px;
+  height: 16px;
+  ${({ isHovered }) => react$1.css`
+    & > svg > circle {
+      stroke: ${exports.colorTokens.neutral200};
+    }
+    ${isHovered && react$1.css`
+      & > svg > circle {
+        stroke: ${exports.colorTokens.neutral300};
+      }
+    `}
+  `}
+  cursor: pointer;
+  ${({ isSelected, isHovered }) => isSelected && getSelectedStyle(isHovered)}
+  ${({ disabled }) => getDisabledStyle(disabled)}
+`;
+var Container4 = styled6__default.default.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  padding: 4px;
+  width: fit-content;
+  height: fit-content;
+`;
+exports.RADIO_SYMBOL_KEY = Symbol("SHOPLFLOW_RADIO");
+var Radio = (_a) => {
+  var _b = _a, { isSelected, defaultSelected, disabled, onClick, onMouseEnter, onMouseLeave } = _b, rest = __objRest(_b, ["isSelected", "defaultSelected", "disabled", "onClick", "onMouseEnter", "onMouseLeave"]);
+  const [selected, toggleSelected] = useOnToggle(isSelected, defaultSelected);
+  const [isHovered, toggleHovered] = React3.useState(false);
+  const handleMouseLeave = (e) => {
+    toggleHovered(false);
+    onMouseLeave && onMouseLeave(e);
+  };
+  const handleMouseEnter = (e) => {
+    toggleHovered(true);
+    onMouseEnter && onMouseEnter(e);
+  };
+  const handleClick = (e) => {
+    if (disabled) {
+      return;
+    }
+    onClick && onClick(e);
+    toggleSelected();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Container4,
+    __spreadProps(__spreadValues({
+      onClick: handleClick,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave
+    }, rest), {
+      "data-shoplflow": "Radio",
+      children: /* @__PURE__ */ jsxRuntime.jsx(StyledRadio, { isSelected: selected, isHovered, disabled, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "5.5", fill: "white", stroke: "#3299FE", strokeWidth: "5" }) }) })
+    })
+  );
+};
+Radio[exports.RADIO_SYMBOL_KEY] = true;
+exports.Radio = Radio;
+
+// src/components/Menu/Menu.styled.ts
 var getStylesBySizeVar = (sizeVar) => {
   switch (sizeVar) {
     case "XS":
@@ -2068,7 +2347,7 @@ exports.StyledMenu = styled6__default.default.li`
     background: ${exports.colorTokens.neutral400_5};
   }
   ${({ disabled }) => disabled && getDisabledStyle(disabled)}
-  ${({ isSelected, leftSource }) => isSelected === true && !leftSource && react$1.css`
+  ${({ isSelected, leftSource }) => isSelected === true && (!leftSource || leftSource && !leftSource.type[exports.RADIO_SYMBOL_KEY] && !leftSource.type[exports.CHECKBOX_SYMBOL_KEY] && !leftSource.type[MUNUS_BUTTON_SYMBOL_KEY]) && react$1.css`
       background: ${exports.colorTokens.neutral200};
       &:hover {
         background: ${exports.colorTokens.neutral200};
@@ -2709,416 +2988,145 @@ var TextArea = React3.forwardRef(
     }, [defaultValue, maxLength]);
     React3.useEffect(() => {
       if (value) {
-        const convertString = convertToString(value);
-        if (maxLength && convertString.length > maxLength) {
-          setText(convertString);
-        }
-        setText(convertToString(value));
-      }
-    }, [maxLength, value]);
-    const uniqueId = React3.useId();
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      InputWrapper,
-      {
-        htmlFor: uniqueId,
-        isFocused,
-        disabled,
-        isHovered,
-        isError,
-        direction: "column",
-        onMouseEnter: handleOnMouseEnter,
-        onMouseLeave: handleOnMouseLeave,
-        width,
-        "data-shoplflow": "text-area",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            StyledTextarea,
-            __spreadValues({
-              className: "body1_400" + (className ? ` ${className}` : ""),
-              placeholder,
-              onFocus: handleOnFocus,
-              onBlur: handleOnBlur,
-              onChange: handleOnChange,
-              name,
-              id: uniqueId,
-              value,
-              ref,
-              maxLength,
-              disabled,
-              minHeight
-            }, rest)
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(BottomElementWrapper, { children: maxLength && /* @__PURE__ */ jsxRuntime.jsx(TextCounter_default, { currentLength: String(text).length, maxLength }) })
-        ]
-      }
-    );
-  }
-);
-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();
-    e.stopPropagation();
-    if (!disabled) {
-      onClick && onClick(e);
-    }
-  };
-  const handleOnClear = (e) => {
-    e.preventDefault();
-    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", spacing: "spacing04", children: [
-          value && value.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(exports.Text, { typography: "body1_400", color: "neutral700", children: [
-            "+",
-            value.length - 1
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Horizontal, { align: "center", children: [
-            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;
-  padding: 7px;
-`;
-var IconButton2 = styled6__default.default.button`
-  display: flex;
-  width: 16px;
-  height: 16px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border-radius: ${exports.borderRadiusTokens.borderRadius04};
-  border: none;
-  background: ${({ color }) => exports.colorTokens[color]};
-  cursor: pointer;
-  transition:
-    transform 0.1s ease-out,
-    background 0.1s ease;
-
-  &:hover {
-    background: ${({ color }) => exports.colorTokens[getNextColor(color, 1)]};
-  }
-`;
-var MinusButton = React3.forwardRef((_a, ref) => {
-  var _b = _a, { onClick, color = "neutral300" } = _b, rest = __objRest(_b, ["onClick", "color"]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Container2, { "data-shoplflow": "minusButton", children: /* @__PURE__ */ jsxRuntime.jsx(IconButton2, __spreadProps(__spreadValues({ color, onClick, ref }, rest), { children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        d: "M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4Z",
-        fill: "none"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M3 8C3 7.44772 3.44772 7 4 7H12C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9H4C3.44772 9 3 8.55228 3 8Z",
-        fill: "white"
-      }
-    )
-  ] }) })) });
-});
-exports.MinusButton = MinusButton;
-var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
-  switch (styleVariant) {
-    case "PRIMARY":
-      if (isSelected) {
-        return react$1.css`
-          background: ${exports.colorTokens.primary300};
-          border: 1.5px solid ${exports.colorTokens.primary300};
-          & > svg > path {
-            fill: ${exports.colorTokens.neutral0};
-          }
-          ${isHovered && react$1.css`
-            border: 1.5px solid ${exports.colorTokens.primary400};
-            background: ${exports.colorTokens.primary400};
-          `}
-        `;
-      }
-      return react$1.css`
-        background: ${exports.colorTokens.neutral200};
-        border: 1.5px solid ${exports.colorTokens.neutral200};
-        border-radius: 4px;
-        ${isHovered && react$1.css`
-          border: 1.5px solid ${exports.colorTokens.neutral300};
-          background: ${exports.colorTokens.neutral300};
-        `}
-
-        & > svg > path {
-          fill: ${exports.colorTokens.neutral0};
-        }
-      `;
-    case "LINE":
-      if (isSelected) {
-        return react$1.css`
-          border: 1.5px solid ${exports.colorTokens.primary300};
-          background: transparent;
-          border-radius: 4px;
-          & > svg > path {
-            fill: ${exports.colorTokens.primary300};
-          }
-          ${isHovered && react$1.css`
-            border: 1.5px solid ${exports.colorTokens.primary400};
-            & > svg > path {
-              fill: ${exports.colorTokens.primary400};
-            }
-          `}
-        `;
-      }
-      return react$1.css`
-        background: transparent;
-        border: 1.5px solid ${exports.colorTokens.neutral200};
-        border-radius: 4px;
-        & > svg > path {
-          fill: ${exports.colorTokens.neutral200};
+        const convertString = convertToString(value);
+        if (maxLength && convertString.length > maxLength) {
+          setText(convertString);
         }
-        ${isHovered && react$1.css`
-          border: 1.5px solid ${exports.colorTokens.neutral300};
-          & > svg > path {
-            fill: ${exports.colorTokens.neutral300};
-          }
-        `}
-      `;
-    default:
-      return "";
+        setText(convertToString(value));
+      }
+    }, [maxLength, value]);
+    const uniqueId = React3.useId();
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      InputWrapper,
+      {
+        htmlFor: uniqueId,
+        isFocused,
+        disabled,
+        isHovered,
+        isError,
+        direction: "column",
+        onMouseEnter: handleOnMouseEnter,
+        onMouseLeave: handleOnMouseLeave,
+        width,
+        "data-shoplflow": "text-area",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            StyledTextarea,
+            __spreadValues({
+              className: "body1_400" + (className ? ` ${className}` : ""),
+              placeholder,
+              onFocus: handleOnFocus,
+              onBlur: handleOnBlur,
+              onChange: handleOnChange,
+              name,
+              id: uniqueId,
+              value,
+              ref,
+              maxLength,
+              disabled,
+              minHeight
+            }, rest)
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(BottomElementWrapper, { children: maxLength && /* @__PURE__ */ jsxRuntime.jsx(TextCounter_default, { currentLength: String(text).length, maxLength }) })
+        ]
+      }
+    );
   }
-};
-var StyledCheckbox = styled6__default.default.button`
+);
+exports.TextArea = TextArea;
+var StyledSelectInputButton = styled6__default.default.div`
   display: flex;
+  flex-direction: row;
   align-items: center;
-  justify-content: center;
-  min-width: 16px;
-  min-height: 16px;
-  width: 16px;
-  height: 16px;
-  background: ${exports.colorTokens.neutral200};
-  border-radius: 4px;
-  box-sizing: border-box;
+  justify-content: space-between;
+  width: 100%;
+  background: ${exports.colorTokens.neutral0};
+  gap: 4px;
+  padding: 4px 4px 4px 12px;
   cursor: pointer;
-  ${({ styleVar, isSelected, isHovered }) => getStylesByStyleVariant(styleVar, isSelected, isHovered)};
-  ${({ disabled }) => getDisabledStyle(disabled)}
-`;
-var Container3 = styled6__default.default.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px;
-  width: fit-content;
-  height: fit-content;
+  ${({ disabled }) => disabled && react$1.css`
+      background-color: ${exports.colorTokens.neutral100};
+      cursor: not-allowed;
+    `}
 `;
-var Checkbox = (_a) => {
+var SelectInputButton = (_a) => {
   var _b = _a, {
-    defaultSelected,
-    isSelected,
     disabled,
-    onClick,
+    isSelected,
     onMouseEnter,
     onMouseLeave,
-    styleVar = "PRIMARY"
+    onClick,
+    onClear,
+    value,
+    placeholder,
+    label,
+    width,
+    rightSource
   } = _b, rest = __objRest(_b, [
-    "defaultSelected",
-    "isSelected",
     "disabled",
-    "onClick",
+    "isSelected",
     "onMouseEnter",
     "onMouseLeave",
-    "styleVar"
+    "onClick",
+    "onClear",
+    "value",
+    "placeholder",
+    "label",
+    "width",
+    "rightSource"
   ]);
-  const [selected, toggleSelected] = useOnToggle(isSelected, defaultSelected);
-  const [isHovered, toggleHovered] = React3.useState(false);
-  const handleMouseLeave = (e) => {
-    toggleHovered(false);
-    onMouseLeave && onMouseLeave(e);
-  };
-  const handleMouseEnter = (e) => {
-    toggleHovered(true);
-    onMouseEnter && onMouseEnter(e);
-  };
-  const handleClick = (e) => {
-    if (disabled) {
-      return;
+  const [isHovered, setIsHovered] = React3.useState(false);
+  const handleOnClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!disabled) {
+      onClick && onClick(e);
     }
-    onClick && onClick(e);
-    toggleSelected();
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Container3,
-    __spreadProps(__spreadValues({
-      onClick: handleClick,
-      onMouseLeave: handleMouseLeave,
-      onMouseEnter: handleMouseEnter,
-      disabled
-    }, rest), {
-      "data-shoplflow": "Checkbox",
-      children: /* @__PURE__ */ jsxRuntime.jsx(StyledCheckbox, { styleVar, isHovered, isSelected: selected, disabled, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M9.78822 0.297596C10.1761 -0.0955083 10.8093 -0.0997053 11.2024 0.288222C11.5653 0.646308 11.5968 1.21334 11.2943 1.60765L11.2118 1.7024L5.31714 7.7024C4.95248 8.07193 4.37282 8.09687 3.97909 7.77976L3.88476 7.69335L0.779404 4.42669C0.396475 4.02871 0.408672 3.39567 0.806647 3.01274C1.17401 2.65926 1.74167 2.64247 2.12801 2.95499L2.2206 3.03998L4.614 5.567L9.78822 0.297596Z",
-          fill: "white"
-        }
-      ) }) })
-    })
-  );
-};
-exports.Checkbox = Checkbox;
-
-// src/components/ControlButtons/Checkbox/Checkbox.types.ts
-exports.CheckboxStyleVariants = {
-  PRIMARY: "PRIMARY",
-  LINE: "LINE"
-};
-var getSelectedStyle = (isHovered) => {
-  return react$1.css`
-    & > svg > circle {
-      stroke: ${exports.colorTokens.primary300};
-    }
-    ${isHovered && react$1.css`
-      & > svg > circle {
-        stroke: ${exports.colorTokens.primary400};
-      }
-    `}
-  `;
-};
-var StyledRadio = styled6__default.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 16px;
-  min-height: 16px;
-  width: 16px;
-  height: 16px;
-  ${({ isHovered }) => react$1.css`
-    & > svg > circle {
-      stroke: ${exports.colorTokens.neutral200};
+  const handleOnClear = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!disabled) {
+      onClear && onClear(e);
     }
-    ${isHovered && react$1.css`
-      & > svg > circle {
-        stroke: ${exports.colorTokens.neutral300};
-      }
-    `}
-  `}
-  cursor: pointer;
-  ${({ isSelected, isHovered }) => isSelected && getSelectedStyle(isHovered)}
-  ${({ disabled }) => getDisabledStyle(disabled)}
-`;
-var Container4 = styled6__default.default.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  padding: 4px;
-  width: fit-content;
-  height: fit-content;
-`;
-var Radio = (_a) => {
-  var _b = _a, { isSelected, defaultSelected, disabled, onClick, onMouseEnter, onMouseLeave } = _b, rest = __objRest(_b, ["isSelected", "defaultSelected", "disabled", "onClick", "onMouseEnter", "onMouseLeave"]);
-  const [selected, toggleSelected] = useOnToggle(isSelected, defaultSelected);
-  const [isHovered, toggleHovered] = React3.useState(false);
-  const handleMouseLeave = (e) => {
-    toggleHovered(false);
-    onMouseLeave && onMouseLeave(e);
   };
-  const handleMouseEnter = (e) => {
-    toggleHovered(true);
+  const handleOnMouseEnter = (e) => {
+    setIsHovered(true);
     onMouseEnter && onMouseEnter(e);
   };
-  const handleClick = (e) => {
-    if (disabled) {
-      return;
-    }
-    onClick && onClick(e);
-    toggleSelected();
+  const handleOnMouseLeave = (e) => {
+    setIsHovered(false);
+    onMouseLeave && onMouseLeave(e);
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Container4,
+    InputWrapper,
     __spreadProps(__spreadValues({
-      onClick: handleClick,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave
+      onMouseEnter: handleOnMouseEnter,
+      onMouseLeave: handleOnMouseLeave,
+      onClick: handleOnClick,
+      isHovered,
+      isFocused: isSelected,
+      disabled,
+      width
     }, rest), {
-      "data-shoplflow": "Radio",
-      children: /* @__PURE__ */ jsxRuntime.jsx(StyledRadio, { isSelected: selected, isHovered, disabled, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "5.5", fill: "white", stroke: "#3299FE", strokeWidth: "5" }) }) })
+      "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", spacing: "spacing04", children: [
+          value && value.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(exports.Text, { typography: "body1_400", color: "neutral700", children: [
+            "+",
+            value.length - 1
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Horizontal, { align: "center", children: [
+            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.Radio = Radio;
+exports.SelectInputButton = SelectInputButton;
 /*! Bundled license information:
 
 classnames/index.js: