diff --git a/docs/components/InputText/InputText.stories.mdx b/docs/components/InputText/InputText.stories.mdx
index d3b5029813..92d7fabab7 100644
--- a/docs/components/InputText/InputText.stories.mdx
+++ b/docs/components/InputText/InputText.stories.mdx
@@ -176,13 +176,3 @@ If you need to capture the error message and render it outside of the component.
 Read the
 [InputValidation](../?path=/docs/components-forms-and-inputs-inputvalidation--docs)
 documentation.
-
-### Version 2 Shim (Expermimental)
-
-If you need to use the version 2 shim, you can pass `version={2}` to the
-`InputText` and provide the required props. Due to issues with typescript
-[see](https://github.com/microsoft/TypeScript/issues/32447) the aria attributes
-(and other props separated by `-`) are not typed correctly. This means that the
-shim will not enforce the version to be set to `2` when using these props. As a
-result version 1 usages will have these props appear in the intellisense but
-they will not do anything.
diff --git a/docs/components/InputText/Web.stories.tsx b/docs/components/InputText/Web.stories.tsx
index f22098f990..f19383046d 100644
--- a/docs/components/InputText/Web.stories.tsx
+++ b/docs/components/InputText/Web.stories.tsx
@@ -2,8 +2,6 @@ import React, { useState } from "react";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { InputText } from "@jobber/components/InputText";
 import { Button } from "@jobber/components/Button";
-import { Content } from "@jobber/components/Content";
-import { Grid } from "@jobber/components/Grid";
 import { Box } from "@jobber/components/Box";
 
 export default {
@@ -16,9 +14,7 @@ export default {
 } as ComponentMeta<typeof InputText>;
 
 const BasicTemplate: ComponentStory<typeof InputText> = args => {
-  const [value, setValue] = React.useState("");
-
-  return <InputText {...args} value={value} onChange={setValue} version={2} />;
+  return <InputText {...args} />;
 };
 
 export const Basic = BasicTemplate.bind({});
@@ -61,6 +57,7 @@ Toolbar.args = {
 
 export const Readonly = BasicTemplate.bind({});
 Readonly.args = {
+  defaultValue: "Rocinante",
   readonly: true,
 };
 
@@ -76,264 +73,6 @@ Clearable.args = {
   clearable: "always",
 };
 
-export const VersionComparison = () => {
-  const [values, setValues] = React.useState({
-    basic: "",
-    multiline: "",
-    error: "",
-    disabled: "",
-    readonly: "",
-    withToolbar: "",
-    prefix: "",
-    suffix: "",
-    both: "",
-    rightAlign: "",
-    centerAlign: "",
-    sizeSmall: "",
-    sizeLarge: "",
-    inline: "",
-    multilineResize: "",
-  });
-  const [multiline, setMultiline] = React.useState(false);
-  const [inline, setInline] = React.useState(false);
-  const [invalid, setInvalid] = React.useState<boolean | undefined>(undefined);
-  const [disabled, setDisabled] = React.useState(false);
-  const [errorMessage, setErrorMessage] = React.useState<string | undefined>();
-  const [description, setDescription] = React.useState<string>("");
-
-  const extraProps = {
-    invalid,
-    error: errorMessage,
-    multiline,
-    inline,
-    disabled,
-    description,
-  };
-
-  const handleChange = (field: keyof typeof values) => (value: string) => {
-    setValues(prev => ({ ...prev, [field]: value }));
-  };
-
-  const toolbar = (
-    <div style={{ display: "flex", gap: "0.5rem" }}>
-      <Button label="Rewrite" size="small" icon="sparkles" fullWidth={false} />
-      <Button
-        ariaLabel="Undo"
-        size="small"
-        icon="redo"
-        type="tertiary"
-        fullWidth={false}
-      />
-    </div>
-  );
-
-  const renderBothVersions = (
-    title: string,
-    props: Record<string, unknown>,
-    field: keyof typeof values,
-  ) => (
-    <Grid>
-      <Grid.Cell size={{ xs: 12 }}>
-        <h3>{title}</h3>
-      </Grid.Cell>
-      <Grid.Cell size={{ xs: 6 }}>
-        <InputText
-          {...props}
-          version={1}
-          value={values[field]}
-          onChange={handleChange(field)}
-        />
-      </Grid.Cell>
-      <Grid.Cell size={{ xs: 6 }}>
-        <InputText
-          {...props}
-          version={2}
-          value={values[field]}
-          onChange={handleChange(field)}
-        />
-      </Grid.Cell>
-    </Grid>
-  );
-
-  return (
-    <Content>
-      <div style={{ display: "flex", flexDirection: "column", gap: "2rem" }}>
-        <Grid>
-          <Grid.Cell size={{ xs: 6 }}>
-            <h2>V1</h2>
-          </Grid.Cell>
-          <Grid.Cell size={{ xs: 6 }}>
-            <h2>V2</h2>
-          </Grid.Cell>
-        </Grid>
-        {renderBothVersions(
-          "Left Aligned (Default)",
-          {
-            placeholder: "Default alignment",
-            ...extraProps,
-          },
-          "basic",
-        )}
-
-        {renderBothVersions(
-          "Right Aligned",
-          {
-            placeholder: "Right aligned text",
-            align: "right",
-            ...extraProps,
-          },
-          "rightAlign",
-        )}
-
-        {renderBothVersions(
-          "Center Aligned",
-          {
-            placeholder: "Center aligned text",
-            align: "center",
-            ...extraProps,
-          },
-          "centerAlign",
-        )}
-
-        {renderBothVersions(
-          "With Prefix",
-          {
-            placeholder: "Input with prefix",
-            prefix: { label: "$" },
-            ...extraProps,
-          },
-          "prefix",
-        )}
-
-        {renderBothVersions(
-          "With Suffix",
-          {
-            placeholder: "Input with suffix",
-            suffix: { label: "%" },
-            ...extraProps,
-            title: "this is a title",
-          },
-          "suffix",
-        )}
-
-        {renderBothVersions(
-          "With Prefix and Suffix",
-          {
-            placeholder: "Input with both",
-            prefix: { icon: "search" },
-            suffix: { icon: "calendar" },
-            ...extraProps,
-          },
-          "both",
-        )}
-
-        {renderBothVersions(
-          "With Toolbar",
-          {
-            placeholder: "With toolbar",
-            toolbar: toolbar,
-            ...extraProps,
-          },
-          "withToolbar",
-        )}
-
-        {renderBothVersions(
-          "Combined Features",
-          {
-            placeholder: "All features",
-            align: "right",
-            prefix: { label: "$" },
-            suffix: { icon: "remove" },
-            toolbar: toolbar,
-            ...extraProps,
-          },
-          "both",
-        )}
-        {renderBothVersions(
-          "Size small",
-          {
-            placeholder: "With Size",
-            size: "small",
-            ...extraProps,
-          },
-          "sizeSmall",
-        )}
-        {renderBothVersions(
-          "Size large",
-          { placeholder: "With Size", size: "large", ...extraProps },
-          "sizeLarge",
-        )}
-        {renderBothVersions(
-          "Multiline Resize",
-          {
-            placeholder: "Multiline resize",
-            rows: { min: 2, max: 10 },
-            multiline: true,
-          },
-          "multilineResize",
-        )}
-      </div>
-      <Grid>
-        <Grid.Cell size={{ xs: 6 }}>
-          <Button
-            label="Toggle Multiline"
-            onClick={() => setMultiline(!multiline)}
-          />
-        </Grid.Cell>
-        <Grid.Cell size={{ xs: 6 }}>
-          <Button label="Toggle inline" onClick={() => setInline(!inline)} />
-        </Grid.Cell>
-        <Grid.Cell size={{ xs: 6 }}>
-          <Button
-            label="Toggle Invalid"
-            onClick={() => {
-              if (invalid) {
-                setInvalid(undefined);
-              } else {
-                setInvalid(true);
-              }
-            }}
-          />
-        </Grid.Cell>
-        <Grid.Cell size={{ xs: 6 }}>
-          <Button
-            label="Toggle Error message"
-            onClick={() => {
-              if (errorMessage) {
-                setErrorMessage(undefined);
-              } else {
-                setErrorMessage("This is an error message");
-              }
-            }}
-          />
-        </Grid.Cell>
-        <Grid.Cell size={{ xs: 6 }}>
-          <Button
-            label="Toggle Disabled"
-            onClick={() => {
-              setDisabled(!disabled);
-            }}
-          />
-        </Grid.Cell>
-        <Grid.Cell size={{ xs: 6 }}>
-          <Button
-            label="Toggle Description"
-            onClick={() => {
-              setDescription(description ? "" : "This is a description");
-            }}
-          />
-        </Grid.Cell>
-        <Grid.Cell size={{ xs: 6 }}>
-          <Button
-            label="Reset MultiLine resize"
-            onClick={() => handleChange("multilineResize")("")}
-          />
-        </Grid.Cell>
-      </Grid>
-    </Content>
-  );
-};
-
 const ControlledTemplate: ComponentStory<typeof InputText> = args => {
   const [value, setValue] = useState("");
 
diff --git a/packages/components/src/FormField/FormFieldTypes.ts b/packages/components/src/FormField/FormFieldTypes.ts
index 22758a6a1f..6477393281 100644
--- a/packages/components/src/FormField/FormFieldTypes.ts
+++ b/packages/components/src/FormField/FormFieldTypes.ts
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, ReactNode, RefObject } from "react";
+import { ChangeEvent, ReactNode, RefObject } from "react";
 import { RegisterOptions } from "react-hook-form";
 import { XOR } from "ts-xor";
 import { Clearable } from "@jobber/hooks/src/useShowClear";
@@ -222,12 +222,12 @@ export interface FormFieldProps extends CommonFormFieldProps {
   /**
    * Focus callback.
    */
-  onFocus?(event?: React.FocusEvent): void;
+  onFocus?(): void;
 
   /**
    * Blur callback.
    */
-  onBlur?(event?: React.FocusEvent): void;
+  onBlur?(): void;
 
   onKeyUp?(event: React.KeyboardEvent<HTMLInputElement>): void;
 
diff --git a/packages/components/src/FormField/hooks/useFormFieldWrapperStyles.ts b/packages/components/src/FormField/hooks/useFormFieldWrapperStyles.ts
index 9b2fafb024..598f0463b0 100644
--- a/packages/components/src/FormField/hooks/useFormFieldWrapperStyles.ts
+++ b/packages/components/src/FormField/hooks/useFormFieldWrapperStyles.ts
@@ -18,9 +18,9 @@ export interface useFormFieldWrapperStylesProps
     | "disabled"
     | "inline"
   > {
-  readonly error?: string;
-  suffixRef?: RefObject<HTMLDivElement>;
-  prefixRef?: RefObject<HTMLDivElement>;
+  readonly error: string;
+  suffixRef: RefObject<HTMLDivElement>;
+  prefixRef: RefObject<HTMLDivElement>;
 }
 
 export interface LabelPadding {
@@ -86,8 +86,8 @@ export function useFormFieldWrapperStyles({
       getAffixPaddding({
         value,
         type,
-        prefixWidth: prefixRef?.current?.offsetWidth || 0,
-        suffixWidth: suffixRef?.current?.offsetWidth || 0,
+        prefixWidth: prefixRef.current?.offsetWidth || 0,
+        suffixWidth: suffixRef.current?.offsetWidth || 0,
       }),
     );
   }, [value]);
diff --git a/packages/components/src/InputText/InputText.rebuilt.tsx b/packages/components/src/InputText/InputText.rebuilt.tsx
deleted file mode 100644
index 1575c3ce76..0000000000
--- a/packages/components/src/InputText/InputText.rebuilt.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import React, { forwardRef, useId } from "react";
-import omit from "lodash/omit";
-import { InputTextRebuiltProps } from "./InputText.types";
-import { useTextAreaResize } from "./useTextAreaResize";
-import { useInputTextActions } from "./useInputTextActions";
-import {
-  UseInputTextFormFieldReturn,
-  useInputTextFormField,
-} from "./useInputTextFormField";
-import {
-  FormFieldWrapper,
-  useAtlantisFormFieldName,
-  useFormFieldWrapperStyles,
-} from "../FormField";
-import { FormFieldPostFix } from "../FormField/FormFieldPostFix";
-import { mergeRefs } from "../utils/mergeRefs";
-
-export const InputTextSPAR = forwardRef(function InputTextInternal(
-  props: InputTextRebuiltProps,
-  inputRefs: React.Ref<HTMLInputElement | HTMLTextAreaElement>,
-) {
-  const inputTextRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(
-    null,
-  );
-
-  const wrapperRef = React.useRef<HTMLDivElement>(null);
-  const legacyPropHelper = {
-    ...props,
-    version: 1,
-  };
-  const id = useId();
-
-  const { rowRange } = useTextAreaResize({
-    rows: props.rows,
-    value: props.value,
-    inputRef: inputTextRef,
-    wrapperRef: wrapperRef,
-  });
-
-  const type = props.multiline ? "textarea" : "text";
-
-  const { inputStyle } = useFormFieldWrapperStyles(legacyPropHelper);
-
-  const { name } = useAtlantisFormFieldName({
-    nameProp: props.name,
-    id: props.id || id,
-  });
-
-  const { handleChange, handleBlur, handleFocus, handleKeyDown, handleClear } =
-    useInputTextActions({
-      onChange: props.onChange,
-      onBlur: props.onBlur,
-      onFocus: props.onFocus,
-      onEnter: props.onEnter,
-      inputRef: inputTextRef,
-    });
-
-  const inputProps = omit(props, [
-    "onChange",
-    "onBlur",
-    "onFocus",
-    "onEnter",
-    "size",
-    "placeholder",
-    "multiline",
-    "prefix",
-    "suffix",
-    "version",
-  ]);
-
-  const { fieldProps, descriptionIdentifier } = useInputTextFormField({
-    ...inputProps,
-    id,
-    name,
-    handleChange,
-    handleBlur,
-    handleFocus,
-    handleKeyDown,
-  });
-
-  return (
-    <FormFieldWrapper
-      disabled={props.disabled}
-      size={props.size}
-      align={props.align}
-      inline={props.inline}
-      autofocus={props.autoFocus}
-      name={name}
-      wrapperRef={wrapperRef}
-      error={props.error ?? ""}
-      invalid={Boolean(props.error || props.invalid)}
-      identifier={id}
-      descriptionIdentifier={descriptionIdentifier}
-      description={props.description}
-      clearable={props.clearable ?? "never"}
-      onClear={handleClear}
-      type={props.multiline ? "textarea" : "text"}
-      placeholder={props.placeholder}
-      value={props.value}
-      prefix={props.prefix}
-      suffix={props.suffix}
-      rows={rowRange.min}
-      toolbar={props.toolbar}
-      toolbarVisibility={props.toolbarVisibility}
-    >
-      <>
-        {type === "textarea" ? (
-          <TextArea
-            fieldProps={fieldProps}
-            rowRange={rowRange}
-            inputRefs={[inputRefs, inputTextRef]}
-            value={props.value}
-            inputStyle={inputStyle}
-          />
-        ) : (
-          <TextInput
-            fieldProps={fieldProps}
-            inputRefs={[inputRefs, inputTextRef]}
-            value={props.value}
-            inputStyle={inputStyle}
-          />
-        )}
-        <FormFieldPostFix
-          variation="spinner"
-          visible={props.loading ?? false}
-        />
-        {props.children}
-      </>
-    </FormFieldWrapper>
-  );
-});
-
-function TextArea({
-  fieldProps,
-  rowRange,
-  inputRefs,
-  value,
-  inputStyle,
-}: {
-  readonly fieldProps: UseInputTextFormFieldReturn["fieldProps"];
-  readonly rowRange: ReturnType<typeof useTextAreaResize>["rowRange"];
-  readonly inputRefs: React.Ref<HTMLTextAreaElement | HTMLInputElement>[];
-  readonly value: string;
-  readonly inputStyle: string;
-}) {
-  return (
-    <textarea
-      {...fieldProps}
-      rows={rowRange.min}
-      ref={mergeRefs(inputRefs)}
-      className={inputStyle}
-      value={value}
-    />
-  );
-}
-
-function TextInput({
-  fieldProps,
-  inputRefs,
-  value,
-  inputStyle,
-}: {
-  readonly fieldProps: UseInputTextFormFieldReturn["fieldProps"];
-  readonly inputRefs: React.Ref<HTMLTextAreaElement | HTMLInputElement>[];
-  readonly value: string;
-  readonly inputStyle: string;
-}) {
-  return (
-    <input
-      {...fieldProps}
-      ref={mergeRefs(inputRefs)}
-      className={inputStyle}
-      value={value}
-    />
-  );
-}
diff --git a/packages/components/src/InputText/InputText.test.tsx b/packages/components/src/InputText/InputText.test.tsx
index 41fa9f0b0d..c28b803c0e 100644
--- a/packages/components/src/InputText/InputText.test.tsx
+++ b/packages/components/src/InputText/InputText.test.tsx
@@ -1,347 +1,271 @@
 import React from "react";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { InputText } from ".";
-import { InputTextRef } from "./InputText.types";
+import { InputTextRef } from "./InputText";
+
+it("renders a regular input for text and numbers", () => {
+  const { container } = render(<InputText placeholder="Favourite colour" />);
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      <div
+        class="container"
+      >
+        <div
+          class="wrapper text"
+          data-testid="Form-Field-Wrapper"
+        >
+          <div
+            class="horizontalWrapper"
+          >
+            <div
+              class="inputWrapper"
+            >
+              <label
+                class="label"
+                for=":r0:"
+              >
+                Favourite colour
+              </label>
+              <div
+                class="childrenWrapper"
+                tabindex="-1"
+              >
+                <input
+                  class="input"
+                  id=":r0:"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `);
+});
 
-describe("InputText Version 1", () => {
-  it("renders a regular input for text and numbers", () => {
-    const { container } = render(<InputText placeholder="Favourite colour" />);
-    expect(container).toMatchSnapshot();
-  });
+it("renders a textarea", () => {
+  const { container } = render(
+    <InputText placeholder="Describe your favourite colour?" multiline />,
+  );
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      <div
+        class="container"
+      >
+        <div
+          class="wrapper text textarea"
+          data-testid="Form-Field-Wrapper"
+        >
+          <div
+            class="horizontalWrapper"
+          >
+            <div
+              class="inputWrapper"
+            >
+              <label
+                class="label"
+                for=":r1:"
+              >
+                Describe your favourite colour?
+              </label>
+              <div
+                class="childrenWrapper"
+                tabindex="-1"
+              >
+                <textarea
+                  class="input"
+                  id=":r1:"
+                  rows="3"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `);
+});
 
-  it("renders a textarea", () => {
-    const { container } = render(
-      <InputText placeholder="Describe your favourite colour?" multiline />,
-    );
-    expect(container).toMatchSnapshot();
-  });
+it("renders a textarea with 4 rows", () => {
+  const { container } = render(
+    <InputText
+      placeholder="Describe your favourite colour?"
+      multiline
+      rows={4}
+    />,
+  );
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      <div
+        class="container"
+      >
+        <div
+          class="wrapper text textarea"
+          data-testid="Form-Field-Wrapper"
+        >
+          <div
+            class="horizontalWrapper"
+          >
+            <div
+              class="inputWrapper"
+            >
+              <label
+                class="label"
+                for=":r2:"
+              >
+                Describe your favourite colour?
+              </label>
+              <div
+                class="childrenWrapper"
+                tabindex="-1"
+              >
+                <textarea
+                  class="input"
+                  id=":r2:"
+                  rows="4"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `);
+});
 
-  it("renders a textarea with 4 rows", () => {
-    const { container } = render(
-      <InputText
-        placeholder="Describe your favourite colour?"
-        multiline
-        rows={4}
-      />,
-    );
-    expect(container).toMatchSnapshot();
+test("it should call the handler with the new value", () => {
+  const placeholder = "I hold places.";
+  const newValue =
+    "The snake which cannot cast its skin has to die. As well the minds which are prevented from changing their opinions; they cease to be mind.";
+  const newerValue =
+    "They always say time changes things, but you actually have to change them yourself.";
+  const changeHandler = jest.fn();
+
+  const { getByLabelText } = render(
+    <InputText
+      name="Got milk?"
+      onChange={changeHandler}
+      placeholder={placeholder}
+    />,
+  );
+
+  fireEvent.change(getByLabelText(placeholder), {
+    target: { value: newValue },
   });
+  expect(changeHandler).toHaveBeenCalledWith(newValue);
 
-  it("should call the handler with the new value", async () => {
-    const placeholder = "I hold places.";
-    const newValue =
-      "The snake which cannot cast its skin has to die. As well the minds which are prevented from changing their opinions; they cease to be mind.";
-    const newerValue =
-      "They always say time changes things, but you actually have to change them yourself.";
-    const changeHandler = jest.fn();
-
-    const { getByLabelText } = render(
-      <InputText
-        name="Got milk?"
-        onChange={changeHandler}
-        placeholder={placeholder}
-      />,
-    );
-
-    fireEvent.change(getByLabelText(placeholder), {
-      target: { value: newValue },
-    });
-    expect(changeHandler).toHaveBeenCalledWith(newValue);
-
-    fireEvent.change(getByLabelText(placeholder), {
-      target: { value: newerValue },
-    });
-    expect(changeHandler).toHaveBeenCalledWith(newerValue);
+  fireEvent.change(getByLabelText(placeholder), {
+    target: { value: newerValue },
   });
+  expect(changeHandler).toHaveBeenCalledWith(newerValue);
+});
 
-  it("should handle inserting text", () => {
-    const initial = "Got milk?";
-    const result = `${initial}YUP`;
-    const secondResult = `${initial}YUPsure`;
-
-    const textRef = React.createRef<InputTextRef>();
-    const changeHandler = jest.fn();
-
-    render(
-      <InputText value={initial} onChange={changeHandler} ref={textRef} />,
-    );
-
-    textRef.current?.insert("YUP");
-    expect(changeHandler).toHaveBeenCalledWith(result);
-
-    textRef.current?.insert("sure");
-    expect(changeHandler).toHaveBeenCalledWith(secondResult);
-  });
-
-  describe("focusing", () => {
-    it("should focus input text", () => {
-      const placeholder = "Got milk?";
-
-      const textRef = React.createRef<InputTextRef>();
-
-      const { getByLabelText } = render(
-        <InputText placeholder={placeholder} ref={textRef} />,
-      );
+test("it should handle inserting text", () => {
+  const initial = "Got milk?";
+  const result = `${initial}YUP`;
+  const secondResult = `${initial}YUPsure`;
 
-      textRef.current?.focus();
-      expect(getByLabelText(placeholder)).toHaveFocus();
-    });
+  const textRef = React.createRef<InputTextRef>();
+  const changeHandler = jest.fn();
 
-    it("supports the autofocus attribute", async () => {
-      const placeholder = "Got milk?";
+  render(<InputText value={initial} onChange={changeHandler} ref={textRef} />);
 
-      const { getByLabelText } = render(
-        <InputText placeholder={placeholder} autofocus />,
-      );
-
-      expect(getByLabelText(placeholder)).toHaveFocus();
-    });
-  });
+  textRef.current?.insert("YUP");
+  expect(changeHandler).toHaveBeenCalledWith(result);
 
-  it("should scroll into view input text", () => {
-    const scrollIntoViewMock = jest.fn();
-    window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+  textRef.current?.insert("sure");
+  expect(changeHandler).toHaveBeenCalledWith(secondResult);
+});
 
+describe("focusing", () => {
+  test("it should focus input text", () => {
     const placeholder = "Got milk?";
 
     const textRef = React.createRef<InputTextRef>();
 
-    render(<InputText placeholder={placeholder} ref={textRef} />);
+    const { getByLabelText } = render(
+      <InputText placeholder={placeholder} ref={textRef} />,
+    );
 
-    textRef.current?.scrollIntoView();
-    expect(scrollIntoViewMock).toHaveBeenCalled();
+    textRef.current?.focus();
+    expect(getByLabelText(placeholder)).toHaveFocus();
   });
 
-  describe("toolbar", () => {
-    describe("without toolbar", () => {
-      it("should not render toolbar", () => {
-        render(<InputText placeholder="Favourite colour" />);
-        expect(
-          screen.queryByTestId("ATL-InputText-Toolbar"),
-        ).not.toBeInTheDocument();
-      });
-    });
-    describe("with toolbar and toolbarVisibility always", () => {
-      it("should always render toolbar", () => {
-        render(
-          <InputText
-            placeholder="Favourite movie"
-            toolbar={<h1>Bar Of Tool</h1>}
-            toolbarVisibility="always"
-          />,
-        );
-        expect(screen.getByTestId("ATL-InputText-Toolbar")).toBeInTheDocument();
-      });
-    });
-
-    describe("with toolbar and toolbarVisibility focus-within", () => {
-      it("should only render toolbar when focused", () => {
-        render(
-          <InputText
-            placeholder="Favourite movie"
-            toolbar={<h1>Bar Of Tool</h1>}
-          />,
-        );
-        expect(
-          screen.queryByTestId("ATL-InputText-Toolbar"),
-        ).not.toBeInTheDocument();
-
-        const input = screen.getByLabelText("Favourite movie");
-        fireEvent.focus(input);
-
-        expect(screen.getByTestId("ATL-InputText-Toolbar")).toBeInTheDocument();
-      });
-    });
-    describe("with multiline", () => {
-      describe("with toolbar and toolbarVisibility focus-within", () => {
-        it("should only render toolbar when focused", () => {
-          render(
-            <InputText
-              placeholder="Favourite movie"
-              toolbar={<h1>Bar Of Tool</h1>}
-              multiline
-            />,
-          );
-          expect(
-            screen.queryByTestId("ATL-InputText-Toolbar"),
-          ).not.toBeInTheDocument();
+  test("it supports the autofocus attribute", async () => {
+    const placeholder = "Got milk?";
 
-          const input = screen.getByLabelText("Favourite movie");
-          fireEvent.focus(input);
+    const { getByLabelText } = render(
+      <InputText placeholder={placeholder} autofocus />,
+    );
 
-          expect(
-            screen.getByTestId("ATL-InputText-Toolbar"),
-          ).toBeInTheDocument();
-        });
-      });
-    });
+    expect(getByLabelText(placeholder)).toHaveFocus();
   });
 });
 
-describe("InputText V2", () => {
-  const value = "";
-  it("renders a regular input for text and numbers", () => {
-    const { container } = render(
-      <InputText
-        value={value}
-        version={2}
-        placeholder="Describe your favourite colour?"
-        multiline
-      />,
-    );
+test("it should scroll into view input text", () => {
+  const scrollIntoViewMock = jest.fn();
+  window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
 
-    expect(container).toMatchSnapshot();
-  });
+  const placeholder = "Got milk?";
 
-  it("renders a textarea with 4 rows", () => {
-    const { container } = render(
-      <InputText
-        value={value}
-        version={2}
-        placeholder="Describe your favourite colour?"
-        multiline
-        rows={4}
-      />,
-    );
-    expect(container).toMatchSnapshot();
-  });
+  const textRef = React.createRef<InputTextRef>();
 
-  it("should call the handler with the new value", async () => {
-    const placeholder = "I hold places.";
-    const newValue =
-      "The snake which cannot cast its skin has to die. As well the minds which are prevented from changing their opinions; they cease to be mind.";
-    const newerValue =
-      "They always say time changes things, but you actually have to change them yourself.";
-    const changeHandler = jest.fn();
+  render(<InputText placeholder={placeholder} ref={textRef} />);
 
-    const { getByLabelText } = render(
-      <InputText
-        name="Got milk?"
-        value={value}
-        version={2}
-        onChange={changeHandler}
-        placeholder={placeholder}
-      />,
-    );
-
-    fireEvent.change(getByLabelText(placeholder), {
-      target: { value: newValue },
-    });
-    expect(changeHandler).toHaveBeenCalledWith(newValue, expect.anything());
+  textRef.current?.scrollIntoView();
+  expect(scrollIntoViewMock).toHaveBeenCalled();
+});
 
-    fireEvent.change(getByLabelText(placeholder), {
-      target: { value: newerValue },
+describe("toolbar", () => {
+  describe("without toolbar", () => {
+    it("should not render toolbar", () => {
+      render(<InputText placeholder="Favourite colour" />);
+      expect(
+        screen.queryByTestId("ATL-InputText-Toolbar"),
+      ).not.toBeInTheDocument();
     });
-    expect(changeHandler).toHaveBeenCalledWith(newerValue, expect.anything());
-  });
-
-  it("should render the description", () => {
-    const description = "This is a description";
-    render(
-      <InputText
-        value={value}
-        version={2}
-        placeholder="Favourite colour"
-        description={description}
-      />,
-    );
-    expect(screen.getByText(description)).toBeInTheDocument();
   });
-
-  describe("focusing", () => {
-    it("should focus input text", () => {
-      const placeholder = "Got milk?";
-
-      const textRef = React.createRef<InputTextRef>();
-
-      const { getByLabelText } = render(
+  describe("with toolbar and toolbarVisibility always", () => {
+    it("should always render toolbar", () => {
+      render(
         <InputText
-          placeholder={placeholder}
-          ref={textRef}
-          version={2}
-          value={value}
+          placeholder="Favourite movie"
+          toolbar={<h1>Bar Of Tool</h1>}
+          toolbarVisibility="always"
         />,
       );
-
-      textRef.current?.focus();
-      expect(getByLabelText(placeholder)).toHaveFocus();
+      expect(screen.getByTestId("ATL-InputText-Toolbar")).toBeInTheDocument();
     });
+  });
 
-    it("supports the autofocus attribute", async () => {
-      const placeholder = "Got milk?";
-
-      const { getByLabelText } = render(
+  describe("with toolbar and toolbarVisibility focus-within", () => {
+    it("should only render toolbar when focused", () => {
+      render(
         <InputText
-          placeholder={placeholder}
-          autoFocus
-          version={2}
-          value={value}
+          placeholder="Favourite movie"
+          toolbar={<h1>Bar Of Tool</h1>}
         />,
       );
+      expect(
+        screen.queryByTestId("ATL-InputText-Toolbar"),
+      ).not.toBeInTheDocument();
 
-      expect(getByLabelText(placeholder)).toHaveFocus();
-    });
-  });
-
-  it("should scroll into view input text", () => {
-    const scrollIntoViewMock = jest.fn();
-    window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+      const input = screen.getByLabelText("Favourite movie");
+      fireEvent.focus(input);
 
-    const placeholder = "Got milk?";
-
-    const textRef = React.createRef<InputTextRef>();
-
-    render(
-      <InputText
-        version={2}
-        value={value}
-        placeholder={placeholder}
-        ref={textRef}
-      />,
-    );
-
-    textRef.current?.scrollIntoView();
-    expect(scrollIntoViewMock).toHaveBeenCalled();
-  });
-
-  describe("toolbar", () => {
-    describe("without toolbar", () => {
-      it("should not render toolbar", () => {
-        render(
-          <InputText
-            placeholder="Favourite colour"
-            version={2}
-            value={value}
-          />,
-        );
-        expect(
-          screen.queryByTestId("ATL-InputText-Toolbar"),
-        ).not.toBeInTheDocument();
-      });
+      expect(screen.getByTestId("ATL-InputText-Toolbar")).toBeInTheDocument();
     });
-    describe("with toolbar and toolbarVisibility always", () => {
-      it("should always render toolbar", () => {
-        render(
-          <InputText
-            placeholder="Favourite movie"
-            version={2}
-            value={value}
-            toolbar={<h1>Bar Of Tool</h1>}
-            toolbarVisibility="always"
-          />,
-        );
-        expect(screen.getByTestId("ATL-InputText-Toolbar")).toBeInTheDocument();
-      });
-    });
-
+  });
+  describe("with multiline", () => {
     describe("with toolbar and toolbarVisibility focus-within", () => {
       it("should only render toolbar when focused", () => {
         render(
           <InputText
-            version={2}
-            value={value}
             placeholder="Favourite movie"
             toolbar={<h1>Bar Of Tool</h1>}
+            multiline
           />,
         );
         expect(
@@ -354,30 +278,5 @@ describe("InputText V2", () => {
         expect(screen.getByTestId("ATL-InputText-Toolbar")).toBeInTheDocument();
       });
     });
-    describe("with multiline", () => {
-      describe("with toolbar and toolbarVisibility focus-within", () => {
-        it("should only render toolbar when focused", () => {
-          render(
-            <InputText
-              version={2}
-              value={value}
-              placeholder="Favourite movie"
-              toolbar={<h1>Bar Of Tool</h1>}
-              multiline
-            />,
-          );
-          expect(
-            screen.queryByTestId("ATL-InputText-Toolbar"),
-          ).not.toBeInTheDocument();
-
-          const input = screen.getByLabelText("Favourite movie");
-          fireEvent.focus(input);
-
-          expect(
-            screen.getByTestId("ATL-InputText-Toolbar"),
-          ).toBeInTheDocument();
-        });
-      });
-    });
   });
 });
diff --git a/packages/components/src/InputText/InputText.tsx b/packages/components/src/InputText/InputText.tsx
index c957401355..2bbd28cfcf 100644
--- a/packages/components/src/InputText/InputText.tsx
+++ b/packages/components/src/InputText/InputText.tsx
@@ -1,7 +1,65 @@
 import React, { Ref, forwardRef, useImperativeHandle, useRef } from "react";
-import { InputTextPropOptions, InputTextRef } from "./InputText.types";
-import { useTextAreaResize } from "./useTextAreaResize";
-import { FieldActionsRef, FormField } from "../FormField";
+import { XOR } from "ts-xor";
+import { useSafeLayoutEffect } from "@jobber/hooks/useSafeLayoutEffect";
+import {
+  CommonFormFieldProps,
+  FieldActionsRef,
+  FormField,
+  FormFieldProps,
+} from "../FormField";
+
+export interface RowRange {
+  min: number;
+  max: number;
+}
+
+interface BaseProps
+  extends CommonFormFieldProps,
+    Pick<
+      FormFieldProps,
+      | "autofocus"
+      | "maxLength"
+      | "readonly"
+      | "autocomplete"
+      | "keyboard"
+      | "onEnter"
+      | "onFocus"
+      | "onBlur"
+      | "onChange"
+      | "inputRef"
+      | "validations"
+      | "defaultValue"
+      | "prefix"
+      | "suffix"
+      | "toolbar"
+      | "toolbarVisibility"
+    > {
+  multiline?: boolean;
+}
+
+export interface InputTextRef {
+  insert(text: string): void;
+  blur(): void;
+  focus(): void;
+  scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
+}
+
+interface MultilineProps extends BaseProps {
+  /**
+   * Use this when you're expecting a long answer.
+   */
+  readonly multiline: true;
+
+  /**
+   * Specifies the visible height of a long answer form field. Can be in the
+   * form of a single number to set a static height, or an object with a min
+   * and max keys indicating the minimum number of visible rows, and the
+   * maximum number of visible rows.
+   */
+  readonly rows?: number | RowRange;
+}
+
+type InputTextPropOptions = XOR<BaseProps, MultilineProps>;
 
 function InputTextInternal(
   props: InputTextPropOptions,
@@ -11,12 +69,7 @@ function InputTextInternal(
   const actionsRef = useRef<FieldActionsRef>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
 
-  const { resize, rowRange } = useTextAreaResize({
-    rows: props.rows,
-    value: props.value,
-    inputRef,
-    wrapperRef,
-  });
+  const rowRange = getRowRange();
 
   useImperativeHandle(ref, () => ({
     insert: (text: string) => {
@@ -45,6 +98,8 @@ function InputTextInternal(
     },
   }));
 
+  const resize = useAutoResize(inputRef, wrapperRef, rowRange, props.value);
+
   return (
     <FormField
       {...props}
@@ -60,7 +115,24 @@ function InputTextInternal(
   function handleChange(newValue: string) {
     props.onChange && props.onChange(newValue);
 
-    resize();
+    if (
+      inputRef &&
+      inputRef.current instanceof HTMLTextAreaElement &&
+      wrapperRef &&
+      wrapperRef?.current instanceof HTMLDivElement
+    ) {
+      resize(inputRef.current, wrapperRef.current);
+    }
+  }
+
+  function getRowRange(): RowRange {
+    if (props.rows === undefined) {
+      return { min: 3, max: 3 };
+    } else if (typeof props.rows === "object") {
+      return { min: props.rows.min, max: props.rows.max };
+    } else {
+      return { min: props.rows, max: props.rows };
+    }
   }
 
   function insertText(text: string) {
@@ -91,3 +163,71 @@ function insertAtCursor(
   input.selectionStart = input.selectionEnd = start + newText.length;
   input.focus();
 }
+
+function useAutoResize(
+  inputRef: React.RefObject<HTMLTextAreaElement | HTMLInputElement>,
+  wrapperRef: React.RefObject<HTMLDivElement>,
+  rowRange: RowRange,
+  value: string | number | Date | undefined,
+) {
+  useSafeLayoutEffect(() => {
+    if (
+      inputRef &&
+      inputRef.current instanceof HTMLTextAreaElement &&
+      wrapperRef &&
+      wrapperRef.current instanceof HTMLDivElement
+    ) {
+      resize(inputRef.current, wrapperRef.current);
+    }
+  }, [inputRef.current, wrapperRef.current]);
+
+  // When the consumer passes a new controlled value, we need to recheck the size.
+  // The timeout ensures the DOM has a enough time to render the new text before
+  // we access the height.
+  useSafeLayoutEffect(() => {
+    setTimeout(() => {
+      if (
+        inputRef &&
+        inputRef.current instanceof HTMLTextAreaElement &&
+        wrapperRef &&
+        wrapperRef.current instanceof HTMLDivElement
+      ) {
+        resize(inputRef.current, wrapperRef.current);
+      }
+    }, 0);
+  }, [value]);
+
+  function resize(textArea: HTMLTextAreaElement, wrapper: HTMLDivElement) {
+    if (rowRange.min === rowRange.max) return;
+
+    textArea.style.flexBasis = "auto";
+    wrapper.style.height = "auto";
+    textArea.style.flexBasis = textAreaHeight(textArea) + "px";
+  }
+
+  function textAreaHeight(textArea: HTMLTextAreaElement) {
+    const {
+      lineHeight,
+      borderBottomWidth,
+      borderTopWidth,
+      paddingBottom,
+      paddingTop,
+    } = window.getComputedStyle(textArea);
+
+    const maxHeight =
+      rowRange.max * parseFloat(lineHeight) +
+      parseFloat(borderTopWidth) +
+      parseFloat(borderBottomWidth) +
+      parseFloat(paddingTop) +
+      parseFloat(paddingBottom);
+
+    const scrollHeight =
+      textArea.scrollHeight +
+      parseFloat(borderTopWidth) +
+      parseFloat(borderBottomWidth);
+
+    return Math.min(scrollHeight, maxHeight);
+  }
+
+  return resize;
+}
diff --git a/packages/components/src/InputText/InputText.types.ts b/packages/components/src/InputText/InputText.types.ts
deleted file mode 100644
index 68521a0fd1..0000000000
--- a/packages/components/src/InputText/InputText.types.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-import { Clearable } from "@jobber/hooks/src";
-import { XOR } from "ts-xor";
-import {
-  AutocompleteTypes,
-  CommonFormFieldProps,
-  FormFieldProps,
-  FormFieldTypes,
-} from "../FormField";
-
-export interface RowRange {
-  min: number;
-  max: number;
-}
-
-export type InputTextVersion = 1 | 2 | undefined;
-
-export interface InputTextRebuiltProps
-  extends Omit<
-    React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>,
-    | "onChange"
-    | "onBlur"
-    | "maxLength"
-    | "rows"
-    | "size"
-    | "suffix"
-    | "prefix"
-    | "value"
-    | "max"
-    | "min"
-    | "defaultValue"
-  > {
-  readonly error?: string;
-
-  readonly invalid?: boolean;
-  readonly identifier?: string;
-  readonly autocomplete?: boolean | AutocompleteTypes;
-  readonly loading?: boolean;
-  readonly onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-  readonly children?: React.ReactNode;
-  readonly clearable?: Clearable;
-  /**
-   * Use this when you're expecting a long answer.
-   */
-  readonly multiline?: boolean;
-
-  /**
-   * Specifies the visible height of a long answer form field. Can be in the
-   * form of a single number to set a static height, or an object with a min
-   * and max keys indicating the minimum number of visible rows, and the
-   * maximum number of visible rows.
-   */
-  readonly rows?: number | RowRange;
-  readonly type?: FormFieldTypes;
-
-  /**
-   * Version 2 is highly experimental. Avoid using it unless you have talked with Atlantis first.
-   */
-  readonly version: 2;
-
-  readonly onChange?: (
-    newValue: string,
-    event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => void;
-  readonly onEnter?: FormFieldProps["onEnter"];
-
-  readonly onBlur?: FormFieldProps["onBlur"];
-  readonly value: string;
-
-  readonly maxLength?: number;
-
-  readonly size?: FormFieldProps["size"];
-  readonly inline?: FormFieldProps["inline"];
-  readonly align?: FormFieldProps["align"];
-
-  readonly toolbar?: FormFieldProps["toolbar"];
-  readonly toolbarVisibility?: FormFieldProps["toolbarVisibility"];
-
-  readonly prefix?: FormFieldProps["prefix"];
-  readonly suffix?: FormFieldProps["suffix"];
-  readonly description?: FormFieldProps["description"];
-}
-
-interface BaseProps
-  extends CommonFormFieldProps,
-    Pick<
-      FormFieldProps,
-      | "autofocus"
-      | "maxLength"
-      | "readonly"
-      | "autocomplete"
-      | "keyboard"
-      | "onEnter"
-      | "onFocus"
-      | "onBlur"
-      | "onChange"
-      | "inputRef"
-      | "validations"
-      | "defaultValue"
-      | "prefix"
-      | "suffix"
-      | "toolbar"
-      | "toolbarVisibility"
-      | "version"
-    > {
-  multiline?: boolean;
-}
-
-export interface InputTextRef {
-  insert(text: string): void;
-  blur(): void;
-  focus(): void;
-  scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
-}
-
-interface MultilineProps extends BaseProps {
-  /**
-   * Use this when you're expecting a long answer.
-   */
-  readonly multiline: true;
-
-  /**
-   * Specifies the visible height of a long answer form field. Can be in the
-   * form of a single number to set a static height, or an object with a min
-   * and max keys indicating the minimum number of visible rows, and the
-   * maximum number of visible rows.
-   */
-  readonly rows?: number | RowRange;
-}
-
-export type InputTextPropOptions = XOR<BaseProps, MultilineProps>;
diff --git a/packages/components/src/InputText/__snapshots__/InputText.test.tsx.snap b/packages/components/src/InputText/__snapshots__/InputText.test.tsx.snap
deleted file mode 100644
index d4f429b26e..0000000000
--- a/packages/components/src/InputText/__snapshots__/InputText.test.tsx.snap
+++ /dev/null
@@ -1,194 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`InputText V2 renders a regular input for text and numbers 1`] = `
-<div>
-  <div
-    class="container"
-  >
-    <div
-      class="wrapper text textarea"
-      data-testid="Form-Field-Wrapper"
-    >
-      <div
-        class="horizontalWrapper"
-      >
-        <div
-          class="inputWrapper"
-        >
-          <label
-            class="label"
-            for=":rf:"
-          >
-            Describe your favourite colour?
-          </label>
-          <div
-            class="childrenWrapper"
-            tabindex="-1"
-          >
-            <textarea
-              class="input"
-              id=":rf:"
-              name="generatedName--:rf:"
-              rows="3"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`InputText V2 renders a textarea with 4 rows 1`] = `
-<div>
-  <div
-    class="container"
-  >
-    <div
-      class="wrapper text textarea"
-      data-testid="Form-Field-Wrapper"
-    >
-      <div
-        class="horizontalWrapper"
-      >
-        <div
-          class="inputWrapper"
-        >
-          <label
-            class="label"
-            for=":rg:"
-          >
-            Describe your favourite colour?
-          </label>
-          <div
-            class="childrenWrapper"
-            tabindex="-1"
-          >
-            <textarea
-              class="input"
-              id=":rg:"
-              name="generatedName--:rg:"
-              rows="4"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`InputText Version 1 renders a regular input for text and numbers 1`] = `
-<div>
-  <div
-    class="container"
-  >
-    <div
-      class="wrapper text"
-      data-testid="Form-Field-Wrapper"
-    >
-      <div
-        class="horizontalWrapper"
-      >
-        <div
-          class="inputWrapper"
-        >
-          <label
-            class="label"
-            for=":r0:"
-          >
-            Favourite colour
-          </label>
-          <div
-            class="childrenWrapper"
-            tabindex="-1"
-          >
-            <input
-              class="input"
-              id=":r0:"
-              type="text"
-              value=""
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`InputText Version 1 renders a textarea 1`] = `
-<div>
-  <div
-    class="container"
-  >
-    <div
-      class="wrapper text textarea"
-      data-testid="Form-Field-Wrapper"
-    >
-      <div
-        class="horizontalWrapper"
-      >
-        <div
-          class="inputWrapper"
-        >
-          <label
-            class="label"
-            for=":r1:"
-          >
-            Describe your favourite colour?
-          </label>
-          <div
-            class="childrenWrapper"
-            tabindex="-1"
-          >
-            <textarea
-              class="input"
-              id=":r1:"
-              rows="3"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`InputText Version 1 renders a textarea with 4 rows 1`] = `
-<div>
-  <div
-    class="container"
-  >
-    <div
-      class="wrapper text textarea"
-      data-testid="Form-Field-Wrapper"
-    >
-      <div
-        class="horizontalWrapper"
-      >
-        <div
-          class="inputWrapper"
-        >
-          <label
-            class="label"
-            for=":r2:"
-          >
-            Describe your favourite colour?
-          </label>
-          <div
-            class="childrenWrapper"
-            tabindex="-1"
-          >
-            <textarea
-              class="input"
-              id=":r2:"
-              rows="4"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/packages/components/src/InputText/index.ts b/packages/components/src/InputText/index.ts
new file mode 100644
index 0000000000..5f1b5c6efb
--- /dev/null
+++ b/packages/components/src/InputText/index.ts
@@ -0,0 +1 @@
+export { InputText, InputTextRef } from "./InputText";
diff --git a/packages/components/src/InputText/index.tsx b/packages/components/src/InputText/index.tsx
deleted file mode 100644
index 20f59b413f..0000000000
--- a/packages/components/src/InputText/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { ForwardedRef, forwardRef } from "react";
-import { InputText as InputTextLegacy } from "./InputText";
-import { InputTextSPAR } from "./InputText.rebuilt";
-import {
-  InputTextPropOptions,
-  InputTextRebuiltProps,
-  InputTextRef,
-} from "./InputText.types";
-
-export type InputTextProps = InputTextPropOptions | InputTextRebuiltProps;
-
-function isNewInputTextProps(
-  props: InputTextProps,
-): props is InputTextRebuiltProps {
-  return props.version === 2;
-}
-
-export const InputText = forwardRef(function InputTextShim(
-  props: InputTextProps,
-  ref: ForwardedRef<HTMLTextAreaElement | HTMLInputElement | InputTextRef>,
-) {
-  if (isNewInputTextProps(props)) {
-    return (
-      <InputTextSPAR
-        {...props}
-        ref={ref as ForwardedRef<HTMLTextAreaElement | HTMLInputElement>}
-      />
-    );
-  } else {
-    return (
-      <InputTextLegacy {...props} ref={ref as ForwardedRef<InputTextRef>} />
-    );
-  }
-});
-
-export { InputTextRef };
diff --git a/packages/components/src/InputText/useInputTextActions.ts b/packages/components/src/InputText/useInputTextActions.ts
deleted file mode 100644
index a1630673e7..0000000000
--- a/packages/components/src/InputText/useInputTextActions.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
-import { InputTextRebuiltProps } from "./InputText.types";
-
-export interface useInputTextActionsProps
-  extends Pick<
-    InputTextRebuiltProps,
-    "onChange" | "onEnter" | "onFocus" | "onBlur"
-  > {
-  inputRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>;
-}
-
-/**
- * Combines the actions on the InputText such as onChange, onEnter, onFocus, onBlur, and onClear to forward information to the consumers of the InputText.
- * DO not repeat this pattern. We are doing this as a proof of concept relating to the refactoring of Form inputs to see what can be removed.
- */
-export function useInputTextActions({
-  onChange,
-  inputRef,
-  onEnter,
-  onFocus,
-  onBlur,
-}: useInputTextActionsProps) {
-  function handleClear() {
-    handleBlur();
-    onChange && onChange("");
-    inputRef?.current?.focus();
-  }
-
-  function handleChange(
-    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) {
-    const newValue = event.currentTarget.value;
-
-    onChange?.(newValue, event);
-  }
-
-  function handleKeyDown(
-    event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) {
-    if (!onEnter) return;
-    if (event.key !== "Enter") return;
-    if (event.shiftKey || event.ctrlKey) return;
-    event.preventDefault();
-    onEnter && onEnter(event);
-  }
-
-  function handleFocus(
-    event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) {
-    onFocus?.(event);
-  }
-
-  function handleBlur(event?: FocusEvent) {
-    onBlur?.(event);
-  }
-
-  return {
-    handleClear,
-    handleChange,
-    handleKeyDown,
-    handleFocus,
-    handleBlur,
-  };
-}
diff --git a/packages/components/src/InputText/useInputTextFormField.ts b/packages/components/src/InputText/useInputTextFormField.ts
deleted file mode 100644
index 4af26d43b7..0000000000
--- a/packages/components/src/InputText/useInputTextFormField.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
-import styles from "../FormField/FormField.module.css";
-
-export interface useInputTextFormFieldProps
-  extends React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {
-  /**
-   * The html id for the field
-   */
-  readonly id: string;
-
-  /**
-   * The auto-generated name for the html input field if a nameProp is not provided
-   */
-  readonly name: string;
-
-  /**
-   * The error message for the field
-   */
-  readonly error?: string;
-
-  /**
-   * Adjusts the form field to go inline with a content. This also silences the
-   * given `validations` prop. You'd have to used the `onValidate` prop to
-   * capture the message and render it somewhere else using the
-   * `InputValidation` component.
-   */
-  readonly inline?: boolean;
-
-  /**
-   * Further description of the input, can be used for a hint.
-   */
-  readonly description?: string;
-
-  /**
-   * Callback for when the field value changes
-   */
-  handleChange: (
-    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => void;
-  /**
-   * Callback for when the field loses focus
-   */
-  handleBlur: () => void;
-  /**
-   * Callback for when the field gains focus
-   */
-  handleFocus: (
-    event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => void;
-
-  /**
-   * Callback for when keydown event is triggered on the field
-   */
-  handleKeyDown: (
-    event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => void;
-
-  readonly invalid?: boolean;
-}
-
-export interface UseInputTextFormFieldReturn {
-  fieldProps: React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>;
-}
-
-/**
- * Provides the props for the html fields rendered by the html input.
- *  DO not repeat this pattern. We are doing this as a proof of concept relating to the refactoring of Form inputs to see what can be removed.
- */
-export function useInputTextFormField({
-  id,
-  name,
-  description,
-  inline,
-  handleChange,
-  handleBlur,
-  handleFocus,
-  handleKeyDown,
-  error,
-  ...rest
-}: useInputTextFormFieldProps) {
-  const descriptionIdentifier = `descriptionUUID--${id}`;
-  const fieldProps = {
-    id,
-    className: styles.input,
-    name,
-    disabled: rest.disabled,
-    inputMode: rest.inputMode,
-    onChange: handleChange,
-    onBlur: handleBlur,
-    onFocus: handleFocus,
-    ...(description &&
-      !inline && { "aria-describedby": descriptionIdentifier }),
-    "aria-invalid":
-      rest["aria-invalid"] || error || rest.invalid ? true : undefined,
-    autoFocus: rest.autoFocus,
-    invalid: error || rest.invalid ? "true" : undefined,
-    onKeyDown: handleKeyDown,
-    ...rest,
-  };
-
-  return { fieldProps, descriptionIdentifier };
-}
diff --git a/packages/components/src/InputText/useTextAreaResize.ts b/packages/components/src/InputText/useTextAreaResize.ts
deleted file mode 100644
index 8bc4f15e1e..0000000000
--- a/packages/components/src/InputText/useTextAreaResize.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import { RefObject } from "react";
-import { useSafeLayoutEffect } from "@jobber/hooks/useSafeLayoutEffect";
-import { RowRange } from "./InputText.types";
-
-/**
- * Hook for resizing a textarea based on its content. The textarea will grow up to the max number of rows specified.
- */
-export function useTextAreaResize({
-  rows,
-  value,
-  inputRef,
-  wrapperRef,
-}: {
-  rows?: number | RowRange;
-  value: string | number | Date | undefined;
-  inputRef: RefObject<HTMLTextAreaElement | HTMLInputElement>;
-  wrapperRef: RefObject<HTMLDivElement>;
-}) {
-  const rowRange = getRowRange(rows);
-
-  useSafeLayoutEffect(() => {
-    if (
-      inputRef &&
-      inputRef.current instanceof HTMLTextAreaElement &&
-      wrapperRef &&
-      wrapperRef.current instanceof HTMLDivElement
-    ) {
-      resize();
-    }
-  }, [inputRef.current, wrapperRef.current]);
-
-  // When the consumer passes a new controlled value, we need to recheck the size.
-  // The timeout ensures the DOM has a enough time to render the new text before
-  // we access the height.
-  useSafeLayoutEffect(() => {
-    setTimeout(() => {
-      if (
-        inputRef &&
-        inputRef.current instanceof HTMLTextAreaElement &&
-        wrapperRef &&
-        wrapperRef.current instanceof HTMLDivElement
-      ) {
-        resize();
-      }
-    }, 0);
-  }, [value]);
-
-  function resize() {
-    if (
-      inputRef &&
-      inputRef.current instanceof HTMLTextAreaElement &&
-      wrapperRef &&
-      wrapperRef?.current instanceof HTMLDivElement
-    ) {
-      if (rowRange.min === rowRange.max) return;
-
-      inputRef.current.style.flexBasis = "auto";
-      wrapperRef.current.style.height = "auto";
-      inputRef.current.style.flexBasis =
-        textAreaHeight(inputRef.current) + "px";
-    }
-  }
-
-  function textAreaHeight(textArea: HTMLTextAreaElement) {
-    const {
-      lineHeight,
-      borderBottomWidth,
-      borderTopWidth,
-      paddingBottom,
-      paddingTop,
-    } = window.getComputedStyle(textArea);
-
-    const maxHeight =
-      rowRange.max * parseFloat(lineHeight) +
-      parseFloat(borderTopWidth) +
-      parseFloat(borderBottomWidth) +
-      parseFloat(paddingTop) +
-      parseFloat(paddingBottom);
-
-    const scrollHeight =
-      textArea.scrollHeight +
-      parseFloat(borderTopWidth) +
-      parseFloat(borderBottomWidth);
-
-    return Math.min(scrollHeight, maxHeight);
-  }
-
-  return { resize, rowRange };
-}
-
-function getRowRange(rows?: number | RowRange): RowRange {
-  if (rows === undefined) {
-    return { min: 3, max: 3 };
-  } else if (typeof rows === "object") {
-    return { min: rows.min, max: rows.max };
-  } else {
-    return { min: rows, max: rows };
-  }
-}