@shoplflow/base 0.15.0 → 0.15.1

package/dist/index.cjs

@@ -1318,6 +1318,7 @@ var getStyleByStyleVar2 = (styleVar, color) => {
     case "GHOST":
       return react$1.css`
         border: 1px solid transparent;
+        background: transparent;
         &:hover {
           background: ${exports.colorTokens.neutral400_5};
         }
@@ -1656,7 +1657,10 @@ var InputWrapper = styled5__default.default.label`
   border-radius: 6px;
   background-color: ${exports.colorTokens.neutral0};
   overflow: hidden;
-  ${({ disabled }) => getDisabledStyle(disabled)};
+  ${({ disabled }) => disabled && react$1.css`
+      background-color: ${exports.colorTokens.neutral100};
+      cursor: not-allowed;
+    `};
 `;
 
 // src/components/Icon/Icon.types.ts
@@ -2030,34 +2034,23 @@ exports.StyledInputButton = styled5__default.default.button`
   padding: 4px 4px 4px 12px;
   cursor: pointer;
   ${({ disabled }) => disabled && react$1.css`
+      background-color: ${exports.colorTokens.neutral100};
       cursor: not-allowed;
     `}
 `;
+exports.StyledInputButtonContent = styled5__default.default.input`
+  display: flex;
+  width: 100%;
+  border: none;
+  box-sizing: border-box;
+  caret-color: transparent;
+  &::placeholder {
+    color: ${exports.colorTokens.neutral350};
+  }
+`;
 var InputButton = React3.forwardRef(
   (_a, ref) => {
-    var _b = _a, {
-      value,
-      defaultValue,
-      onChange,
-      onClick,
-      isSelected,
-      disabled = false,
-      rightSource,
-      placeholder,
-      onClear,
-      width
-    } = _b, rest = __objRest(_b, [
-      "value",
-      "defaultValue",
-      "onChange",
-      "onClick",
-      "isSelected",
-      "disabled",
-      "rightSource",
-      "placeholder",
-      "onClear",
-      "width"
-    ]);
+    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"]);
     const [text, setText] = React3.useState("");
     const [isHovered, setIsHovered] = React3.useState(false);
     const convertToString = React3.useCallback((value2) => {
@@ -2108,13 +2101,13 @@ var InputButton = React3.forwardRef(
         isFocused: isSelected,
         disabled,
         width,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(exports.StyledInputButton, __spreadProps(__spreadValues({}, rest), { onClick: handleOnClick, disabled, ref, children: [
-          text && text.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", color: "neutral700", textOverflow: "ellipsis", lineClamp: 1, children: text }) : /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", color: "neutral350", textOverflow: "ellipsis", lineClamp: 1, children: placeholder }),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(exports.StyledInputButton, { onClick: handleOnClick, disabled, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(exports.StyledInputButtonContent, __spreadValues({ className: "body1_400", defaultValue: text, ref }, rest)),
           /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Horizontal, { align: "center", children: [
             value && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", onClick: handleOnClear, styleVar: "GHOST", disabled, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: assetFunction("DeleteIcon"), color: "neutral600" }) }),
             rightSource
           ] })
-        ] }))
+        ] })
       }
     );
   }