@shoplflow/base 0.45.12 → 0.45.13

package/dist/index.cjs

@@ -3630,7 +3630,7 @@ exports.TreeItem[exports.TREE_SYMBOL_KEY] = true;
 Tree.Item = exports.TreeItem;
 exports.Tree = Tree;
 var StyledInput = styled6__default.default.input`
-  padding: ${({ sizeVar }) => sizeVar === "S" ? "0 0 0 8px" : "4px 0 4px 12px"};
+  padding: ${({ sizeVar }) => sizeVar === "S" ? "0 8px" : "4px 12px"};
   background-color: transparent;
   display: flex;
   min-width: ${({ minWidth }) => minWidth || "64px"};
@@ -3654,6 +3654,7 @@ var StyledInput = styled6__default.default.input`
     padding: 4px 8px;
     text-align: center;
     -moz-appearance: textfield;
+    appearance: textfield;
   }
 
   *,
@@ -3663,10 +3664,27 @@ var StyledInput = styled6__default.default.input`
   }
 `;
 var RightElementWrapper2 = styled6__default.default.div`
+  padding: ${({ sizeVar, type, initialType }) => {
+  if (initialType === "password" || type === "password") {
+    return "0";
+  }
+  return sizeVar === "S" ? "0 8px 0 0" : "0 12px 0 0";
+}};
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 0 8px 0 0;
+  height: 100%;
+`;
+var ClearIconButton = styled6__default.default(StyledIconButton)`
+  position: absolute;
+  right: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: ${exports.colorTokens.neutral0} !important;
+
+  &:hover {
+    background-color: ${exports.colorTokens.neutral100} !important;
+  }
 `;
 var Wrapper = styled6__default.default.div`
   display: flex;
@@ -3675,9 +3693,9 @@ var Wrapper = styled6__default.default.div`
   align-items: center;
   gap: 2px;
 `;
-var TextCounter = ({ currentLength, maxLength }) => {
+var TextCounter = ({ currentLength, maxLength, isError }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "caption_400", color: "neutral400", children: currentLength }),
+    /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "caption_400", color: isError ? "red300" : "neutral400", children: currentLength }),
     /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "caption_400", color: "neutral350", children: "/" }),
     /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "caption_400", color: "neutral350", children: maxLength })
   ] });
@@ -3759,7 +3777,6 @@ var InputWrapper = styled6__default.default.label`
   borderRadius
 })};
   justify-content: space-between;
-  gap: ${({ gap, sizeVar }) => gap || (sizeVar === "S" ? "4px" : "8px")};
   border: 1px solid ${(props) => getBorderColorByStatus2(props)};
   background-color: ${exports.colorTokens.neutral0};
   overflow: hidden;
@@ -3943,36 +3960,38 @@ var Input = React3.forwardRef(
         gap,
         sizeVar,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            StyledInput,
-            __spreadValues({
-              onFocus: handleOnFocus,
-              onBlur: handleOnBlur,
-              onChange: handleOnChange,
-              onKeyDown: handleOnKeyDown,
-              maxLength,
-              disabled,
-              value: text,
-              type,
-              id: uniqueId,
-              ref: refs,
-              minWidth,
-              sizeVar,
-              className: "body1_400" + (className ? ` ${className}` : "")
-            }, rest)
-          ),
-          !(type === "number") && /* @__PURE__ */ jsxRuntime.jsxs(RightElementWrapper2, { children: [
-            maxLength && isFocused && /* @__PURE__ */ jsxRuntime.jsx(TextCounter_default, { currentLength: String(text).length, maxLength }),
-            onClear && isFocused && Boolean(String(text).length > 0) && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", onClick: handleOnClear, styleVar: "GHOST", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: assetFunction("DeleteIcon"), color: "neutral350" }) }),
-            initialType === "password" && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", onClick: handleTogglePasswordType, styleVar: "GHOST", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", width: "100%" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              StyledInput,
+              __spreadValues({
+                onFocus: handleOnFocus,
+                onBlur: handleOnBlur,
+                onChange: handleOnChange,
+                onKeyDown: handleOnKeyDown,
+                maxLength,
+                disabled,
+                value: text,
+                type,
+                id: uniqueId,
+                ref: refs,
+                minWidth,
+                sizeVar,
+                className: "body1_400" + (className ? ` ${className}` : "")
+              }, rest)
+            ),
+            onClear && isHovered && Boolean(String(text).length > 0) && /* @__PURE__ */ jsxRuntime.jsx(ClearIconButton, { sizeVar, onClick: handleOnClear, styleVar: "GHOST", isHovered: false, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: assetFunction("DeleteIcon"), color: "neutral350" }) })
+          ] }),
+          !(type === "number") && (Boolean(maxLength && isFocused) || Boolean(initialType === "password") || Boolean(rightSource)) && /* @__PURE__ */ jsxRuntime.jsxs(RightElementWrapper2, { type, sizeVar, initialType, children: [
+            maxLength && isFocused && /* @__PURE__ */ jsxRuntime.jsx(TextCounter_default, { currentLength: String(text).length, maxLength, isError }),
+            initialType === "password" && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar, onClick: handleTogglePasswordType, styleVar: "GHOST", children: /* @__PURE__ */ jsxRuntime.jsx(
               exports.Icon,
               {
                 color: "neutral600",
                 iconSource: assetFunction(type === "password" ? "ViewOffIcon" : "ViewOnIcon")
               }
-            ) })
-          ] }),
-          rightSource && rightSource
+            ) }),
+            rightSource && rightSource
+          ] })
         ]
       }
     );

package/dist/index.js

