From b5a9cac6a9bcce34eb8124482626c1b11a01746a Mon Sep 17 00:00:00 2001
From: Sam Ferrero <ferrerocompanylimited@gmail.com>
Date: Tue, 7 Nov 2023 19:17:37 +0000
Subject: [PATCH 1/8] chore: rename inputWrapper

---
 .../Common/Layout/Header/Header.tsx           | 20 ++++++++-----
 .../Global/AccountNameField/index.tsx         | 10 +++----
 .../components/Global/ChainSelect/index.tsx   |  6 ++--
 .../Global/PredKeysSelect/index.tsx           |  6 ++--
 .../Global/PublicKeyField/index.tsx           |  4 +--
 .../FormFieldHeader/FormFieldHeader.css.ts}   |  0
 .../FormFieldHeader/FormFieldHeader.tsx}      |  6 ++--
 .../FormFieldHelper/FormFieldHelper.css.ts}   |  0
 .../FormFieldHelper/FormFieldHelper.tsx}      |  6 ++--
 .../FormFieldWrapper.context.ts}              |  4 +--
 .../FormFieldWrapper.css.ts}                  |  2 +-
 .../FormFieldWrapper.stories.tsx}             | 16 +++++-----
 .../FormFieldWrapper.tsx}                     | 29 ++++++++++++-------
 .../components/Form/FormFieldWrapper/index.ts |  4 +++
 .../src/components/Form/Input/Input.tsx       |  7 +++--
 .../src/components/Form/InputWrapper/index.ts |  1 -
 .../src/components/Form/Select/Select.tsx     |  4 +--
 .../Form/SelectField/SelectField.stories.tsx  |  4 +--
 .../Form/SelectField/SelectField.tsx          | 11 +++----
 .../Form/TextField/TextField.stories.tsx      |  4 +--
 .../components/Form/TextField/TextField.tsx   | 15 ++++++----
 .../src/components/Form/Textarea/Textarea.tsx |  4 +--
 .../Form/TextareaField/TextareaField.tsx      | 10 +++----
 .../react-ui/src/components/Form/index.ts     |  5 +++-
 .../libs/react-ui/src/components/index.ts     |  4 +--
 packages/libs/react-ui/src/index.ts           |  4 +--
 26 files changed, 106 insertions(+), 80 deletions(-)
 rename packages/libs/react-ui/src/components/Form/{InputWrapper/InputHeader/InputHeader.css.ts => FormFieldWrapper/FormFieldHeader/FormFieldHeader.css.ts} (100%)
 rename packages/libs/react-ui/src/components/Form/{InputWrapper/InputHeader/InputHeader.tsx => FormFieldWrapper/FormFieldHeader/FormFieldHeader.tsx} (78%)
 rename packages/libs/react-ui/src/components/Form/{InputWrapper/InputHelper/InputHelper.css.ts => FormFieldWrapper/FormFieldHelper/FormFieldHelper.css.ts} (100%)
 rename packages/libs/react-ui/src/components/Form/{InputWrapper/InputHelper/InputHelper.tsx => FormFieldWrapper/FormFieldHelper/FormFieldHelper.tsx} (63%)
 rename packages/libs/react-ui/src/components/Form/{InputWrapper/InputWrapper.context.ts => FormFieldWrapper/FormFieldWrapper.context.ts} (72%)
 rename packages/libs/react-ui/src/components/Form/{InputWrapper/InputWrapper.css.ts => FormFieldWrapper/FormFieldWrapper.css.ts} (95%)
 rename packages/libs/react-ui/src/components/Form/{InputWrapper/InputWrapper.stories.tsx => FormFieldWrapper/FormFieldWrapper.stories.tsx} (86%)
 rename packages/libs/react-ui/src/components/Form/{InputWrapper/InputWrapper.tsx => FormFieldWrapper/FormFieldWrapper.tsx} (50%)
 create mode 100644 packages/libs/react-ui/src/components/Form/FormFieldWrapper/index.ts
 delete mode 100644 packages/libs/react-ui/src/components/Form/InputWrapper/index.ts

diff --git a/packages/apps/graph-client/src/components/Common/Layout/Header/Header.tsx b/packages/apps/graph-client/src/components/Common/Layout/Header/Header.tsx
index d6b89edb24..3961e65870 100644
--- a/packages/apps/graph-client/src/components/Common/Layout/Header/Header.tsx
+++ b/packages/apps/graph-client/src/components/Common/Layout/Header/Header.tsx
@@ -1,6 +1,12 @@
 import routes from '@/constants/routes';
 import { Text } from '@components/text';
-import { Button, Grid, Input, InputWrapper, Select } from '@kadena/react-ui';
+import {
+  Button,
+  FormFieldWrapper,
+  Grid,
+  Input,
+  Select,
+} from '@kadena/react-ui';
 import { useRouter } from 'next/router';
 import type { FC } from 'react';
 import React, { useState } from 'react';
