From 6e65805f63c14b506f8b590e1ff93a5e1923d125 Mon Sep 17 00:00:00 2001
From: Amr Hamdy <amrelbialy26@gmail.com>
Date: Fri, 13 Sep 2024 16:06:21 +0300
Subject: [PATCH] fix: input component

---
 .../ui/src/core/input/input.component.tsx     | 35 ++++++++-----------
 packages/ui/src/core/input/input.styles.ts    |  9 ++---
 2 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/packages/ui/src/core/input/input.component.tsx b/packages/ui/src/core/input/input.component.tsx
index bcce77fc..6e171e25 100644
--- a/packages/ui/src/core/input/input.component.tsx
+++ b/packages/ui/src/core/input/input.component.tsx
@@ -41,7 +41,7 @@ const Input = intrinsicComponent<InputProps, HTMLInputElement>(
       iconStart,
       iconEnd,
       iconChange,
-      inputActions,
+      // inputActions,
       clearIcon,
       iconClickStart,
       iconClickEnd,
@@ -196,11 +196,6 @@ const Input = intrinsicComponent<InputProps, HTMLInputElement>(
       );
     };
 
-    const renderInputActions = (inputActions: React.ReactNode): JSX.Element | undefined => {
-      if (!inputActions) return;
-      return <Styled.InputActions>{inputActions}</Styled.InputActions>;
-    };
-
     return (
       <Styled.Input
         onClick={focusOnClick ? handleFocus : undefined}
@@ -216,22 +211,22 @@ const Input = intrinsicComponent<InputProps, HTMLInputElement>(
         $error={error}
         clearIcon={clearIcon}
         isHovering={rest.isHovering}
-        $isSelectedItems={Boolean(isSelectedItems || inputActions)}
+        $isSelectedItems={Boolean(isSelectedItems)}
         {...(InputPropsData || {})}
       >
-        <Styled.InputContent>
-          {renderIcon(iconStart, 'start')}
-          {renderField()}
-          {renderCopyIcon(<CopyOutline size={getIconSize(size, 'copy')} />)}
-          {showCopyMessage && renderCopyText()}
-          {renderClearIcon()}
-          {inputType === Type.Password && renderPasswordIcon()}
-          {renderIcon(iconEnd, 'end')}
-          {renderIcon(iconChange, '')}
-          {children && <>{children}</>}
-        </Styled.InputContent>
-
-        {renderInputActions(inputActions)}
+        {/* <Styled.InputContent> */}
+        {renderIcon(iconStart, 'start')}
+        {renderField()}
+        {renderCopyIcon(<CopyOutline size={getIconSize(size, 'copy')} />)}
+        {showCopyMessage && renderCopyText()}
+        {renderClearIcon()}
+        {inputType === Type.Password && renderPasswordIcon()}
+        {renderIcon(iconEnd, 'end')}
+        {renderIcon(iconChange, '')}
+        {children && <>{children}</>}
+        {/* </Styled.InputContent> */}
+
+        {/* {renderInputActions(inputActions)} */}
       </Styled.Input>
     );
   }
diff --git a/packages/ui/src/core/input/input.styles.ts b/packages/ui/src/core/input/input.styles.ts
index 710a9ee9..62d4e1cd 100644
--- a/packages/ui/src/core/input/input.styles.ts
+++ b/packages/ui/src/core/input/input.styles.ts
@@ -100,9 +100,10 @@ const Input = styled.div.attrs({
   }) => css`
     position: relative;
     display: flex;
-    flex-direction: column;
-    align-items: stretch;
+    align-items: center;
+    /* flex-direction: column; */
     box-sizing: border-box;
+    column-gap: 8px;
     cursor: text;
     transition: all 100ms ease-out;
     width: ${$fullWidth ? '100%' : '300px'};
@@ -270,10 +271,10 @@ const InputActions = styled.div.attrs({
 const InputContent = styled.div.attrs({
   className: generateClassNames(baseClassName, 'inputContent'),
 })`
-  display: flex;
+  /* display: flex;
   align-items: center;
   width: 100%;
-  box-sizing: border-box;
+  box-sizing: border-box; */
 `;
 
 const Styled = applyDisplayNames({