@@ -3603,7 +3603,7 @@ TreeItem[TREE_SYMBOL_KEY] = true;
 Tree.Item = TreeItem;
 var Tree_default = Tree;
 var StyledInput = styled6.input`
-  padding: ${({ sizeVar }) => sizeVar === "S" ? "0 0 0 8px" : "4px 0 4px 12px"};
+  padding: ${({ sizeVar }) => sizeVar === "S" ? "0 8px" : "4px 12px"};
   background-color: transparent;
   display: flex;
   min-width: ${({ minWidth }) => minWidth || "64px"};
@@ -3627,6 +3627,7 @@ var StyledInput = styled6.input`
     padding: 4px 8px;
     text-align: center;
     -moz-appearance: textfield;
+    appearance: textfield;
   }
 
   *,
@@ -3636,10 +3637,27 @@ var StyledInput = styled6.input`
   }
 `;
 var RightElementWrapper2 = styled6.div`
+  padding: ${({ sizeVar, type, initialType }) => {
+  if (initialType === "password" || type === "password") {
+    return "0";
+  }
+  return sizeVar === "S" ? "0 8px 0 0" : "0 12px 0 0";
+}};
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 0 8px 0 0;
+  height: 100%;
+`;
+var ClearIconButton = styled6(StyledIconButton)`
+  position: absolute;
+  right: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: ${colorTokens.neutral0} !important;
+
+  &:hover {
+    background-color: ${colorTokens.neutral100} !important;
+  }
 `;
 var Wrapper = styled6.div`
   display: flex;
@@ -3648,9 +3666,9 @@ var Wrapper = styled6.div`
   align-items: center;
   gap: 2px;
 `;
-var TextCounter = ({ currentLength, maxLength }) => {
+var TextCounter = ({ currentLength, maxLength, isError }) => {
   return /* @__PURE__ */ jsxs(Wrapper, { children: [
-    /* @__PURE__ */ jsx(Text_default, { typography: "caption_400", color: "neutral400", children: currentLength }),
+    /* @__PURE__ */ jsx(Text_default, { typography: "caption_400", color: isError ? "red300" : "neutral400", children: currentLength }),
     /* @__PURE__ */ jsx(Text_default, { typography: "caption_400", color: "neutral350", children: "/" }),
     /* @__PURE__ */ jsx(Text_default, { typography: "caption_400", color: "neutral350", children: maxLength })
   ] });
@@ -3732,7 +3750,6 @@ var InputWrapper = styled6.label`
   borderRadius
 })};
   justify-content: space-between;
-  gap: ${({ gap, sizeVar }) => gap || (sizeVar === "S" ? "4px" : "8px")};
   border: 1px solid ${(props) => getBorderColorByStatus2(props)};
   background-color: ${colorTokens.neutral0};
   overflow: hidden;
@@ -3916,36 +3933,38 @@ var Input = forwardRef(
         gap,
         sizeVar,
         children: [
-          /* @__PURE__ */ jsx(
-            StyledInput,
-            __spreadValues({
-              onFocus: handleOnFocus,
-              onBlur: handleOnBlur,
-              onChange: handleOnChange,
-              onKeyDown: handleOnKeyDown,
-              maxLength,
-              disabled,
-              value: text,
-              type,
-              id: uniqueId,
-              ref: refs,
-              minWidth,
-              sizeVar,
-              className: "body1_400" + (className ? ` ${className}` : "")
-            }, rest)
-          ),
-          !(type === "number") && /* @__PURE__ */ jsxs(RightElementWrapper2, { children: [
-            maxLength && isFocused && /* @__PURE__ */ jsx(TextCounter_default, { currentLength: String(text).length, maxLength }),
-            onClear && isFocused && Boolean(String(text).length > 0) && /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", onClick: handleOnClear, styleVar: "GHOST", children: /* @__PURE__ */ jsx(Icon_default, { iconSource: assetFunction("DeleteIcon"), color: "neutral350" }) }),
-            initialType === "password" && /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", onClick: handleTogglePasswordType, styleVar: "GHOST", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%" }, children: [
+            /* @__PURE__ */ jsx(
+              StyledInput,
+              __spreadValues({
+                onFocus: handleOnFocus,
+                onBlur: handleOnBlur,
+                onChange: handleOnChange,
+                onKeyDown: handleOnKeyDown,
+                maxLength,
+                disabled,
+                value: text,
+                type,
+                id: uniqueId,
+                ref: refs,
+                minWidth,
+                sizeVar,
+                className: "body1_400" + (className ? ` ${className}` : "")
+              }, rest)
+            ),
+            onClear && isHovered && Boolean(String(text).length > 0) && /* @__PURE__ */ jsx(ClearIconButton, { sizeVar, onClick: handleOnClear, styleVar: "GHOST", isHovered: false, children: /* @__PURE__ */ jsx(Icon_default, { iconSource: assetFunction("DeleteIcon"), color: "neutral350" }) })
+          ] }),
+          !(type === "number") && (Boolean(maxLength && isFocused) || Boolean(initialType === "password") || Boolean(rightSource)) && /* @__PURE__ */ jsxs(RightElementWrapper2, { type, sizeVar, initialType, children: [
+            maxLength && isFocused && /* @__PURE__ */ jsx(TextCounter_default, { currentLength: String(text).length, maxLength, isError }),
+            initialType === "password" && /* @__PURE__ */ jsx(IconButton_default, { sizeVar, onClick: handleTogglePasswordType, styleVar: "GHOST", children: /* @__PURE__ */ jsx(
               Icon_default,
               {
                 color: "neutral600",
                 iconSource: assetFunction(type === "password" ? "ViewOffIcon" : "ViewOnIcon")
               }
-            ) })
-          ] }),
-          rightSource && rightSource
+            ) }),
+            rightSource && rightSource
+          ] })
         ]
       }
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.45.12",
+  "version": "0.45.13",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {