diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
index cdbf44f4..23367160 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -20,7 +20,7 @@ export const Badge: FC<BadgeProps & MarginProps> = ({
 }) => {
   const hasLabel = !!label;
   const styles = useMemo(
-    () => stylesBuilder(custom, intent, emphasis, hasLabel, appearance),
+    () => stylesBuilder(intent, emphasis, custom, hasLabel, appearance),
     [custom, intent, emphasis, hasLabel, appearance],
   );
 
diff --git a/src/components/Badge/stylesBuilder/stylesBuilder.ts b/src/components/Badge/stylesBuilder/stylesBuilder.ts
index 97179fbe..5733d58d 100644
--- a/src/components/Badge/stylesBuilder/stylesBuilder.ts
+++ b/src/components/Badge/stylesBuilder/stylesBuilder.ts
@@ -1,5 +1,4 @@
-import { BadgeProps } from '../Badge.props';
-import { defaultConfig } from '../Badge.styles';
+import { BadgeConfig, defaultConfig } from '../Badge.styles';
 import { BadgeAppearance } from '../BadgeAppearance.type';
 import { BadgeEmphasis } from '../BadgeEmphasis.type';
 import { BadgeIntent } from '../BadgeIntent.type';
@@ -14,9 +13,9 @@ type BadgeStylesBuilder = {
 };
 
 export const stylesBuilder = (
-  custom: BadgeProps['custom'],
   intent: BadgeIntent,
   emphasis: BadgeEmphasis,
+  custom?: BadgeConfig,
   hasLabel?: boolean,
   appearance?: BadgeAppearance,
 ): BadgeStylesBuilder => {
diff --git a/src/components/InlineSearchInput/InlineSearchInput.styles.ts b/src/components/InlineSearchInput/InlineSearchInput.styles.ts
index 4ac9b9af..35452804 100644
--- a/src/components/InlineSearchInput/InlineSearchInput.styles.ts
+++ b/src/components/InlineSearchInput/InlineSearchInput.styles.ts
@@ -13,7 +13,7 @@ export const defaultConfig: SearchInputProps['custom'] = {
   ringColor: {
     _: 'unset',
   },
-  innerComponents: {
+  innerElements: {
     input: {
       w: 'unset',
       h: 'unset',
@@ -22,11 +22,11 @@ export const defaultConfig: SearchInputProps['custom'] = {
       padding: 'unset',
       display: 'inline-block',
     },
-  },
-  spacing: {
     beforeComponent: {
-      Icon: {
-        marginLeft: 'component-padding-small',
+      spacing: {
+        Icon: {
+          marginLeft: 'component-padding-small',
+        },
       },
     },
   },
diff --git a/src/components/TextInput/TextInput.props.ts b/src/components/TextInput/TextInput.props.ts
index 82281653..2c149e36 100644
--- a/src/components/TextInput/TextInput.props.ts
+++ b/src/components/TextInput/TextInput.props.ts
@@ -8,7 +8,6 @@ import { IconButtonProps } from '../IconButton/IconButton.props';
 
 import type { BasicInputState } from '@/types';
 import { InnerComponent } from '@/types/InnerComponent';
-import { DeepPartial } from '@/utility-types/DeepPartial';
 
 export namespace TextInputProps.InnerComponents {
   export type Icon = InnerComponent<'Icon', IconProps>;
@@ -42,7 +41,7 @@ export type TextInputProps = {
     | TextInputProps.InnerComponents.Dropdown;
   state?: BasicInputState;
   hasClearButton?: boolean;
-  custom?: DeepPartial<TextInputConfig>;
+  custom?: TextInputConfig;
 } & Omit<
   InputHTMLAttributes<HTMLInputElement>,
   'checked' | 'disabled' | 'color' | 'type'
diff --git a/src/components/TextInput/TextInput.stories.tsx b/src/components/TextInput/TextInput.stories.tsx
index aa742788..88c6d7ba 100644
--- a/src/components/TextInput/TextInput.stories.tsx
+++ b/src/components/TextInput/TextInput.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { TextInput } from './TextInput';
 
 const meta = {
-  title: 'Components/Text Input',
+  title: 'Components/TextInput',
   component: TextInput,
   tags: ['autodocs'],
   args: {
diff --git a/src/components/TextInput/TextInput.style.ts b/src/components/TextInput/TextInput.style.ts
index 64441460..297cd28b 100644
--- a/src/components/TextInput/TextInput.style.ts
+++ b/src/components/TextInput/TextInput.style.ts
@@ -1,19 +1,25 @@
 import { BaseProps } from '@/types/BaseProps';
 
 export type TextInputConfig = {
-  innerComponents: Record<'input' | 'icon' | 'text' | 'clearButton', BaseProps>;
-  spacing:
-    | Record<
-        'beforeComponent',
+  innerElements?: {
+    input?: BaseProps;
+    icon?: BaseProps;
+    text?: BaseProps;
+    clearButton?: BaseProps;
+    beforeComponent?: {
+      spacing?: Partial<
         Record<'Icon' | 'Avatar' | 'Prefix' | 'Dropdown', BaseProps>
-      >
-    | Record<
-        'afterComponent',
+      >;
+    } & BaseProps;
+    afterComponent?: {
+      spacing?: Partial<
         Record<
           'Icon' | 'Sufix' | 'Button' | 'IconButton' | 'Dropdown',
           BaseProps
         >
       >;
+    } & BaseProps;
+  };
 } & BaseProps;
 
 export const defaultConfig = {
@@ -51,7 +57,7 @@ export const defaultConfig = {
   pointerEvents: {
     disabled: 'none',
   },
-  innerComponents: {
+  innerElements: {
     input: {
       w: '100%',
       h: '100%',
@@ -72,44 +78,46 @@ export const defaultConfig = {
     clearButton: {
       marginLeft: 'component-gap-small',
     },
-  },
-  spacing: {
     beforeComponent: {
-      Icon: {
-        marginLeft: 'component-padding-medium',
-        marginRight: 'component-padding-small',
-      },
-      Avatar: {
-        margin: '0 component-padding-small',
-      },
-      Prefix: {
-        margin: '0 component-padding-large',
-      },
-      Dropdown: {
-        marginLeft: 'component-padding-xSmall',
-        marginRight: 'component-padding-small',
+      spacing: {
+        Icon: {
+          marginLeft: 'component-padding-medium',
+          marginRight: 'component-padding-small',
+        },
+        Avatar: {
+          margin: '0 component-padding-small',
+        },
+        Prefix: {
+          margin: '0 component-padding-large',
+        },
+        Dropdown: {
+          marginLeft: 'component-padding-xSmall',
+          marginRight: 'component-padding-small',
+        },
       },
     },
     afterComponent: {
-      Icon: {
-        marginLeft: 'component-padding-small',
-        marginRight: 'component-padding-large',
-      },
-      Sufix: {
-        marginLeft: 'component-padding-small',
-        marginRight: 'component-padding-large',
-      },
-      Button: {
-        marginLeft: 'component-padding-small',
-        marginRight: 'component-padding-xSmall',
-      },
-      IconButton: {
-        marginLeft: 'component-padding-small',
-        marginRight: 'component-padding-xSmall',
-      },
-      Dropdown: {
-        marginLeft: 'component-padding-small',
-        marginRight: 'component-padding-xSmall',
+      spacing: {
+        Icon: {
+          marginLeft: 'component-padding-small',
+          marginRight: 'component-padding-large',
+        },
+        Sufix: {
+          marginLeft: 'component-padding-small',
+          marginRight: 'component-padding-large',
+        },
+        Button: {
+          marginLeft: 'component-padding-small',
+          marginRight: 'component-padding-xSmall',
+        },
+        IconButton: {
+          marginLeft: 'component-padding-small',
+          marginRight: 'component-padding-xSmall',
+        },
+        Dropdown: {
+          marginLeft: 'component-padding-small',
+          marginRight: 'component-padding-xSmall',
+        },
       },
     },
   },
diff --git a/src/components/TextInput/TextInput.test.tsx b/src/components/TextInput/TextInput.test.tsx
index 65e888f8..c8a1e7a3 100644
--- a/src/components/TextInput/TextInput.test.tsx
+++ b/src/components/TextInput/TextInput.test.tsx
@@ -3,6 +3,8 @@ import { vi } from 'vitest';
 import { TextInput } from './TextInput';
 import { fireEvent, render } from '../../tests/render';
 
+import { customPropTester } from '@/tests/customPropTester';
+
 const handleEventMock = vi.fn();
 
 const getTextInput = (jsx: JSX.Element) => {
@@ -20,6 +22,10 @@ describe('TextInput', () => {
     handleEventMock.mockClear();
   });
 
+  customPropTester(<TextInput />, {
+    containerId: 'text-input',
+  });
+
   it('should render the text input', () => {
     const { textInput } = getTextInput(<TextInput />);
     expect(textInput).toBeInTheDocument();
diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
index 27704902..42d45dd0 100644
--- a/src/components/TextInput/TextInput.tsx
+++ b/src/components/TextInput/TextInput.tsx
@@ -7,14 +7,14 @@ import {
   ChangeEventHandler,
   MouseEventHandler,
   ChangeEvent,
+  useMemo,
 } from 'react';
 
+import { stylesBuilder } from './stylesBuilder';
 import { TextInputProps } from './TextInput.props';
-import { defaultConfig } from './TextInput.style';
 import { Button } from '../Button';
 import { IconButton } from '../IconButton';
 
-import { mergeConfigWithCustom } from '@/services';
 import { extractMarginProps } from '@/services/extractMarginProps';
 import { tet } from '@/tetrisly';
 import { MarginProps } from '@/types/MarginProps';
@@ -38,21 +38,14 @@ export const TextInput = forwardRef<
     inputRef,
   ) => {
     const [innerValue, setInnerValue] = useState('');
+    const styles = useMemo(
+      () => stylesBuilder(custom, beforeComponent?.type, afterComponent?.type),
+      [afterComponent?.type, beforeComponent?.type, custom],
+    );
     const [marginProps, inputProps] = extractMarginProps<
       TextInputProps & MarginProps
     >(rest);
 
-    const {
-      innerComponents: {
-        input: inputStyles,
-        icon: iconStyles,
-        text: textStyles,
-        clearButton: clearButtonStyles,
-      },
-      spacing,
-      ...defaultStyles
-    } = mergeConfigWithCustom({ defaultConfig, custom });
-
     const containerRef = useRef<HTMLInputElement | null>(null);
 
     const handleContainerClick: MouseEventHandler = useCallback(
@@ -84,25 +77,25 @@ export const TextInput = forwardRef<
       <tet.div
         ref={containerRef}
         onClick={handleContainerClick}
-        {...defaultStyles}
+        {...styles.container}
         pl={!!beforeComponent && '0'}
         pr={!!afterComponent && '0'}
-        {...marginProps}
-        data-state={state}
         data-testid="text-input"
+        data-state={state}
+        {...marginProps}
       >
         {!!beforeComponent && (
           <tet.span
-            {...spacing.beforeComponent[beforeComponent.type]}
+            {...styles.beforeComponent}
             data-testid="text-input-before-component"
           >
             {beforeComponent.type === 'Icon' && (
-              <tet.span {...iconStyles}>
+              <tet.span {...styles.icon}>
                 <Icon {...beforeComponent.props} />
               </tet.span>
             )}
             {beforeComponent.type === 'Prefix' && (
-              <tet.span {...textStyles}>{beforeComponent.props.text}</tet.span>
+              <tet.span {...styles.text}>{beforeComponent.props.text}</tet.span>
             )}
             {beforeComponent.type === 'Dropdown' && (
               <Button
@@ -115,31 +108,31 @@ export const TextInput = forwardRef<
           </tet.span>
         )}
         <tet.input
-          {...inputStyles}
+          {...styles.input}
           value={value || innerValue}
           onChange={handleOnChange}
+          data-testid="text-input-input"
           {...inputProps}
           type={type}
           disabled={state === 'disabled'}
           ref={inputRef}
-          data-testid="text-input-input"
         />
         {!!hasClearButton && (value || innerValue) && (
           <IconButton
             variant="bare"
             icon="20-close"
             onClick={handleOnClear}
-            {...clearButtonStyles}
+            {...styles.clearButton}
             data-testid="text-input-clear-button"
           />
         )}
         {!!afterComponent && (
           <tet.span
-            {...spacing.afterComponent[afterComponent.type]}
+            {...styles.afterComponent}
             data-testid="text-input-after-component"
           >
             {afterComponent.type === 'Icon' && (
-              <tet.span {...iconStyles}>
+              <tet.span {...styles.icon}>
                 <Icon {...afterComponent.props} />
               </tet.span>
             )}
@@ -151,7 +144,7 @@ export const TextInput = forwardRef<
               />
             )}
             {afterComponent.type === 'Sufix' && (
-              <tet.span {...textStyles}>{afterComponent.props.text}</tet.span>
+              <tet.span {...styles.text}>{afterComponent.props.text}</tet.span>
             )}
             {afterComponent.type === 'Button' && (
               <Button size="small" variant="ghost" label="Label" />
diff --git a/src/components/TextInput/stylesBuilder/index.ts b/src/components/TextInput/stylesBuilder/index.ts
new file mode 100644
index 00000000..fe248ee5
--- /dev/null
+++ b/src/components/TextInput/stylesBuilder/index.ts
@@ -0,0 +1 @@
+export { stylesBuilder } from './stylesBuilder';
diff --git a/src/components/TextInput/stylesBuilder/stylesBuilder.ts b/src/components/TextInput/stylesBuilder/stylesBuilder.ts
new file mode 100644
index 00000000..b8808351
--- /dev/null
+++ b/src/components/TextInput/stylesBuilder/stylesBuilder.ts
@@ -0,0 +1,57 @@
+import { TextInputConfig, defaultConfig } from '../TextInput.style';
+
+import { mergeConfigWithCustom } from '@/services/mergeConfigWithCustom/mergeConfigWithCutom';
+import { BaseProps } from '@/types/BaseProps';
+
+type TextInputStylesBuilder = {
+  container: BaseProps;
+  input: BaseProps;
+  icon: BaseProps;
+  text: BaseProps;
+  clearButton: BaseProps;
+  beforeComponent: BaseProps;
+  afterComponent: BaseProps;
+};
+
+export const stylesBuilder = (
+  custom?: TextInputConfig,
+  beforeComponentType?: 'Icon' | 'Avatar' | 'Prefix' | 'Dropdown',
+  afterComponentType?: 'Icon' | 'Sufix' | 'Button' | 'IconButton' | 'Dropdown',
+): TextInputStylesBuilder => {
+  const {
+    innerElements: {
+      input,
+      icon,
+      text,
+      clearButton,
+      beforeComponent: {
+        spacing: beforeComponentSpacing,
+        ...beforeComponentStyles
+      },
+      afterComponent: {
+        spacing: afterComponentSpacing,
+        ...afterComponentStyles
+      },
+    },
+    ...container
+  } = mergeConfigWithCustom({
+    defaultConfig,
+    custom,
+  });
+
+  return {
+    container,
+    input,
+    icon,
+    text,
+    clearButton,
+    beforeComponent: {
+      ...beforeComponentStyles,
+      ...(beforeComponentType && beforeComponentSpacing[beforeComponentType]),
+    },
+    afterComponent: {
+      ...afterComponentStyles,
+      ...(afterComponentType && afterComponentSpacing[afterComponentType]),
+    },
+  };
+};