@@ -117,7 +123,7 @@ const Header: FC<IHeaderProps> = (props) => {
 
         <Grid.Root columns={searchType.startsWith('account') ? 4 : 3}>
           <Grid.Item>
-            <InputWrapper htmlFor="search-type" label="Search Type">
+            <FormFieldWrapper htmlFor="search-type" label="Search Type">
               <Select
                 ariaLabel="search-type"
                 id="search-type"
@@ -129,10 +135,10 @@ const Header: FC<IHeaderProps> = (props) => {
                 <option value="event">Event</option>
                 <option value="block">Block</option>
               </Select>
-            </InputWrapper>
+            </FormFieldWrapper>
           </Grid.Item>
           <Grid.Item>
-            <InputWrapper
+            <FormFieldWrapper
               htmlFor="search-field"
               label={searchTypeLabels[searchType]}
             >
@@ -143,18 +149,18 @@ const Header: FC<IHeaderProps> = (props) => {
                 onChange={handleSearchFieldChange}
                 onKeyDown={handleKeyPress}
               />
-            </InputWrapper>
+            </FormFieldWrapper>
           </Grid.Item>
           {searchType.startsWith('account') && (
             <Grid.Item>
-              <InputWrapper htmlFor="module" label="Module name">
+              <FormFieldWrapper htmlFor="module" label="Module name">
                 <Input
                   id="module"
                   value={moduleField}
                   placeholder="coin"
                   onChange={(event) => setModuleField(event.target.value)}
                 />
-              </InputWrapper>
+              </FormFieldWrapper>
             </Grid.Item>
           )}
           <Grid.Item>
diff --git a/packages/apps/tools/src/components/Global/AccountNameField/index.tsx b/packages/apps/tools/src/components/Global/AccountNameField/index.tsx
index ad51ff3cad..e6e0280d5a 100644
--- a/packages/apps/tools/src/components/Global/AccountNameField/index.tsx
+++ b/packages/apps/tools/src/components/Global/AccountNameField/index.tsx
@@ -2,14 +2,14 @@ import { useWalletConnectClient } from '@/context/connect-wallet-context';
 import { useDidUpdateEffect } from '@/hooks';
 import { getAccounts } from '@/utils/wallet';
 import type {
+  IFormFieldWrapperProps,
   IInputProps,
-  IInputWrapperProps,
   ISelectProps,
 } from '@kadena/react-ui';
 import {
+  FormFieldWrapper,
   IconButton,
   Input,
-  InputWrapper,
   Select,
   maskValue,
 } from '@kadena/react-ui';
@@ -21,7 +21,7 @@ import * as z from 'zod';
 import { accountInputWrapperStyle } from './styles.css';
 
 interface IAccountNameFieldProps
-  extends Partial<Omit<IInputWrapperProps, 'children'>> {
+  extends Partial<Omit<IFormFieldWrapperProps, 'children'>> {
   inputProps: Partial<
     Pick<
       IInputProps,
@@ -98,7 +98,7 @@ export const AccountNameField: FC<IAccountNameFieldProps> = ({
 
   return (
     <div className={accountInputWrapperStyle}>
-      <InputWrapper
+      <FormFieldWrapper
         label={t('Account')}
         htmlFor={elementId}
         status={error ? 'negative' : status}
@@ -106,7 +106,7 @@ export const AccountNameField: FC<IAccountNameFieldProps> = ({
         {...rest}
       >
         {lookup[mode]}
-      </InputWrapper>
+      </FormFieldWrapper>
       {accounts?.length && (
         <IconButton
           icon={mode === 'input' ? 'Close' : 'Edit'}
diff --git a/packages/apps/tools/src/components/Global/ChainSelect/index.tsx b/packages/apps/tools/src/components/Global/ChainSelect/index.tsx
index e2d7c98967..f1b5d996a6 100644
--- a/packages/apps/tools/src/components/Global/ChainSelect/index.tsx
+++ b/packages/apps/tools/src/components/Global/ChainSelect/index.tsx
@@ -1,7 +1,7 @@
 import type { ChainwebChainId } from '@kadena/chainweb-node-client';
 import { CHAINS } from '@kadena/chainweb-node-client';
 import type { ISelectProps } from '@kadena/react-ui';
-import { InputWrapper, Select } from '@kadena/react-ui';
+import { FormFieldWrapper, Select } from '@kadena/react-ui';
 import type { FC, FormEventHandler } from 'react';
 import React, { useCallback } from 'react';
 
@@ -32,7 +32,7 @@ const ChainSelect: FC<
   });
 
   return (
-    <InputWrapper label="Chain ID" htmlFor={ELEMENT_ID}>
+    <FormFieldWrapper label="Chain ID" htmlFor={ELEMENT_ID}>
       <Select
         {...rest}
         id={ELEMENT_ID}
@@ -43,7 +43,7 @@ const ChainSelect: FC<
       >
         {options}
       </Select>
-    </InputWrapper>
+    </FormFieldWrapper>
   );
 };
 
diff --git a/packages/apps/tools/src/components/Global/PredKeysSelect/index.tsx b/packages/apps/tools/src/components/Global/PredKeysSelect/index.tsx
index b90eb8d2c3..da5fc7fea8 100644
--- a/packages/apps/tools/src/components/Global/PredKeysSelect/index.tsx
+++ b/packages/apps/tools/src/components/Global/PredKeysSelect/index.tsx
@@ -1,5 +1,5 @@
 import type { ISelectProps } from '@kadena/react-ui';
-import { InputWrapper, Select } from '@kadena/react-ui';
+import { FormFieldWrapper, Select } from '@kadena/react-ui';
 
 import type { FC, FormEventHandler } from 'react';
 import React, { useCallback } from 'react';
@@ -34,7 +34,7 @@ const PredKeysSelect: FC<
   });
 
   return (
-    <InputWrapper label="Predicate" htmlFor={ELEMENT_ID}>
+    <FormFieldWrapper label="Predicate" htmlFor={ELEMENT_ID}>
       <Select
         {...rest}
         id={ELEMENT_ID}
@@ -44,7 +44,7 @@ const PredKeysSelect: FC<
       >
         {options}
       </Select>
-    </InputWrapper>
+    </FormFieldWrapper>
   );
 };
 
diff --git a/packages/apps/tools/src/components/Global/PublicKeyField/index.tsx b/packages/apps/tools/src/components/Global/PublicKeyField/index.tsx
index 1fc33dbd14..14181a0b5a 100644
--- a/packages/apps/tools/src/components/Global/PublicKeyField/index.tsx
+++ b/packages/apps/tools/src/components/Global/PublicKeyField/index.tsx
@@ -1,4 +1,4 @@
-import type { IInputProps, IInputWrapperProps } from '@kadena/react-ui';
+import type { IFormFieldWrapperProps, IInputProps } from '@kadena/react-ui';
 import { TextField } from '@kadena/react-ui';
 
 import useTranslation from 'next-translate/useTranslation';
@@ -8,7 +8,7 @@ import type { FieldError } from 'react-hook-form';
 import { publicKeyFieldStyles } from './styles.css';
 
 interface IPublicKeyFieldProps
-  extends Partial<Omit<IInputWrapperProps, 'children'>> {
+  extends Partial<Omit<IFormFieldWrapperProps, 'children'>> {
   inputProps: Partial<
     Pick<
       IInputProps,
diff --git a/packages/libs/react-ui/src/components/Form/InputWrapper/InputHeader/InputHeader.css.ts b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldHeader/FormFieldHeader.css.ts
similarity index 100%
rename from packages/libs/react-ui/src/components/Form/InputWrapper/InputHeader/InputHeader.css.ts
rename to packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldHeader/FormFieldHeader.css.ts
diff --git a/packages/libs/react-ui/src/components/Form/InputWrapper/InputHeader/InputHeader.tsx b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldHeader/FormFieldHeader.tsx
similarity index 78%
rename from packages/libs/react-ui/src/components/Form/InputWrapper/InputHeader/InputHeader.tsx
rename to packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldHeader/FormFieldHeader.tsx
index 863bbad572..c2682c0ab3 100644
--- a/packages/libs/react-ui/src/components/Form/InputWrapper/InputHeader/InputHeader.tsx
+++ b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldHeader/FormFieldHeader.tsx
@@ -2,16 +2,16 @@ import { SystemIcon } from '@components/Icon';
 import { Label } from '@components/Typography';
 import type { FC } from 'react';
 import React from 'react';
-import { headerClass, infoClass, tagClass } from './InputHeader.css';
+import { headerClass, infoClass, tagClass } from './FormFieldHeader.css';
 
-export interface IInputHeaderProps {
+export interface IFormFieldHeaderProps {
   label: string;
   htmlFor: string;
   tag?: string;
   info?: string;
 }
 
-export const InputHeader: FC<IInputHeaderProps> = ({
+export const FormFieldHeader: FC<IFormFieldHeaderProps> = ({
   label,
   htmlFor,
   tag,
diff --git a/packages/libs/react-ui/src/components/Form/InputWrapper/InputHelper/InputHelper.css.ts b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldHelper/FormFieldHelper.css.ts
similarity index 100%
rename from packages/libs/react-ui/src/components/Form/InputWrapper/InputHelper/InputHelper.css.ts
rename to packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldHelper/FormFieldHelper.css.ts
diff --git a/packages/libs/react-ui/src/components/Form/InputWrapper/InputHelper/InputHelper.tsx b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldHelper/FormFieldHelper.tsx
similarity index 63%
rename from packages/libs/react-ui/src/components/Form/InputWrapper/InputHelper/InputHelper.tsx
rename to packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldHelper/FormFieldHelper.tsx
index 68c7b4df46..a0f862d1e8 100644
--- a/packages/libs/react-ui/src/components/Form/InputWrapper/InputHelper/InputHelper.tsx
+++ b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldHelper/FormFieldHelper.tsx
@@ -1,13 +1,13 @@
 import { SystemIcon } from '@components/Icon';
 import type { FC } from 'react';
 import React from 'react';
-import { helperClass, helperIconClass } from './InputHelper.css';
+import { helperClass, helperIconClass } from './FormFieldHelper.css';
 
-interface IInputHelperProps {
+interface IFormFieldHelperProps {
   children: React.ReactNode;
 }
 
-export const InputHelper: FC<IInputHelperProps> = ({ children }) => {
+export const FormFieldHelper: FC<IFormFieldHelperProps> = ({ children }) => {
   return (
     <span className={helperClass}>
       <span className={helperIconClass}>
diff --git a/packages/libs/react-ui/src/components/Form/InputWrapper/InputWrapper.context.ts b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.context.ts
similarity index 72%
rename from packages/libs/react-ui/src/components/Form/InputWrapper/InputWrapper.context.ts
rename to packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.context.ts
index 3289393dee..d5a42624a8 100644
--- a/packages/libs/react-ui/src/components/Form/InputWrapper/InputWrapper.context.ts
+++ b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.context.ts
@@ -5,12 +5,12 @@ import type { FormFieldStatus } from '../Form.css';
 
 export type OpenSections = string[];
 
-interface IInputWrapperContext {
+interface IFormFieldWrapperContext {
   status?: FormFieldStatus;
   leadingTextWidth?: keyof typeof vars.sizes;
 }
 
-export const InputWrapperContext = createContext<IInputWrapperContext>({
+export const FormFieldWrapperContext = createContext<IFormFieldWrapperContext>({
   status: undefined,
   leadingTextWidth: undefined,
 });
diff --git a/packages/libs/react-ui/src/components/Form/InputWrapper/InputWrapper.css.ts b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.css.ts
similarity index 95%
rename from packages/libs/react-ui/src/components/Form/InputWrapper/InputWrapper.css.ts
rename to packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.css.ts
index 00f2d664d1..e5172a483f 100644
--- a/packages/libs/react-ui/src/components/Form/InputWrapper/InputWrapper.css.ts
+++ b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.css.ts
@@ -6,7 +6,7 @@ import { statusColor, statusOutlineColor } from '../Form.css';
 import {
   helperIconColor,
   helperTextColor,
-} from './InputHelper/InputHelper.css';
+} from './FormFieldHelper/FormFieldHelper.css';
 
 const statusOptions: Record<FormFieldStatus, FormFieldStatus> = {
   disabled: 'disabled',
diff --git a/packages/libs/react-ui/src/components/Form/InputWrapper/InputWrapper.stories.tsx b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.stories.tsx
similarity index 86%
rename from packages/libs/react-ui/src/components/Form/InputWrapper/InputWrapper.stories.tsx
rename to packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.stories.tsx
index dd7a49d87f..8dff25fba2 100644
--- a/packages/libs/react-ui/src/components/Form/InputWrapper/InputWrapper.stories.tsx
+++ b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.stories.tsx
@@ -1,25 +1,25 @@
-import type { IInputWrapperProps } from '@components/Form';
-import { Input, InputWrapper } from '@components/Form';
+import type { IFormFieldWrapperProps } from '@components/Form';
+import { FormFieldWrapper, Input } from '@components/Form';
 import type { SystemIcon } from '@components/Icon';
 import type { Meta, StoryObj } from '@storybook/react';
 import { vars } from '@theme/vars.css';
 import React from 'react';
-import { statusVariant } from './InputWrapper.css';
+import { statusVariant } from './FormFieldWrapper.css';
 
 type StoryProps = {
   helperText: string;
   leadingText: string;
   icon: keyof typeof SystemIcon;
   rightIcon: keyof typeof SystemIcon;
-} & IInputWrapperProps;
+} & IFormFieldWrapperProps;
 
 const meta: Meta<StoryProps> = {
-  title: 'Form/InputWrapper',
+  title: 'Form/FormFieldWrapper',
   parameters: {
     docs: {
       description: {
         component:
-          'The InputWrapper component is intended to be used to wrap one or more form input components to provide them with a shared and optional label, tag, info, helper text and status colors.',
+          'The FormFieldWrapper component is intended to be used to wrap one or more form input components to provide them with a shared and optional label, tag, info, helper text and status colors.',
       },
     },
   },
@@ -113,7 +113,7 @@ export const Group: Story = {
     leadingTextWidth,
   }) => {
     return (
-      <InputWrapper
+      <FormFieldWrapper
         tag={tag}
         info={info}
         label={label}
@@ -135,7 +135,7 @@ export const Group: Story = {
           disabled={disabled}
           leadingText="Leading 2"
         />
-      </InputWrapper>
+      </FormFieldWrapper>
     );
   },
 };
diff --git a/packages/libs/react-ui/src/components/Form/InputWrapper/InputWrapper.tsx b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.tsx
similarity index 50%
rename from packages/libs/react-ui/src/components/Form/InputWrapper/InputWrapper.tsx
rename to packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.tsx
index b45b8a6320..03796a235a 100644
--- a/packages/libs/react-ui/src/components/Form/InputWrapper/InputWrapper.tsx
+++ b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.tsx
@@ -3,13 +3,15 @@ import type { FC, FunctionComponentElement } from 'react';
 import React from 'react';
 import type { vars } from 'src/styles';
 import type { FormFieldStatus } from '../Form.css';
-import type { IInputHeaderProps } from './InputHeader/InputHeader';
-import { InputHeader } from './InputHeader/InputHeader';
-import { InputHelper } from './InputHelper/InputHelper';
-import { InputWrapperContext } from './InputWrapper.context';
-import { statusVariant } from './InputWrapper.css';
 
-export interface IInputWrapperProps extends Omit<IInputHeaderProps, 'label'> {
+import type { IFormFieldHeaderProps } from './FormFieldHeader/FormFieldHeader';
+import { FormFieldHeader } from './FormFieldHeader/FormFieldHeader';
+import { FormFieldHelper } from './FormFieldHelper/FormFieldHelper';
+import { FormFieldWrapperContext } from './FormFieldWrapper.context';
+import { statusVariant } from './FormFieldWrapper.css';
+
+export interface IFormFieldWrapperProps
+  extends Omit<IFormFieldHeaderProps, 'label'> {
   children:
     | FunctionComponentElement<IInputProps>
     | FunctionComponentElement<IInputProps>[];
@@ -20,7 +22,7 @@ export interface IInputWrapperProps extends Omit<IInputHeaderProps, 'label'> {
   leadingTextWidth?: keyof typeof vars.sizes;
 }
 
-export const InputWrapper: FC<IInputWrapperProps> = ({
+export const FormFieldWrapper: FC<IFormFieldWrapperProps> = ({
   status,
   disabled,
   children,
@@ -34,14 +36,19 @@ export const InputWrapper: FC<IInputWrapperProps> = ({
   const statusVal = disabled === true ? 'disabled' : status;
 
   return (
-    <InputWrapperContext.Provider value={{ status, leadingTextWidth }}>
+    <FormFieldWrapperContext.Provider value={{ status, leadingTextWidth }}>
       <div className={statusVal ? statusVariant[statusVal] : undefined}>
         {label !== undefined && (
-          <InputHeader htmlFor={htmlFor} label={label} tag={tag} info={info} />
+          <FormFieldHeader
+            htmlFor={htmlFor}
+            label={label}
+            tag={tag}
+            info={info}
+          />
         )}
         <div className="inputGroup">{children}</div>
-        {Boolean(helperText) && <InputHelper>{helperText}</InputHelper>}
+        {Boolean(helperText) && <FormFieldHelper>{helperText}</FormFieldHelper>}
       </div>
-    </InputWrapperContext.Provider>
+    </FormFieldWrapperContext.Provider>
   );
 };
diff --git a/packages/libs/react-ui/src/components/Form/FormFieldWrapper/index.ts b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/index.ts
new file mode 100644
index 0000000000..f1ce23ecc3
--- /dev/null
+++ b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/index.ts
@@ -0,0 +1,4 @@
+export {
+  FormFieldWrapper,
+  type IFormFieldWrapperProps,
+} from './FormFieldWrapper';
diff --git a/packages/libs/react-ui/src/components/Form/Input/Input.tsx b/packages/libs/react-ui/src/components/Form/Input/Input.tsx
index 78a4bf37b4..f6fde4ad58 100644
--- a/packages/libs/react-ui/src/components/Form/Input/Input.tsx
+++ b/packages/libs/react-ui/src/components/Form/Input/Input.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import type { FC, InputHTMLAttributes } from 'react';
 import React, { forwardRef, useContext } from 'react';
 import { baseContainerClass, baseOutlinedClass } from '../Form.css';
-import { InputWrapperContext } from '../InputWrapper/InputWrapper.context';
+import { FormFieldWrapperContext } from '../FormFieldWrapper/FormFieldWrapper.context';
 import {
   disabledClass,
   inputClass,
@@ -43,8 +43,9 @@ export const Input: FC<IInputProps> = forwardRef<HTMLInputElement, IInputProps>(
     },
     ref,
   ) {
-    const { status, leadingTextWidth: wrapperLeadingTextWidth } =
-      useContext(InputWrapperContext);
+    const { status, leadingTextWidth: wrapperLeadingTextWidth } = useContext(
+      FormFieldWrapperContext,
+    );
 
     const leadingTextWidth = propLeadingTextWidth || wrapperLeadingTextWidth;
 
diff --git a/packages/libs/react-ui/src/components/Form/InputWrapper/index.ts b/packages/libs/react-ui/src/components/Form/InputWrapper/index.ts
deleted file mode 100644
index 421cef50c9..0000000000
--- a/packages/libs/react-ui/src/components/Form/InputWrapper/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { InputWrapper, type IInputWrapperProps } from './InputWrapper';
diff --git a/packages/libs/react-ui/src/components/Form/Select/Select.tsx b/packages/libs/react-ui/src/components/Form/Select/Select.tsx
index 65d58e1196..273a6bd240 100644
--- a/packages/libs/react-ui/src/components/Form/Select/Select.tsx
+++ b/packages/libs/react-ui/src/components/Form/Select/Select.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import type { FC } from 'react';
 import React, { forwardRef, useContext } from 'react';
 import { baseOutlinedClass } from '../Form.css';
-import { InputWrapperContext } from '../InputWrapper/InputWrapper.context';
+import { FormFieldWrapperContext } from '../FormFieldWrapper/FormFieldWrapper.context';
 import {
   chevronIconClass,
   containerClass,
@@ -35,7 +35,7 @@ export const Select: FC<ISelectProps> = forwardRef<
   { ariaLabel, children, disabled = false, outlined = false, icon, ...rest },
   ref,
 ) {
-  const { status } = useContext(InputWrapperContext);
+  const { status } = useContext(FormFieldWrapperContext);
 
   const Icon = icon && SystemIcon[icon];
   const ChevronDown = SystemIcon.ChevronDown;
diff --git a/packages/libs/react-ui/src/components/Form/SelectField/SelectField.stories.tsx b/packages/libs/react-ui/src/components/Form/SelectField/SelectField.stories.tsx
index e95868a846..28b885cfcd 100644
--- a/packages/libs/react-ui/src/components/Form/SelectField/SelectField.stories.tsx
+++ b/packages/libs/react-ui/src/components/Form/SelectField/SelectField.stories.tsx
@@ -1,6 +1,6 @@
 import type { ISelectFieldProps } from '@components/Form';
 import { SelectField } from '@components/Form';
-import { statusVariant } from '@components/Form/InputWrapper/InputWrapper.css';
+import { statusVariant } from '@components/Form/FormFieldWrapper/FormFieldWrapper.css';
 import { SystemIcon } from '@components/Icon';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
@@ -15,7 +15,7 @@ const meta: Meta<StoryProps> = {
     docs: {
       description: {
         component:
-          'SelectField is the composition of the Select and InputWrapper components to provide a select with a label, helper text, and other peripheral information.',
+          'SelectField is the composition of the Select and FormFieldWrapper components to provide a select with a label, helper text, and other peripheral information.',
       },
     },
   },
diff --git a/packages/libs/react-ui/src/components/Form/SelectField/SelectField.tsx b/packages/libs/react-ui/src/components/Form/SelectField/SelectField.tsx
index dc806d4117..649a61877d 100644
--- a/packages/libs/react-ui/src/components/Form/SelectField/SelectField.tsx
+++ b/packages/libs/react-ui/src/components/Form/SelectField/SelectField.tsx
@@ -1,9 +1,10 @@
-import type { IInputWrapperProps, ISelectProps } from '@components/Form';
-import { InputWrapper, Select } from '@components/Form';
+import type { IFormFieldWrapperProps, ISelectProps } from '@components/Form';
+import { FormFieldWrapper, Select } from '@components/Form';
 import type { FC } from 'react';
 import React from 'react';
 
-export interface ISelectFieldProps extends Omit<IInputWrapperProps, 'htmlFor'> {
+export interface ISelectFieldProps
+  extends Omit<IFormFieldWrapperProps, 'htmlFor'> {
   selectProps: Omit<ISelectProps, 'disabled' | 'children' | 'leadingTextWidth'>;
 }
 
@@ -16,10 +17,10 @@ export const SelectField: FC<ISelectFieldProps> = ({
   const { id } = selectProps;
 
   return (
-    <InputWrapper htmlFor={id} disabled={disabled} {...rest}>
+    <FormFieldWrapper htmlFor={id} disabled={disabled} {...rest}>
       <Select disabled={disabled} {...selectProps}>
         {children}
       </Select>
-    </InputWrapper>
+    </FormFieldWrapper>
   );
 };
diff --git a/packages/libs/react-ui/src/components/Form/TextField/TextField.stories.tsx b/packages/libs/react-ui/src/components/Form/TextField/TextField.stories.tsx
index 3a875f62fc..abcf41e2a5 100644
--- a/packages/libs/react-ui/src/components/Form/TextField/TextField.stories.tsx
+++ b/packages/libs/react-ui/src/components/Form/TextField/TextField.stories.tsx
@@ -1,6 +1,6 @@
 import type { ITextFieldProps } from '@components/Form';
 import { TextField } from '@components/Form';
-import { statusVariant } from '@components/Form/InputWrapper/InputWrapper.css';
+import { statusVariant } from '@components/Form/FormFieldWrapper/FormFieldWrapper.css';
 import { SystemIcon } from '@components/Icon';
 import type { Meta, StoryObj } from '@storybook/react';
 import { vars } from '@theme/vars.css';
@@ -19,7 +19,7 @@ const meta: Meta<StoryProps> = {
     docs: {
       description: {
         component:
-          'TextField is the composition of Input and InputWrapper to provide an input with a label, helper text, and other peripheral information.',
+          'TextField is the composition of Input and FormFieldWrapper to provide an input with a label, helper text, and other peripheral information.',
       },
     },
   },
diff --git a/packages/libs/react-ui/src/components/Form/TextField/TextField.tsx b/packages/libs/react-ui/src/components/Form/TextField/TextField.tsx
index 39c25271d1..4e43f46889 100644
--- a/packages/libs/react-ui/src/components/Form/TextField/TextField.tsx
+++ b/packages/libs/react-ui/src/components/Form/TextField/TextField.tsx
@@ -1,10 +1,10 @@
-import type { IInputProps, IInputWrapperProps } from '@components/Form';
-import { Input, InputWrapper } from '@components/Form';
+import type { IFormFieldWrapperProps, IInputProps } from '@components/Form';
+import { FormFieldWrapper, Input } from '@components/Form';
 import type { FC } from 'react';
 import React from 'react';
 
 export interface ITextFieldProps
-  extends Omit<IInputWrapperProps, 'children' | 'htmlFor'> {
+  extends Omit<IFormFieldWrapperProps, 'children' | 'htmlFor'> {
   inputProps: Omit<IInputProps, 'disabled' | 'children' | 'leadingTextWidth'>;
 }
 
@@ -17,8 +17,13 @@ export const TextField: FC<ITextFieldProps> = ({
   const { id } = inputProps;
 
   return (
-    <InputWrapper htmlFor={id} disabled={disabled} status={status} {...rest}>
+    <FormFieldWrapper
+      htmlFor={id}
+      disabled={disabled}
+      status={status}
+      {...rest}
+    >
       <Input disabled={disabled} {...inputProps} />
-    </InputWrapper>
+    </FormFieldWrapper>
   );
 };
diff --git a/packages/libs/react-ui/src/components/Form/Textarea/Textarea.tsx b/packages/libs/react-ui/src/components/Form/Textarea/Textarea.tsx
index 5b38c2f25b..a9e772e36a 100644
--- a/packages/libs/react-ui/src/components/Form/Textarea/Textarea.tsx
+++ b/packages/libs/react-ui/src/components/Form/Textarea/Textarea.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import type { FC, TextareaHTMLAttributes } from 'react';
 import React, { forwardRef, useContext } from 'react';
 import { baseContainerClass, baseOutlinedClass } from '../Form.css';
-import { InputWrapperContext } from '../InputWrapper/InputWrapper.context';
+import { FormFieldWrapperContext } from '../FormFieldWrapper/FormFieldWrapper.context';
 import {
   disabledClass,
   textAreaClass,
@@ -30,7 +30,7 @@ export const Textarea: FC<ITextareaProps> = forwardRef<
   { outlined = false, disabled = false, fontFamily, ...rest },
   ref,
 ) {
-  const { status } = useContext(InputWrapperContext);
+  const { status } = useContext(FormFieldWrapperContext);
 
   return (
     <div
diff --git a/packages/libs/react-ui/src/components/Form/TextareaField/TextareaField.tsx b/packages/libs/react-ui/src/components/Form/TextareaField/TextareaField.tsx
index eadd9aeece..a374928c1f 100644
--- a/packages/libs/react-ui/src/components/Form/TextareaField/TextareaField.tsx
+++ b/packages/libs/react-ui/src/components/Form/TextareaField/TextareaField.tsx
@@ -1,10 +1,10 @@
-import type { IInputWrapperProps, ITextareaProps } from '@components/Form';
-import { InputWrapper, Textarea } from '@components/Form';
+import type { IFormFieldWrapperProps, ITextareaProps } from '@components/Form';
+import { FormFieldWrapper, Textarea } from '@components/Form';
 import type { FC } from 'react';
 import React from 'react';
 
 export interface ITextareaFieldProps
-  extends Omit<IInputWrapperProps, 'htmlFor' | 'children'> {
+  extends Omit<IFormFieldWrapperProps, 'htmlFor' | 'children'> {
   textAreaProps: Omit<ITextareaProps, 'disabled'>;
 }
 
@@ -16,8 +16,8 @@ export const TextareaField: FC<ITextareaFieldProps> = ({
   const { id } = textAreaProps;
 
   return (
-    <InputWrapper htmlFor={id} disabled={disabled} {...rest}>
+    <FormFieldWrapper htmlFor={id} disabled={disabled} {...rest}>
       <Textarea disabled={disabled} {...textAreaProps} />
-    </InputWrapper>
+    </FormFieldWrapper>
   );
 };
diff --git a/packages/libs/react-ui/src/components/Form/index.ts b/packages/libs/react-ui/src/components/Form/index.ts
index 56f84033c6..3a26a324e4 100644
--- a/packages/libs/react-ui/src/components/Form/index.ts
+++ b/packages/libs/react-ui/src/components/Form/index.ts
@@ -1,6 +1,9 @@
 export type { FormFieldStatus } from './Form.css';
+export {
+  FormFieldWrapper,
+  type IFormFieldWrapperProps,
+} from './FormFieldWrapper';
 export { Input, type IInputProps } from './Input';
-export { InputWrapper, type IInputWrapperProps } from './InputWrapper';
 export { Select, type ISelectProps } from './Select';
 export { SelectField, type ISelectFieldProps } from './SelectField';
 export { TextField, type ITextFieldProps } from './TextField';
diff --git a/packages/libs/react-ui/src/components/index.ts b/packages/libs/react-ui/src/components/index.ts
index 317ee2908d..f054f4fb64 100644
--- a/packages/libs/react-ui/src/components/index.ts
+++ b/packages/libs/react-ui/src/components/index.ts
@@ -9,8 +9,8 @@ export type { ICardProps } from './Card';
 export type { IContentHeaderProps } from './ContentHeader';
 export type {
   FormFieldStatus,
+  IFormFieldWrapperProps,
   IInputProps,
-  IInputWrapperProps,
   ISelectFieldProps,
   ISelectProps,
   ITextFieldProps,
@@ -81,8 +81,8 @@ export { Card } from './Card';
 export { ContentHeader } from './ContentHeader';
 export { Divider } from './Divider/Divider';
 export {
+  FormFieldWrapper,
   Input,
-  InputWrapper,
   Select,
   SelectField,
   TextField,
diff --git a/packages/libs/react-ui/src/index.ts b/packages/libs/react-ui/src/index.ts
index 68d63d5dc6..962e4d0aa2 100644
--- a/packages/libs/react-ui/src/index.ts
+++ b/packages/libs/react-ui/src/index.ts
@@ -13,6 +13,7 @@ export type {
   IButtonProps,
   ICardProps,
   IContentHeaderProps,
+  IFormFieldWrapperProps,
   IGradientTextProps,
   IGridItemProps,
   IGridRootProps,
@@ -20,7 +21,6 @@ export type {
   IIconButtonProps,
   IIconProps,
   IInputProps,
-  IInputWrapperProps,
   ILabelProps,
   ILabelValue,
   ILinkProps,
@@ -74,12 +74,12 @@ export {
   Card,
   ContentHeader,
   Divider,
+  FormFieldWrapper,
   GradientText,
   Grid,
   Heading,
   IconButton,
   Input,
-  InputWrapper,
   Label,
   Link,
   MaskedValue,

From ccdc0695b1ac80ab61ff1d9715120a1a7934023e Mon Sep 17 00:00:00 2001
From: Sam Ferrero <ferrerocompanylimited@gmail.com>
Date: Wed, 8 Nov 2023 13:29:14 +0000
Subject: [PATCH 2/8] chore: added stack onto children

---
 .../Form/FormFieldWrapper/FormFieldWrapper.css.ts        | 2 +-
 .../Form/FormFieldWrapper/FormFieldWrapper.tsx           | 9 ++++++---
 .../libs/react-ui/src/components/Form/Input/Input.css.ts | 4 ----
 .../libs/react-ui/src/components/Form/Input/Input.tsx    | 3 ++-
 .../react-ui/src/components/Form/Select/Select.css.ts    | 4 ----
 .../src/components/Form/Textarea/Textarea.css.ts         | 4 ----
 6 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.css.ts b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.css.ts
index e5172a483f..5cdafd4a4b 100644
--- a/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.css.ts
+++ b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.css.ts
@@ -1,6 +1,6 @@
 import { sprinkles } from '@theme/sprinkles.css';
 import { vars } from '@theme/vars.css';
-import { styleVariants } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 import type { FormFieldStatus } from '../Form.css';
 import { statusColor, statusOutlineColor } from '../Form.css';
 import {
diff --git a/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.tsx b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.tsx
index 03796a235a..8ea0ff68fc 100644
--- a/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.tsx
+++ b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import type { vars } from 'src/styles';
 import type { FormFieldStatus } from '../Form.css';
 
+import { Stack } from '@components/Layout';
 import type { IFormFieldHeaderProps } from './FormFieldHeader/FormFieldHeader';
 import { FormFieldHeader } from './FormFieldHeader/FormFieldHeader';
 import { FormFieldHelper } from './FormFieldHelper/FormFieldHelper';
@@ -12,8 +13,8 @@ import { statusVariant } from './FormFieldWrapper.css';
 
 export interface IFormFieldWrapperProps
   extends Omit<IFormFieldHeaderProps, 'label'> {
-  children:
-    | FunctionComponentElement<IInputProps>
+  children: // combine types for all input types
+  | FunctionComponentElement<IInputProps>
     | FunctionComponentElement<IInputProps>[];
   status?: FormFieldStatus;
   disabled?: boolean;
@@ -46,7 +47,9 @@ export const FormFieldWrapper: FC<IFormFieldWrapperProps> = ({
             info={info}
           />
         )}
-        <div className="inputGroup">{children}</div>
+        <Stack gap="$2" direction="column">
+          {children}
+        </Stack>
         {Boolean(helperText) && <FormFieldHelper>{helperText}</FormFieldHelper>}
       </div>
     </FormFieldWrapperContext.Provider>
diff --git a/packages/libs/react-ui/src/components/Form/Input/Input.css.ts b/packages/libs/react-ui/src/components/Form/Input/Input.css.ts
index 6de5c0d818..0e02eccfa5 100644
--- a/packages/libs/react-ui/src/components/Form/Input/Input.css.ts
+++ b/packages/libs/react-ui/src/components/Form/Input/Input.css.ts
@@ -11,11 +11,7 @@ export const disabledClass = style([
     },
   }),
   {
-    opacity: 0.4,
     selectors: {
-      '.inputGroup &': {
-        opacity: 1,
-      },
       [`${darkThemeClass} &`]: {
         backgroundColor: vars.colors.$gray60, // NOTE: this is to override the normal bg color
       },
diff --git a/packages/libs/react-ui/src/components/Form/Input/Input.tsx b/packages/libs/react-ui/src/components/Form/Input/Input.tsx
index f6fde4ad58..78b80467e1 100644
--- a/packages/libs/react-ui/src/components/Form/Input/Input.tsx
+++ b/packages/libs/react-ui/src/components/Form/Input/Input.tsx
@@ -5,6 +5,7 @@ import type { FC, InputHTMLAttributes } from 'react';
 import React, { forwardRef, useContext } from 'react';
 import { baseContainerClass, baseOutlinedClass } from '../Form.css';
 import { FormFieldWrapperContext } from '../FormFieldWrapper/FormFieldWrapper.context';
+import { formFieldContainerClass } from '../FormFieldWrapper/FormFieldWrapper.css';
 import {
   disabledClass,
   inputClass,
@@ -54,7 +55,7 @@ export const Input: FC<IInputProps> = forwardRef<HTMLInputElement, IInputProps>(
 
     return (
       <div
-        className={classNames(baseContainerClass, {
+        className={classNames(baseContainerClass, formFieldContainerClass, {
           [baseOutlinedClass]: outlined || status,
           [disabledClass]: disabled,
         })}
diff --git a/packages/libs/react-ui/src/components/Form/Select/Select.css.ts b/packages/libs/react-ui/src/components/Form/Select/Select.css.ts
index 15fe7fef2e..2f8349d2e5 100644
--- a/packages/libs/react-ui/src/components/Form/Select/Select.css.ts
+++ b/packages/libs/react-ui/src/components/Form/Select/Select.css.ts
@@ -29,11 +29,7 @@ export const containerClassDisabled = style([
     },
   }),
   {
-    opacity: 0.4,
     selectors: {
-      '.inputGroup &': {
-        opacity: 1,
-      },
       [`${darkThemeClass} &`]: {
         backgroundColor: vars.colors.$gray60, // NOTE: this is to override the normal bg color
       },
diff --git a/packages/libs/react-ui/src/components/Form/Textarea/Textarea.css.ts b/packages/libs/react-ui/src/components/Form/Textarea/Textarea.css.ts
index ec5e998240..49611d8a0f 100644
--- a/packages/libs/react-ui/src/components/Form/Textarea/Textarea.css.ts
+++ b/packages/libs/react-ui/src/components/Form/Textarea/Textarea.css.ts
@@ -11,11 +11,7 @@ export const disabledClass = style([
     },
   }),
   {
-    opacity: 0.4,
     selectors: {
-      '.inputGroup &': {
-        opacity: 1,
-      },
       [`${darkThemeClass} &`]: {
         backgroundColor: vars.colors.$gray60,
       },

From 4a77548458ca716997174e83277af0745d71715e Mon Sep 17 00:00:00 2001
From: Sam Ferrero <ferrerocompanylimited@gmail.com>
Date: Wed, 8 Nov 2023 13:44:03 +0000
Subject: [PATCH 3/8] chore: removed unused

---
 .../components/Form/FormFieldWrapper/FormFieldWrapper.css.ts   | 2 +-
 packages/libs/react-ui/src/components/Form/Input/Input.tsx     | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.css.ts b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.css.ts
index 5cdafd4a4b..e5172a483f 100644
--- a/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.css.ts
+++ b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.css.ts
@@ -1,6 +1,6 @@
 import { sprinkles } from '@theme/sprinkles.css';
 import { vars } from '@theme/vars.css';
-import { style, styleVariants } from '@vanilla-extract/css';
+import { styleVariants } from '@vanilla-extract/css';
 import type { FormFieldStatus } from '../Form.css';
 import { statusColor, statusOutlineColor } from '../Form.css';
 import {
diff --git a/packages/libs/react-ui/src/components/Form/Input/Input.tsx b/packages/libs/react-ui/src/components/Form/Input/Input.tsx
index 78b80467e1..f6fde4ad58 100644
--- a/packages/libs/react-ui/src/components/Form/Input/Input.tsx
+++ b/packages/libs/react-ui/src/components/Form/Input/Input.tsx
@@ -5,7 +5,6 @@ import type { FC, InputHTMLAttributes } from 'react';
 import React, { forwardRef, useContext } from 'react';
 import { baseContainerClass, baseOutlinedClass } from '../Form.css';
 import { FormFieldWrapperContext } from '../FormFieldWrapper/FormFieldWrapper.context';
-import { formFieldContainerClass } from '../FormFieldWrapper/FormFieldWrapper.css';
 import {
   disabledClass,
   inputClass,
@@ -55,7 +54,7 @@ export const Input: FC<IInputProps> = forwardRef<HTMLInputElement, IInputProps>(
 
     return (
       <div
-        className={classNames(baseContainerClass, formFieldContainerClass, {
+        className={classNames(baseContainerClass, {
           [baseOutlinedClass]: outlined || status,
           [disabledClass]: disabled,
         })}

From d5cf03376f3eaf17946cf9d9a24097d965ede274 Mon Sep 17 00:00:00 2001
From: Sam Ferrero <ferrerocompanylimited@gmail.com>
Date: Wed, 8 Nov 2023 13:44:47 +0000
Subject: [PATCH 4/8] chore: comments

---
 .../src/components/Form/FormFieldWrapper/FormFieldWrapper.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.tsx b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.tsx
index 8ea0ff68fc..12fe05618d 100644
--- a/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.tsx
+++ b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.tsx
@@ -13,8 +13,8 @@ import { statusVariant } from './FormFieldWrapper.css';
 
 export interface IFormFieldWrapperProps
   extends Omit<IFormFieldHeaderProps, 'label'> {
-  children: // combine types for all input types
-  | FunctionComponentElement<IInputProps>
+  children:
+    | FunctionComponentElement<IInputProps>
     | FunctionComponentElement<IInputProps>[];
   status?: FormFieldStatus;
   disabled?: boolean;

From 8902d2ef8e695f237ccbb399b7b63f61ef47eadc Mon Sep 17 00:00:00 2001
From: Sam Ferrero <ferrerocompanylimited@gmail.com>
Date: Wed, 8 Nov 2023 16:27:52 +0000
Subject: [PATCH 5/8] chore: inputs

---
 .../Form/FormFieldWrapper/FormFieldWrapper.tsx        | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.tsx b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.tsx
index 12fe05618d..98030eca0e 100644
--- a/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.tsx
+++ b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.tsx
@@ -1,4 +1,9 @@
-import type { IInputProps } from '@components/Form';
+import type {
+  IInputProps,
+  ISelectFieldProps,
+  ISelectProps,
+  ITextareaProps,
+} from '@components/Form';
 import type { FC, FunctionComponentElement } from 'react';
 import React from 'react';
 import type { vars } from 'src/styles';
@@ -14,8 +19,8 @@ import { statusVariant } from './FormFieldWrapper.css';
 export interface IFormFieldWrapperProps
   extends Omit<IFormFieldHeaderProps, 'label'> {
   children:
-    | FunctionComponentElement<IInputProps>
-    | FunctionComponentElement<IInputProps>[];
+    | FunctionComponentElement<IInputProps | ISelectProps | ITextareaProps>
+    | FunctionComponentElement<IInputProps | ISelectProps | ITextareaProps>[];
   status?: FormFieldStatus;
   disabled?: boolean;
   helperText?: string;

From 49d8366c7931208cf28884c5361fdbf2c7b99e51 Mon Sep 17 00:00:00 2001
From: Sam Ferrero <ferrerocompanylimited@gmail.com>
Date: Wed, 8 Nov 2023 16:29:11 +0000
Subject: [PATCH 6/8] chore: changeset

---
 .changeset/new-pianos-bow.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/new-pianos-bow.md

diff --git a/.changeset/new-pianos-bow.md b/.changeset/new-pianos-bow.md
new file mode 100644
index 0000000000..eee7d46a8f
--- /dev/null
+++ b/.changeset/new-pianos-bow.md
@@ -0,0 +1,6 @@
+---
+'@kadena/react-ui': minor
+---
+
+Refactor InputFieldWrapper for the new FormFieldWrapper component with stacked
+items

From b2da194eab55d1207af785df55d2163389f2db10 Mon Sep 17 00:00:00 2001
From: Sam Ferrero <ferrerocompanylimited@gmail.com>
Date: Thu, 9 Nov 2023 09:39:03 +0000
Subject: [PATCH 7/8] chore: update input

---
 .../graph-client/src/components/Common/Layout/Header/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/apps/graph-client/src/components/Common/Layout/Header/Header.tsx b/packages/apps/graph-client/src/components/Common/Layout/Header/Header.tsx
index 8df34793fc..6634c963bc 100644
--- a/packages/apps/graph-client/src/components/Common/Layout/Header/Header.tsx
+++ b/packages/apps/graph-client/src/components/Common/Layout/Header/Header.tsx
@@ -223,7 +223,7 @@ const Header: FC<IHeaderProps> = (props) => {
 
           {searchType.startsWith('gas') && (
             <Grid.Item>
-              <InputWrapper
+              <FormFieldWrapper
                 htmlFor="third-search-field"
                 label={thirdSeachTypeLabels[searchType]}
               >

From df481856043e3d01a6290ccf922f81e96005687a Mon Sep 17 00:00:00 2001
From: Sam Ferrero <ferrerocompanylimited@gmail.com>
Date: Thu, 9 Nov 2023 09:43:41 +0000
Subject: [PATCH 8/8] chore: lint

---
 .../src/components/Form/FormFieldWrapper/FormFieldWrapper.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.tsx b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.tsx
index 98030eca0e..7c445f3a89 100644
--- a/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.tsx
+++ b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.tsx
@@ -1,6 +1,5 @@
 import type {
   IInputProps,
-  ISelectFieldProps,
   ISelectProps,
   ITextareaProps,
 } from '@components/Form';