diff --git a/.changeset/some-seas-prove.md b/.changeset/some-seas-prove.md
new file mode 100644
index 0000000000..f3bb72a157
--- /dev/null
+++ b/.changeset/some-seas-prove.md
@@ -0,0 +1,7 @@
+---
+'@rocket.chat/onboarding-ui': minor
+'@rocket.chat/fuselage': minor
+'@rocket.chat/layout': minor
+---
+
+feat(fuselage): Remove deprecated `InputBox.*` component namespace
diff --git a/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx b/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx
index af9d4bb8aa..7b1daf3d0f 100644
--- a/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx
+++ b/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx
@@ -15,7 +15,7 @@ import AnimatedVisibility from '../AnimatedVisibility';
 import Box from '../Box';
 import Chip from '../Chip';
 import { Icon } from '../Icon';
-import { InputBox } from '../InputBox';
+import { Input } from '../InputBox';
 import Margins from '../Margins';
 import type { OptionType } from '../Options';
 import { useCursor, Options } from '../Options';
@@ -91,7 +91,7 @@ export function AutoComplete({
   onBlur: onBlurAction = () => {},
   ...props
 }: AutoCompleteProps): ReactElement {
-  const ref = useRef<HTMLInputElement>();
+  const ref = useRef<HTMLInputElement>(null);
   const { ref: containerRef, borderBoxSize } = useResizeObserver();
 
   const [selected, setSelected] = useState(
@@ -185,7 +185,7 @@ export function AutoComplete({
         role='group'
       >
         <Margins all='x4'>
-          <InputBox.Input
+          <Input
             ref={ref}
             onChange={useEffectEvent((e: ChangeEvent<HTMLInputElement>) =>
               setFilter?.(e.currentTarget.value),
diff --git a/packages/fuselage/src/components/Contextualbar/Contextualbar.stories.tsx b/packages/fuselage/src/components/Contextualbar/Contextualbar.stories.tsx
index 87676d91e0..c5c8649c0f 100644
--- a/packages/fuselage/src/components/Contextualbar/Contextualbar.stories.tsx
+++ b/packages/fuselage/src/components/Contextualbar/Contextualbar.stories.tsx
@@ -6,7 +6,7 @@ import Box from '../Box';
 import Button, { IconButton } from '../Button';
 import { ButtonGroup } from '../ButtonGroup';
 import { Icon } from '../Icon';
-import InputBox from '../InputBox';
+import { InputBox } from '../InputBox';
 
 import Contextualbar from './Contextualbar';
 import ContextualbarAction from './ContextualbarAction';
diff --git a/packages/fuselage/src/components/ContextualbarV2/Contextualbar.stories.tsx b/packages/fuselage/src/components/ContextualbarV2/Contextualbar.stories.tsx
index cdfe92f54c..35a051beba 100644
--- a/packages/fuselage/src/components/ContextualbarV2/Contextualbar.stories.tsx
+++ b/packages/fuselage/src/components/ContextualbarV2/Contextualbar.stories.tsx
@@ -6,7 +6,7 @@ import Box from '../Box';
 import Button, { IconButton } from '../Button';
 import { ButtonGroup } from '../ButtonGroup';
 import { Icon } from '../Icon';
-import InputBox from '../InputBox';
+import { InputBox } from '../InputBox';
 
 import {
   ContextualbarV2,
diff --git a/packages/fuselage/src/components/EmailInput/EmailInput.tsx b/packages/fuselage/src/components/EmailInput/EmailInput.tsx
index a90e76fb30..914b95d352 100644
--- a/packages/fuselage/src/components/EmailInput/EmailInput.tsx
+++ b/packages/fuselage/src/components/EmailInput/EmailInput.tsx
@@ -1,9 +1,9 @@
-import type { ComponentProps, ReactNode, Ref } from 'react';
+import type { ReactNode, Ref } from 'react';
 import { forwardRef } from 'react';
 
-import { InputBox } from '../InputBox';
+import { InputBox, type InputBoxProps } from '../InputBox';
 
-type EmailInputProps = Omit<ComponentProps<typeof InputBox>, 'type'> & {
+type EmailInputProps = Omit<InputBoxProps, 'type'> & {
   addon?: ReactNode;
   error?: string;
 };
diff --git a/packages/fuselage/src/components/FieldGroup/FieldGroup.stories.tsx b/packages/fuselage/src/components/FieldGroup/FieldGroup.stories.tsx
index b45e4ad441..bb57ee549d 100644
--- a/packages/fuselage/src/components/FieldGroup/FieldGroup.stories.tsx
+++ b/packages/fuselage/src/components/FieldGroup/FieldGroup.stories.tsx
@@ -1,7 +1,7 @@
 import type { StoryFn, Meta } from '@storybook/react-webpack5';
 
 import { Field, FieldHint, FieldLabel, FieldRow } from '../Field';
-import InputBox from '../InputBox';
+import { InputBoxSkeleton } from '../InputBox';
 
 import { FieldGroup } from './FieldGroup';
 
@@ -15,20 +15,20 @@ export const Default: StoryFn<typeof FieldGroup> = () => (
     <Field>
       <FieldLabel>Field #1</FieldLabel>
       <FieldRow>
-        <InputBox.Skeleton />
+        <InputBoxSkeleton />
       </FieldRow>
     </Field>
     <Field>
       <FieldLabel>Field #2</FieldLabel>
       <FieldRow>
-        <InputBox.Skeleton />
+        <InputBoxSkeleton />
       </FieldRow>
       <FieldHint>Help text</FieldHint>
     </Field>
     <Field>
       <FieldLabel>Field #3</FieldLabel>
       <FieldRow>
-        <InputBox.Skeleton />
+        <InputBoxSkeleton />
       </FieldRow>
     </Field>
   </FieldGroup>
diff --git a/packages/fuselage/src/components/Icon/Icon.stories.tsx b/packages/fuselage/src/components/Icon/Icon.stories.tsx
index 6bc567e97b..3f6566b6a0 100644
--- a/packages/fuselage/src/components/Icon/Icon.stories.tsx
+++ b/packages/fuselage/src/components/Icon/Icon.stories.tsx
@@ -5,7 +5,7 @@ import { useState } from 'react';
 
 import Box from '../Box';
 import { Divider } from '../Divider';
-import InputBox from '../InputBox';
+import { InputBox } from '../InputBox';
 
 import { Icon } from './Icon';
 
diff --git a/packages/fuselage/src/components/InputBox/Addon.tsx b/packages/fuselage/src/components/InputBox/Addon.tsx
deleted file mode 100644
index bd3acc662a..0000000000
--- a/packages/fuselage/src/components/InputBox/Addon.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { ComponentProps, Ref } from 'react';
-import { forwardRef } from 'react';
-
-import Box from '../Box';
-
-type AddonProps = ComponentProps<typeof Box>;
-
-export const Addon = forwardRef(function Addon(
-  props: AddonProps,
-  ref: Ref<HTMLSpanElement>,
-) {
-  return <Box is='span' rcx-input-box__addon ref={ref} {...props} />;
-});
diff --git a/packages/fuselage/src/components/InputBox/Input.tsx b/packages/fuselage/src/components/InputBox/Input.tsx
index 2d257cd5c2..416ae48913 100644
--- a/packages/fuselage/src/components/InputBox/Input.tsx
+++ b/packages/fuselage/src/components/InputBox/Input.tsx
@@ -1,13 +1,15 @@
-import type { ComponentProps, Ref } from 'react';
+import type { Ref } from 'react';
 import { forwardRef } from 'react';
 
-import Box from '../Box';
+import Box, { type BoxProps } from '../Box';
 
-type InputProps = ComponentProps<typeof Box>;
+export type InputProps = BoxProps;
 
-export const Input = forwardRef(function Input(
+const Input = forwardRef(function Input(
   props: InputProps,
   ref: Ref<HTMLInputElement>,
 ) {
   return <Box is='input' animated rcx-input-box ref={ref} {...props} />;
 });
+
+export default Input;
diff --git a/packages/fuselage/src/components/InputBox/InputBox.stories.tsx b/packages/fuselage/src/components/InputBox/InputBox.stories.tsx
index bd41ed96f3..667703ff71 100644
--- a/packages/fuselage/src/components/InputBox/InputBox.stories.tsx
+++ b/packages/fuselage/src/components/InputBox/InputBox.stories.tsx
@@ -4,11 +4,15 @@ import { action } from 'storybook/actions';
 import Box from '../Box';
 import { Icon } from '../Icon';
 
-import { InputBox } from './InputBox';
+import { Input, InputBox, InputBoxSkeleton } from '.';
 
 export default {
   title: 'Inputs/InputBox',
   component: InputBox,
+  subcomponents: {
+    InputBoxSkeleton,
+    Input,
+  },
 } satisfies Meta<typeof InputBox>;
 
 const Template: StoryFn<typeof InputBox> = (args) => (
@@ -59,8 +63,8 @@ WithPlaceholder.args = {
   placeholder: 'Placeholder',
   onChange: action('change'),
 };
-export const Skeleton: StoryFn<typeof InputBox> = () => <InputBox.Skeleton />;
-Skeleton.storyName = 'InputBox.Skeleton';
+export const Skeleton: StoryFn<typeof InputBox> = () => <InputBoxSkeleton />;
+Skeleton.storyName = 'InputBoxSkeleton';
 
 export const SmallVariants: StoryFn<typeof InputBox> = () => (
   <Box
diff --git a/packages/fuselage/src/components/InputBox/InputBox.tsx b/packages/fuselage/src/components/InputBox/InputBox.tsx
index 17d3cd675e..1a31a64394 100644
--- a/packages/fuselage/src/components/InputBox/InputBox.tsx
+++ b/packages/fuselage/src/components/InputBox/InputBox.tsx
@@ -1,24 +1,15 @@
 import { useMergedRefs } from '@rocket.chat/fuselage-hooks';
-import type {
-  ComponentProps,
-  FormEvent,
-  ForwardRefExoticComponent,
-  ReactNode,
-  Ref,
-} from 'react';
+import type { FormEvent, ReactNode, Ref } from 'react';
 import { forwardRef, useCallback, useLayoutEffect, useRef } from 'react';
 
-import type Box from '../Box';
+import type { BoxProps } from '../Box';
 import { Icon } from '../Icon';
 
-import { Addon } from './Addon';
-import { Input } from './Input';
-import type { InputBoxSkeleton } from './InputBoxSkeleton';
-import type { Option } from './Option';
-import type { Placeholder } from './Placeholder';
-import { Wrapper } from './Wrapper';
+import Input from './Input';
+import InputBoxAddon from './InputBoxAddon';
+import InputBoxWrapper from './InputBoxWrapper';
 
-type InputBoxProps = ComponentProps<typeof Box> & {
+export type InputBoxProps = BoxProps & {
   addon?: ReactNode;
   input?: ReactNode;
   multiple?: boolean;
@@ -61,7 +52,7 @@ type InputBoxProps = ComponentProps<typeof Box> & {
  * components over this one because it works as a construction block for them.
  */
 // eslint-disable-next-line complexity
-export const InputBox = forwardRef(function InputBox(
+const InputBox = forwardRef(function InputBox(
   {
     className,
     addon,
@@ -75,7 +66,7 @@ export const InputBox = forwardRef(function InputBox(
     onChange,
     ...props
   }: InputBoxProps,
-  ref: Ref<any> | null,
+  ref: Ref<any>,
 ) {
   const innerRef = useRef<
     HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
@@ -150,7 +141,7 @@ export const InputBox = forwardRef(function InputBox(
   }
 
   return (
-    <Wrapper
+    <InputBoxWrapper
       className={[
         props.disabled && 'disabled',
         ...(Array.isArray(className) ? className : [className]),
@@ -180,12 +171,9 @@ export const InputBox = forwardRef(function InputBox(
         rcx-input-box--small={small}
         {...props}
       />
-      <Addon children={addon} />
-    </Wrapper>
+      <InputBoxAddon children={addon} />
+    </InputBoxWrapper>
   );
-}) as unknown as ForwardRefExoticComponent<InputBoxProps> & {
-  Input: ForwardRefExoticComponent<ComponentProps<typeof Box>>;
-  Skeleton: ForwardRefExoticComponent<ComponentProps<typeof InputBoxSkeleton>>;
-  Option: ForwardRefExoticComponent<ComponentProps<typeof Option>>;
-  Placeholder: ForwardRefExoticComponent<ComponentProps<typeof Placeholder>>;
-};
+});
+
+export default InputBox;
diff --git a/packages/fuselage/src/components/InputBox/InputBoxAddon.tsx b/packages/fuselage/src/components/InputBox/InputBoxAddon.tsx
new file mode 100644
index 0000000000..9b529f2ded
--- /dev/null
+++ b/packages/fuselage/src/components/InputBox/InputBoxAddon.tsx
@@ -0,0 +1,15 @@
+import type { Ref } from 'react';
+import { forwardRef } from 'react';
+
+import Box, { type BoxProps } from '../Box';
+
+export type InputBoxAddonProps = BoxProps;
+
+const InputBoxAddon = forwardRef(function InputBoxAddon(
+  props: InputBoxAddonProps,
+  ref: Ref<HTMLSpanElement>,
+) {
+  return <Box is='span' rcx-input-box__addon ref={ref} {...props} />;
+});
+
+export default InputBoxAddon;
diff --git a/packages/fuselage/src/components/InputBox/InputBoxSkeleton.tsx b/packages/fuselage/src/components/InputBox/InputBoxSkeleton.tsx
index 21e1810867..2bfa61cb41 100644
--- a/packages/fuselage/src/components/InputBox/InputBoxSkeleton.tsx
+++ b/packages/fuselage/src/components/InputBox/InputBoxSkeleton.tsx
@@ -1,12 +1,12 @@
-import type { ComponentProps } from 'react';
-
-import Box from '../Box';
+import Box, { type BoxProps } from '../Box';
 import { Skeleton } from '../Skeleton';
 
-type InputBoxSkeletonProps = ComponentProps<typeof Box>;
+export type InputBoxSkeletonProps = BoxProps;
 
-export const InputBoxSkeleton = (props: InputBoxSkeletonProps) => (
+const InputBoxSkeleton = (props: InputBoxSkeletonProps) => (
   <Box rcx-skeleton__input {...props}>
     <Skeleton width='100%' />
   </Box>
 );
+
+export default InputBoxSkeleton;
diff --git a/packages/fuselage/src/components/InputBox/InputBoxWrapper.tsx b/packages/fuselage/src/components/InputBox/InputBoxWrapper.tsx
new file mode 100644
index 0000000000..2873476ff6
--- /dev/null
+++ b/packages/fuselage/src/components/InputBox/InputBoxWrapper.tsx
@@ -0,0 +1,10 @@
+import Box, { type BoxProps } from '../Box';
+import { Label } from '../Label';
+
+export type InputBoxWrapperProps = BoxProps;
+
+const InputBoxWrapper = (props: InputBoxWrapperProps) => (
+  <Box animated is={Label} rcx-input-box__wrapper {...props} />
+);
+
+export default InputBoxWrapper;
diff --git a/packages/fuselage/src/components/InputBox/Option.tsx b/packages/fuselage/src/components/InputBox/Option.tsx
deleted file mode 100644
index 363160c96f..0000000000
--- a/packages/fuselage/src/components/InputBox/Option.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { ComponentProps, Ref } from 'react';
-import { forwardRef } from 'react';
-
-import Box from '../Box';
-
-type OptionProps = ComponentProps<typeof Box>;
-
-export const Option = forwardRef(function Option(
-  props: OptionProps,
-  ref: Ref<HTMLInputElement>,
-) {
-  return <Box is='option' rcx-input-box__option ref={ref} {...props} />;
-});
diff --git a/packages/fuselage/src/components/InputBox/Placeholder.tsx b/packages/fuselage/src/components/InputBox/Placeholder.tsx
deleted file mode 100644
index 754cc4788e..0000000000
--- a/packages/fuselage/src/components/InputBox/Placeholder.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { ComponentProps, Ref } from 'react';
-import { forwardRef } from 'react';
-
-import Box from '../Box';
-
-type PlaceholderProps = ComponentProps<typeof Box>;
-
-export const Placeholder = forwardRef(function Placeholder(
-  props: PlaceholderProps,
-  ref: Ref<HTMLOptionElement>,
-) {
-  return <Box is='option' rcx-input-box__placeholder ref={ref} {...props} />;
-});
diff --git a/packages/fuselage/src/components/InputBox/Wrapper.tsx b/packages/fuselage/src/components/InputBox/Wrapper.tsx
deleted file mode 100644
index 097711ddac..0000000000
--- a/packages/fuselage/src/components/InputBox/Wrapper.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import Box from '../Box';
-import { Label } from '../Label';
-
-export const Wrapper = (props: ComponentProps<typeof Box>) => (
-  <Box animated is={Label} rcx-input-box__wrapper {...props} />
-);
diff --git a/packages/fuselage/src/components/InputBox/index.ts b/packages/fuselage/src/components/InputBox/index.ts
index 8e01e24a5b..3ea835229c 100644
--- a/packages/fuselage/src/components/InputBox/index.ts
+++ b/packages/fuselage/src/components/InputBox/index.ts
@@ -1,21 +1,6 @@
-import { Addon } from './Addon';
-import { Input } from './Input';
-import { InputBox } from './InputBox';
-import { InputBoxSkeleton } from './InputBoxSkeleton';
-import { Option } from './Option';
-import { Placeholder } from './Placeholder';
-import { Wrapper } from './Wrapper';
-
-export * from './Input';
-export * from './InputBox';
-export * from './InputBoxSkeleton';
-export * from './Wrapper';
-
-export default Object.assign(InputBox, {
-  Input,
-  Skeleton: InputBoxSkeleton,
-  Wrapper,
-  Addon,
-  Placeholder,
-  Option,
-});
+export { default as Input, type InputProps } from './Input';
+export { default as InputBox, type InputBoxProps } from './InputBox';
+export {
+  default as InputBoxSkeleton,
+  type InputBoxSkeletonProps,
+} from './InputBoxSkeleton';
diff --git a/packages/fuselage/src/components/MultiSelect/MultiSelectAnchorParams.ts b/packages/fuselage/src/components/MultiSelect/MultiSelectAnchorParams.ts
index ea3d87bff3..f2cd4666ec 100644
--- a/packages/fuselage/src/components/MultiSelect/MultiSelectAnchorParams.ts
+++ b/packages/fuselage/src/components/MultiSelect/MultiSelectAnchorParams.ts
@@ -7,7 +7,7 @@ import type {
 } from 'react';
 
 export type MultiSelectAnchorParams = {
-  ref: Ref<Element>;
+  ref: Ref<HTMLInputElement>;
   children: ReactNode;
   disabled: boolean;
   onClick: MouseEventHandler;
diff --git a/packages/fuselage/src/components/MultiSelect/MultiSelectFilteredAnchor.tsx b/packages/fuselage/src/components/MultiSelect/MultiSelectFilteredAnchor.tsx
index f0fbaadfa9..61a5f374a8 100644
--- a/packages/fuselage/src/components/MultiSelect/MultiSelectFilteredAnchor.tsx
+++ b/packages/fuselage/src/components/MultiSelect/MultiSelectFilteredAnchor.tsx
@@ -9,7 +9,7 @@ import type {
 import { forwardRef } from 'react';
 
 import Flex from '../Flex';
-import { InputBox } from '../InputBox';
+import { Input } from '../InputBox';
 
 type MultiSelectFilteredAnchorProps = {
   children: ReactNode;
@@ -31,11 +31,11 @@ const MultiSelectFilteredAnchor = forwardRef(function MultiSelectFilteredAnchor(
     placeholder,
     ...props
   }: MultiSelectFilteredAnchorProps,
-  ref: Ref<Element>,
+  ref: Ref<HTMLInputElement>,
 ) {
   return (
     <Flex.Item grow={1}>
-      <InputBox.Input
+      <Input
         ref={ref}
         placeholder={placeholder}
         value={filter}
diff --git a/packages/fuselage/src/components/NumberInput/NumberInput.tsx b/packages/fuselage/src/components/NumberInput/NumberInput.tsx
index e2363be94b..3278752c67 100644
--- a/packages/fuselage/src/components/NumberInput/NumberInput.tsx
+++ b/packages/fuselage/src/components/NumberInput/NumberInput.tsx
@@ -1,9 +1,9 @@
-import type { ComponentProps, Ref } from 'react';
+import type { Ref } from 'react';
 import { forwardRef } from 'react';
 
-import { InputBox } from '../InputBox';
+import { InputBox, type InputBoxProps } from '../InputBox';
 
-type NumberInputProps = Omit<ComponentProps<typeof InputBox>, 'type'>;
+type NumberInputProps = Omit<InputBoxProps, 'type'>;
 
 /**
  * An input for numbers.
diff --git a/packages/fuselage/src/components/PaginatedSelect/PaginatedMultiSelectFiltered.tsx b/packages/fuselage/src/components/PaginatedSelect/PaginatedMultiSelectFiltered.tsx
index 3bfb1e29c4..09d0a13266 100644
--- a/packages/fuselage/src/components/PaginatedSelect/PaginatedMultiSelectFiltered.tsx
+++ b/packages/fuselage/src/components/PaginatedSelect/PaginatedMultiSelectFiltered.tsx
@@ -2,7 +2,7 @@ import type { ComponentProps, Ref, FormEvent } from 'react';
 import { useCallback, forwardRef } from 'react';
 
 import Flex from '../Flex';
-import { InputBox } from '../InputBox';
+import { Input, type InputProps } from '../InputBox';
 
 import PaginatedMultiSelect from './PaginatedMultiSelect';
 
@@ -21,15 +21,11 @@ export const PaginatedMultiSelectFiltered = ({
   const anchor = useCallback(
     forwardRef(
       (
-        {
-          children: _children,
-          filter,
-          ...props
-        }: ComponentProps<typeof InputBox>,
+        { children: _children, filter, ...props }: InputProps,
         ref: Ref<HTMLInputElement>,
       ) => (
         <Flex.Item grow={1}>
-          <InputBox.Input
+          <Input
             ref={ref}
             placeholder={placeholder}
             value={filter}
diff --git a/packages/fuselage/src/components/PaginatedSelect/PaginatedSelectFiltered.tsx b/packages/fuselage/src/components/PaginatedSelect/PaginatedSelectFiltered.tsx
index 29c2dd9f7f..3a95cf8050 100644
--- a/packages/fuselage/src/components/PaginatedSelect/PaginatedSelectFiltered.tsx
+++ b/packages/fuselage/src/components/PaginatedSelect/PaginatedSelectFiltered.tsx
@@ -2,7 +2,7 @@ import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import type { FormEvent, Ref } from 'react';
 import { useMemo, forwardRef } from 'react';
 
-import { InputBox } from '../InputBox';
+import { Input } from '../InputBox';
 
 import type { PaginatedSelectProps } from './PaginatedSelect';
 import { PaginatedSelect } from './PaginatedSelect';
@@ -29,7 +29,7 @@ export const PaginatedSelectFiltered = ({
           }: PaginatedSelectFilteredProps,
           ref: Ref<HTMLInputElement>,
         ) => (
-          <InputBox.Input
+          <Input
             mi={4}
             flexGrow={1}
             className='rcx-select__focus'
diff --git a/packages/fuselage/src/components/PasswordInput/PasswordInput.tsx b/packages/fuselage/src/components/PasswordInput/PasswordInput.tsx
index d72642fd8d..c26274aac8 100644
--- a/packages/fuselage/src/components/PasswordInput/PasswordInput.tsx
+++ b/packages/fuselage/src/components/PasswordInput/PasswordInput.tsx
@@ -1,13 +1,13 @@
 import { useToggle } from '@rocket.chat/fuselage-hooks';
-import type { ComponentProps, Ref } from 'react';
+import type { Ref } from 'react';
 import { forwardRef } from 'react';
 
 import { Icon } from '../Icon';
-import { InputBox } from '../InputBox';
+import { InputBox, type InputBoxProps } from '../InputBox';
 
 // TODO: fix a11y issues
 
-type PasswordInputProps = Omit<ComponentProps<typeof InputBox>, 'type'>;
+type PasswordInputProps = Omit<InputBoxProps, 'type'>;
 
 const PasswordInput = forwardRef(function PasswordInput(
   props: PasswordInputProps,
diff --git a/packages/fuselage/src/components/SearchInput/SearchInput.tsx b/packages/fuselage/src/components/SearchInput/SearchInput.tsx
index ea0f3fd3dc..b67fc0c594 100644
--- a/packages/fuselage/src/components/SearchInput/SearchInput.tsx
+++ b/packages/fuselage/src/components/SearchInput/SearchInput.tsx
@@ -1,9 +1,9 @@
-import type { ComponentProps, ReactNode, Ref } from 'react';
+import type { ReactNode, Ref } from 'react';
 import { forwardRef } from 'react';
 
-import { InputBox } from '../InputBox';
+import { InputBox, type InputBoxProps } from '../InputBox';
 
-type SearchInputProps = Omit<ComponentProps<typeof InputBox>, 'type'> & {
+type SearchInputProps = Omit<InputBoxProps, 'type'> & {
   addon?: ReactNode;
   error?: string;
 };
diff --git a/packages/fuselage/src/components/Select/SelectAnchorParams.ts b/packages/fuselage/src/components/Select/SelectAnchorParams.ts
index 5556e27d74..17b3e9cdd0 100644
--- a/packages/fuselage/src/components/Select/SelectAnchorParams.ts
+++ b/packages/fuselage/src/components/Select/SelectAnchorParams.ts
@@ -7,7 +7,7 @@ import type {
 } from 'react';
 
 export type SelectAnchorParams = {
-  ref: Ref<Element>;
+  ref: Ref<HTMLInputElement>;
   children: ReactNode;
   disabled: boolean;
   onClick: MouseEventHandler;
diff --git a/packages/fuselage/src/components/Select/SelectFilteredAnchor.tsx b/packages/fuselage/src/components/Select/SelectFilteredAnchor.tsx
index 19daed280f..d7922aac5b 100644
--- a/packages/fuselage/src/components/Select/SelectFilteredAnchor.tsx
+++ b/packages/fuselage/src/components/Select/SelectFilteredAnchor.tsx
@@ -8,7 +8,7 @@ import type {
 } from 'react';
 import { forwardRef } from 'react';
 
-import { InputBox } from '../InputBox';
+import { Input } from '../InputBox';
 
 type SelectFilteredAnchorProps = {
   children: ReactNode;
@@ -30,10 +30,10 @@ const SelectFilteredAnchor = forwardRef(function SelectFilteredAnchor(
     placeholder,
     ...props
   }: SelectFilteredAnchorProps,
-  ref: Ref<Element>,
+  ref: Ref<HTMLInputElement>,
 ) {
   return (
-    <InputBox.Input
+    <Input
       mi={4}
       flexGrow={1}
       className='rcx-select__focus'
diff --git a/packages/fuselage/src/components/SelectInput/SelectInput.stories.tsx b/packages/fuselage/src/components/SelectInput/SelectInput.stories.tsx
index 6ca581bee0..cc49cc288e 100644
--- a/packages/fuselage/src/components/SelectInput/SelectInput.stories.tsx
+++ b/packages/fuselage/src/components/SelectInput/SelectInput.stories.tsx
@@ -4,8 +4,7 @@ import type { ComponentType } from 'react';
 import { PropsVariationSection } from '../../../.storybook/helpers';
 import { Icon } from '../Icon';
 
-import { SelectInputOption } from '.';
-import { SelectInput } from './SelectInput';
+import { SelectInputOption, SelectInput } from '.';
 
 export default {
   title: 'Inputs/SelectInput',
diff --git a/packages/fuselage/src/components/SelectInput/SelectInput.tsx b/packages/fuselage/src/components/SelectInput/SelectInput.tsx
index a0cfe8c36a..c71a6a0337 100644
--- a/packages/fuselage/src/components/SelectInput/SelectInput.tsx
+++ b/packages/fuselage/src/components/SelectInput/SelectInput.tsx
@@ -1,12 +1,14 @@
-import type { ComponentProps, FormEvent, ReactNode, Ref } from 'react';
+import type { FormEvent, ReactNode, Ref } from 'react';
 import { forwardRef, useState, useCallback } from 'react';
 
 import { Icon } from '../Icon';
-import { InputBox } from '../InputBox';
+import { InputBox, type InputBoxProps } from '../InputBox';
+
+import SelectInputPlaceholder from './SelectInputPlaceholder';
 
 type SelectInputOptions = readonly (readonly [string, string])[];
 
-type SelectInputProps = Omit<ComponentProps<typeof InputBox>, 'type'> & {
+export type SelectInputProps = Omit<InputBoxProps, 'type'> & {
   error?: string;
   options?: SelectInputOptions;
   htmlSize?: number;
@@ -16,7 +18,7 @@ type SelectInputProps = Omit<ComponentProps<typeof InputBox>, 'type'> & {
 /**
  * An input for selection of options.
  */
-export const SelectInput = forwardRef(function SelectInput(
+const SelectInput = forwardRef(function SelectInput(
   { children, multiple, placeholder, onChange, ...props }: SelectInputProps,
   ref: Ref<HTMLElement>,
 ) {
@@ -53,9 +55,11 @@ export const SelectInput = forwardRef(function SelectInput(
       onChange={handleChange}
     >
       {placeholder && (
-        <InputBox.Placeholder value=''>{placeholder}</InputBox.Placeholder>
+        <SelectInputPlaceholder value=''>{placeholder}</SelectInputPlaceholder>
       )}
       {children}
     </InputBox>
   );
 });
+
+export default SelectInput;
diff --git a/packages/fuselage/src/components/SelectInput/SelectInputOption.tsx b/packages/fuselage/src/components/SelectInput/SelectInputOption.tsx
new file mode 100644
index 0000000000..fee4626701
--- /dev/null
+++ b/packages/fuselage/src/components/SelectInput/SelectInputOption.tsx
@@ -0,0 +1,15 @@
+import type { Ref } from 'react';
+import { forwardRef } from 'react';
+
+import Box, { type BoxProps } from '../Box';
+
+export type SelectInputOptionProps = BoxProps;
+
+const SelectInputOption = forwardRef(function SelectInputOption(
+  props: SelectInputOptionProps,
+  ref: Ref<HTMLInputElement>,
+) {
+  return <Box is='option' rcx-input-box__option ref={ref} {...props} />;
+});
+
+export default SelectInputOption;
diff --git a/packages/fuselage/src/components/SelectInput/SelectInputPlaceholder.tsx b/packages/fuselage/src/components/SelectInput/SelectInputPlaceholder.tsx
new file mode 100644
index 0000000000..55c4e5550b
--- /dev/null
+++ b/packages/fuselage/src/components/SelectInput/SelectInputPlaceholder.tsx
@@ -0,0 +1,15 @@
+import type { Ref } from 'react';
+import { forwardRef } from 'react';
+
+import Box, { type BoxProps } from '../Box';
+
+export type SelectInputPlaceholderProps = BoxProps;
+
+const SelectInputPlaceholder = forwardRef(function Placeholder(
+  props: SelectInputPlaceholderProps,
+  ref: Ref<HTMLOptionElement>,
+) {
+  return <Box is='option' rcx-input-box__placeholder ref={ref} {...props} />;
+});
+
+export default SelectInputPlaceholder;
diff --git a/packages/fuselage/src/components/SelectInput/index.ts b/packages/fuselage/src/components/SelectInput/index.ts
index 8f65901d32..05b94827e7 100644
--- a/packages/fuselage/src/components/SelectInput/index.ts
+++ b/packages/fuselage/src/components/SelectInput/index.ts
@@ -1,5 +1,5 @@
-import { Option } from '../InputBox/Option';
-
-export * from './SelectInput';
-
-export const SelectInputOption = Option;
+export { default as SelectInput, type SelectInputProps } from './SelectInput';
+export {
+  default as SelectInputOption,
+  type SelectInputOptionProps,
+} from './SelectInputOption';
diff --git a/packages/fuselage/src/components/TelephoneInput/TelephoneInput.tsx b/packages/fuselage/src/components/TelephoneInput/TelephoneInput.tsx
index 9abd832500..5f7e002234 100644
--- a/packages/fuselage/src/components/TelephoneInput/TelephoneInput.tsx
+++ b/packages/fuselage/src/components/TelephoneInput/TelephoneInput.tsx
@@ -1,9 +1,9 @@
-import type { ComponentProps, ReactNode, Ref } from 'react';
+import type { ReactNode, Ref } from 'react';
 import { forwardRef } from 'react';
 
-import { InputBox } from '../InputBox';
+import { InputBox, type InputBoxProps } from '../InputBox';
 
-type TelephoneInputProps = Omit<ComponentProps<typeof InputBox>, 'type'> & {
+type TelephoneInputProps = Omit<InputBoxProps, 'type'> & {
   addon?: ReactNode;
   input?: ReactNode;
   error?: string;
diff --git a/packages/fuselage/src/components/TextAreaInput/TextAreaInput.tsx b/packages/fuselage/src/components/TextAreaInput/TextAreaInput.tsx
index a7280a5797..4034d71559 100644
--- a/packages/fuselage/src/components/TextAreaInput/TextAreaInput.tsx
+++ b/packages/fuselage/src/components/TextAreaInput/TextAreaInput.tsx
@@ -1,9 +1,9 @@
-import type { ComponentProps, ReactNode, Ref } from 'react';
+import type { ReactNode, Ref } from 'react';
 import { forwardRef } from 'react';
 
-import { InputBox } from '../InputBox';
+import { InputBox, type InputBoxProps } from '../InputBox';
 
-type TextAreaInputProps = Omit<ComponentProps<typeof InputBox>, 'type'> & {
+type TextAreaInputProps = Omit<InputBoxProps, 'type'> & {
   addon?: ReactNode;
   error?: string;
 };
diff --git a/packages/fuselage/src/components/TextInput/TextInput.tsx b/packages/fuselage/src/components/TextInput/TextInput.tsx
index 71aa94ce8a..d94839b88f 100644
--- a/packages/fuselage/src/components/TextInput/TextInput.tsx
+++ b/packages/fuselage/src/components/TextInput/TextInput.tsx
@@ -1,9 +1,9 @@
-import type { ComponentProps, ReactNode, Ref } from 'react';
+import type { ReactNode, Ref } from 'react';
 import { forwardRef } from 'react';
 
-import { InputBox } from '../InputBox';
+import { InputBox, type InputBoxProps } from '../InputBox';
 
-export type TextInputProps = Omit<ComponentProps<typeof InputBox>, 'type'> & {
+export type TextInputProps = Omit<InputBoxProps, 'type'> & {
   addon?: ReactNode;
   error?: string;
 };
diff --git a/packages/fuselage/src/components/UrlInput/UrlInput.tsx b/packages/fuselage/src/components/UrlInput/UrlInput.tsx
index e35f27d4cf..65a3980f81 100644
--- a/packages/fuselage/src/components/UrlInput/UrlInput.tsx
+++ b/packages/fuselage/src/components/UrlInput/UrlInput.tsx
@@ -1,9 +1,9 @@
-import type { ComponentProps, Ref } from 'react';
+import type { Ref } from 'react';
 import { forwardRef } from 'react';
 
-import { InputBox } from '../InputBox';
+import { InputBox, type InputBoxProps } from '../InputBox';
 
-type UrlInputProps = Omit<ComponentProps<typeof InputBox>, 'type'>;
+type UrlInputProps = Omit<InputBoxProps, 'type'>;
 
 const UrlInput = forwardRef(function UrlInput(
   props: UrlInputProps,
diff --git a/packages/layout/src/layouts/HorizontalWizardLayout/HorizontalWizardLayout.stories.tsx b/packages/layout/src/layouts/HorizontalWizardLayout/HorizontalWizardLayout.stories.tsx
index bab70e8591..3279b6e376 100644
--- a/packages/layout/src/layouts/HorizontalWizardLayout/HorizontalWizardLayout.stories.tsx
+++ b/packages/layout/src/layouts/HorizontalWizardLayout/HorizontalWizardLayout.stories.tsx
@@ -5,7 +5,7 @@ import {
   FieldHint,
   FieldLabel,
   FieldRow,
-  InputBox,
+  InputBoxSkeleton,
 } from '@rocket.chat/fuselage';
 import type { Meta, StoryFn } from '@storybook/react-webpack5';
 
@@ -63,7 +63,7 @@ export const Default: StoryFn<typeof HorizontalWizardLayout> = (props) => (
               <FieldLabel>Label</FieldLabel>
               <FieldDescription>Description</FieldDescription>
               <FieldRow>
-                <InputBox.Skeleton />
+                <InputBoxSkeleton />
               </FieldRow>
               <FieldError>Error</FieldError>
               <FieldHint>Hint</FieldHint>
@@ -98,7 +98,7 @@ export const WithScroll: StoryFn<typeof HorizontalWizardLayout> = (props) => (
             <FieldLabel>Label</FieldLabel>
             <FieldDescription>Description</FieldDescription>
             <FieldRow>
-              <InputBox.Skeleton />
+              <InputBoxSkeleton />
             </FieldRow>
             <FieldRow>Error</FieldRow>
             <FieldHint>Hint</FieldHint>
@@ -107,7 +107,7 @@ export const WithScroll: StoryFn<typeof HorizontalWizardLayout> = (props) => (
             <FieldLabel>Label</FieldLabel>
             <FieldDescription>Description</FieldDescription>
             <FieldRow>
-              <InputBox.Skeleton />
+              <InputBoxSkeleton />
             </FieldRow>
             <FieldRow>Error</FieldRow>
             <FieldHint>Hint</FieldHint>
@@ -116,7 +116,7 @@ export const WithScroll: StoryFn<typeof HorizontalWizardLayout> = (props) => (
             <FieldLabel>Label</FieldLabel>
             <FieldDescription>Description</FieldDescription>
             <FieldRow>
-              <InputBox.Skeleton />
+              <InputBoxSkeleton />
             </FieldRow>
             <FieldRow>Error</FieldRow>
             <FieldHint>Hint</FieldHint>
@@ -125,7 +125,7 @@ export const WithScroll: StoryFn<typeof HorizontalWizardLayout> = (props) => (
             <FieldLabel>Label</FieldLabel>
             <FieldDescription>Description</FieldDescription>
             <FieldRow>
-              <InputBox.Skeleton />
+              <InputBoxSkeleton />
             </FieldRow>
             <FieldRow>Error</FieldRow>
             <FieldHint>Hint</FieldHint>
@@ -134,7 +134,7 @@ export const WithScroll: StoryFn<typeof HorizontalWizardLayout> = (props) => (
             <FieldLabel>Label</FieldLabel>
             <FieldDescription>Description</FieldDescription>
             <FieldRow>
-              <InputBox.Skeleton />
+              <InputBoxSkeleton />
             </FieldRow>
             <FieldRow>Error</FieldRow>
             <FieldHint>Hint</FieldHint>
@@ -143,7 +143,7 @@ export const WithScroll: StoryFn<typeof HorizontalWizardLayout> = (props) => (
             <FieldLabel>Label</FieldLabel>
             <FieldDescription>Description</FieldDescription>
             <FieldRow>
-              <InputBox.Skeleton />
+              <InputBoxSkeleton />
             </FieldRow>
             <FieldRow>Error</FieldRow>
             <FieldHint>Hint</FieldHint>
@@ -152,7 +152,7 @@ export const WithScroll: StoryFn<typeof HorizontalWizardLayout> = (props) => (
             <FieldLabel>Label</FieldLabel>
             <FieldDescription>Description</FieldDescription>
             <FieldRow>
-              <InputBox.Skeleton />
+              <InputBoxSkeleton />
             </FieldRow>
             <FieldRow>Error</FieldRow>
             <FieldHint>Hint</FieldHint>
@@ -161,7 +161,7 @@ export const WithScroll: StoryFn<typeof HorizontalWizardLayout> = (props) => (
             <FieldLabel>Label</FieldLabel>
             <FieldDescription>Description</FieldDescription>
             <FieldRow>
-              <InputBox.Skeleton />
+              <InputBoxSkeleton />
             </FieldRow>
             <FieldRow>Error</FieldRow>
             <FieldHint>Hint</FieldHint>
@@ -170,7 +170,7 @@ export const WithScroll: StoryFn<typeof HorizontalWizardLayout> = (props) => (
             <FieldLabel>Label</FieldLabel>
             <FieldDescription>Description</FieldDescription>
             <FieldRow>
-              <InputBox.Skeleton />
+              <InputBoxSkeleton />
             </FieldRow>
             <FieldRow>Error</FieldRow>
             <FieldHint>Hint</FieldHint>
@@ -179,7 +179,7 @@ export const WithScroll: StoryFn<typeof HorizontalWizardLayout> = (props) => (
             <FieldLabel>Label</FieldLabel>
             <FieldDescription>Description</FieldDescription>
             <FieldRow>
-              <InputBox.Skeleton />
+              <InputBoxSkeleton />
             </FieldRow>
             <FieldRow>Error</FieldRow>
             <FieldHint>Hint</FieldHint>
@@ -188,7 +188,7 @@ export const WithScroll: StoryFn<typeof HorizontalWizardLayout> = (props) => (
             <FieldLabel>Label</FieldLabel>
             <FieldDescription>Description</FieldDescription>
             <FieldRow>
-              <InputBox.Skeleton />
+              <InputBoxSkeleton />
             </FieldRow>
             <FieldRow>Error</FieldRow>
             <FieldHint>Hint</FieldHint>
@@ -197,7 +197,7 @@ export const WithScroll: StoryFn<typeof HorizontalWizardLayout> = (props) => (
             <FieldLabel>Label</FieldLabel>
             <FieldDescription>Description</FieldDescription>
             <FieldRow>
-              <InputBox.Skeleton />
+              <InputBoxSkeleton />
             </FieldRow>
             <FieldRow>Error</FieldRow>
             <FieldHint>Hint</FieldHint>
diff --git a/packages/layout/src/layouts/VerticalWizardLayout/VerticalWizardLayout.stories.tsx b/packages/layout/src/layouts/VerticalWizardLayout/VerticalWizardLayout.stories.tsx
index 11d1b48058..08a63d9a2b 100644
--- a/packages/layout/src/layouts/VerticalWizardLayout/VerticalWizardLayout.stories.tsx
+++ b/packages/layout/src/layouts/VerticalWizardLayout/VerticalWizardLayout.stories.tsx
@@ -5,7 +5,7 @@ import {
   FieldHint,
   FieldLabel,
   FieldRow,
-  InputBox,
+  InputBoxSkeleton,
 } from '@rocket.chat/fuselage';
 import type { Meta, StoryFn } from '@storybook/react-webpack5';
 
@@ -42,7 +42,7 @@ export const Default: StoryFn<typeof VerticalWizardLayout> = () => (
             <FieldLabel>Label</FieldLabel>
             <FieldDescription>Description</FieldDescription>
             <FieldRow>
-              <InputBox.Skeleton />
+              <InputBoxSkeleton />
             </FieldRow>
             <FieldError>Error</FieldError>
             <FieldHint>Hint</FieldHint>
@@ -71,7 +71,7 @@ export const WithScroll: StoryFn<typeof VerticalWizardLayout> = () => (
             <FieldLabel>Label</FieldLabel>
             <FieldDescription>Description</FieldDescription>
             <FieldRow>
-              <InputBox.Skeleton />
+              <InputBoxSkeleton />
             </FieldRow>
             <FieldError>Error</FieldError>
             <FieldHint>Hint</FieldHint>
@@ -80,7 +80,7 @@ export const WithScroll: StoryFn<typeof VerticalWizardLayout> = () => (
             <FieldLabel>Label</FieldLabel>
             <FieldDescription>Description</FieldDescription>
             <FieldRow>
-              <InputBox.Skeleton />
+              <InputBoxSkeleton />
             </FieldRow>
             <FieldError>Error</FieldError>
             <FieldHint>Hint</FieldHint>
@@ -89,7 +89,7 @@ export const WithScroll: StoryFn<typeof VerticalWizardLayout> = () => (
             <FieldLabel>Label</FieldLabel>
             <FieldDescription>Description</FieldDescription>
             <FieldRow>
-              <InputBox.Skeleton />
+              <InputBoxSkeleton />
             </FieldRow>
             <FieldError>Error</FieldError>
             <FieldHint>Hint</FieldHint>
@@ -98,7 +98,7 @@ export const WithScroll: StoryFn<typeof VerticalWizardLayout> = () => (
             <FieldLabel>Label</FieldLabel>
             <FieldDescription>Description</FieldDescription>
             <FieldRow>
-              <InputBox.Skeleton />
+              <InputBoxSkeleton />
             </FieldRow>
             <FieldError>Error</FieldError>
             <FieldHint>Hint</FieldHint>
@@ -107,7 +107,7 @@ export const WithScroll: StoryFn<typeof VerticalWizardLayout> = () => (
             <FieldLabel>Label</FieldLabel>
             <FieldDescription>Description</FieldDescription>
             <FieldRow>
-              <InputBox.Skeleton />
+              <InputBoxSkeleton />
             </FieldRow>
             <FieldError>Error</FieldError>
             <FieldHint>Hint</FieldHint>
@@ -116,7 +116,7 @@ export const WithScroll: StoryFn<typeof VerticalWizardLayout> = () => (
             <FieldLabel>Label</FieldLabel>
             <FieldDescription>Description</FieldDescription>
             <FieldRow>
-              <InputBox.Skeleton />
+              <InputBoxSkeleton />
             </FieldRow>
             <FieldError>Error</FieldError>
             <FieldHint>Hint</FieldHint>
@@ -125,7 +125,7 @@ export const WithScroll: StoryFn<typeof VerticalWizardLayout> = () => (
             <FieldLabel>Label</FieldLabel>
             <FieldDescription>Description</FieldDescription>
             <FieldRow>
-              <InputBox.Skeleton />
+              <InputBoxSkeleton />
             </FieldRow>
             <FieldError>Error</FieldError>
             <FieldHint>Hint</FieldHint>
@@ -134,7 +134,7 @@ export const WithScroll: StoryFn<typeof VerticalWizardLayout> = () => (
             <FieldLabel>Label</FieldLabel>
             <FieldDescription>Description</FieldDescription>
             <FieldRow>
-              <InputBox.Skeleton />
+              <InputBoxSkeleton />
             </FieldRow>
             <FieldError>Error</FieldError>
             <FieldHint>Hint</FieldHint>
@@ -143,7 +143,7 @@ export const WithScroll: StoryFn<typeof VerticalWizardLayout> = () => (
             <FieldLabel>Label</FieldLabel>
             <FieldDescription>Description</FieldDescription>
             <FieldRow>
-              <InputBox.Skeleton />
+              <InputBoxSkeleton />
             </FieldRow>
             <FieldError>Error</FieldError>
             <FieldHint>Hint</FieldHint>
@@ -152,7 +152,7 @@ export const WithScroll: StoryFn<typeof VerticalWizardLayout> = () => (
             <FieldLabel>Label</FieldLabel>
             <FieldDescription>Description</FieldDescription>
             <FieldRow>
-              <InputBox.Skeleton />
+              <InputBoxSkeleton />
             </FieldRow>
             <FieldError>Error</FieldError>
             <FieldHint>Hint</FieldHint>
@@ -161,7 +161,7 @@ export const WithScroll: StoryFn<typeof VerticalWizardLayout> = () => (
             <FieldLabel>Label</FieldLabel>
             <FieldDescription>Description</FieldDescription>
             <FieldRow>
-              <InputBox.Skeleton />
+              <InputBoxSkeleton />
             </FieldRow>
             <FieldError>Error</FieldError>
             <FieldHint>Hint</FieldHint>
@@ -170,7 +170,7 @@ export const WithScroll: StoryFn<typeof VerticalWizardLayout> = () => (
             <FieldLabel>Label</FieldLabel>
             <FieldDescription>Description</FieldDescription>
             <FieldRow>
-              <InputBox.Skeleton />
+              <InputBoxSkeleton />
             </FieldRow>
             <FieldError>Error</FieldError>
             <FieldHint>Hint</FieldHint>
@@ -179,7 +179,7 @@ export const WithScroll: StoryFn<typeof VerticalWizardLayout> = () => (
             <FieldLabel>Label</FieldLabel>
             <FieldDescription>Description</FieldDescription>
             <FieldRow>
-              <InputBox.Skeleton />
+              <InputBoxSkeleton />
             </FieldRow>
             <FieldError>Error</FieldError>
             <FieldHint>Hint</FieldHint>
diff --git a/packages/onboarding-ui/src/forms/CreateCloudWorkspaceForm/WorkspaceUrlInput.tsx b/packages/onboarding-ui/src/forms/CreateCloudWorkspaceForm/WorkspaceUrlInput.tsx
index 9d0005633d..b46914a339 100644
--- a/packages/onboarding-ui/src/forms/CreateCloudWorkspaceForm/WorkspaceUrlInput.tsx
+++ b/packages/onboarding-ui/src/forms/CreateCloudWorkspaceForm/WorkspaceUrlInput.tsx
@@ -1,8 +1,9 @@
+import type { InputBoxProps } from '@rocket.chat/fuselage';
 import { Box, InputBox } from '@rocket.chat/fuselage';
-import type { ComponentProps, ReactNode, Ref } from 'react';
+import type { ReactNode, Ref } from 'react';
 import { forwardRef } from 'react';
 
-type WorkspaceUrlInputProps = Omit<ComponentProps<typeof InputBox>, 'type'> & {
+type WorkspaceUrlInputProps = Omit<InputBoxProps, 'type'> & {
   addon?: ReactNode;
   error?: string | undefined;
   domain: string;