diff --git a/packages/components/src/Checkbox/Checkbox.stories.tsx b/packages/components/src/Checkbox/Checkbox.stories.tsx
deleted file mode 100644
index 91fcc0c32e..0000000000
--- a/packages/components/src/Checkbox/Checkbox.stories.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import React, { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Text } from "@jobber/components/Text";
-import { Link } from "@jobber/components/Link";
-import { Checkbox } from "@jobber/components/Checkbox";
-
-const meta = {
-  title: "Components/Selections/Checkbox",
-  component: Checkbox,
-} satisfies Meta<typeof Checkbox>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const BasicTemplate = (args: Story["args"]) => {
-  const [checked, setChecked] = useState(true);
-
-  return <Checkbox {...args} checked={checked} onChange={setChecked} />;
-};
-
-export const Basic: Story = {
-  render: BasicTemplate,
-  args: {
-    label: "Save card for future use",
-    name: "save-card",
-  },
-};
-
-const Invalid_v2Template = (args: Story["args"]) => {
-  const [checked, setChecked] = useState(true);
-
-  return <Checkbox {...args} checked={checked} onChange={setChecked} />;
-};
-
-export const Invalid_v2: Story = {
-  render: Invalid_v2Template,
-  args: {
-    label: "Invalid checkbox (requires version 2 prop)",
-    invalid: true,
-    indeterminate: false,
-    disabled: false,
-    version: 2,
-  },
-};
-
-const IndeterminateTemplate = () => {
-  const [items, setItems] = useState([true, false, false]);
-
-  return (
-    <>
-      <Checkbox
-        label="Select All"
-        checked={!items.includes(false)}
-        onChange={toggleAll}
-        indeterminate={items.includes(false) && items.includes(true)}
-      />
-      <ul>
-        {items.map((value, index) => (
-          <li key={index}>
-            <Checkbox
-              label={`Item ${index}`}
-              checked={value}
-              onChange={toggleIndex(index)}
-            />
-          </li>
-        ))}
-      </ul>
-    </>
-  );
-
-  function toggleIndex(index: number) {
-    return (newValue: boolean) => {
-      const updatedItems = Array.from(items);
-      updatedItems[index] = newValue;
-      setItems(updatedItems);
-    };
-  }
-
-  function toggleAll(newValue: boolean) {
-    setItems(Array(items.length).fill(newValue));
-  }
-};
-
-export const Indeterminate: Story = {
-  render: IndeterminateTemplate,
-  args: {},
-};
-
-export const WithDescription: Story = {
-  render: BasicTemplate,
-  args: {
-    label: "Save card for future use",
-    description:
-      "If you save your card now, you'll never need to save it again.",
-  },
-};
-
-export const Disabled: Story = {
-  render: BasicTemplate,
-  args: {
-    label: "Subscribe on marketing emails",
-    disabled: true,
-    defaultChecked: true,
-  },
-};
-
-const ChildrenAsLabelTemplate = () => {
-  const [checked, setChecked] = useState(false);
-
-  return (
-    <Checkbox checked={checked} onChange={setChecked}>
-      <Text>
-        I agree to the{" "}
-        <Link url="https://getjobber.com/terms-of-service/" external>
-          terms of service
-        </Link>
-      </Text>
-    </Checkbox>
-  );
-};
-
-export const ChildrenAsLabel: Story = {
-  render: ChildrenAsLabelTemplate,
-  args: {},
-};
diff --git a/packages/components/src/Checkbox/Checkbox.tsx b/packages/components/src/Checkbox/Checkbox.tsx
index 6c13a060fe..6a320dcccd 100644
--- a/packages/components/src/Checkbox/Checkbox.tsx
+++ b/packages/components/src/Checkbox/Checkbox.tsx
@@ -3,6 +3,8 @@ import React, { useEffect, useId, useState } from "react";
 import classnames from "classnames";
 import { Controller, useForm, useFormContext } from "react-hook-form";
 import styles from "./Checkbox.module.css";
+// TODO: Temporary disable — this V1 component will be deleted as part of V1/V2 consolidation
+// eslint-disable-next-line import/no-deprecated
 import type { CheckboxLegacyProps } from "./Checkbox.types";
 import { Icon } from "../Icon";
 import { Text } from "../Text";
@@ -20,7 +22,8 @@ export function CheckboxLegacy({
   onBlur,
   onChange,
   onFocus,
-}: CheckboxLegacyProps) {
+}: // eslint-disable-next-line import/no-deprecated
+CheckboxLegacyProps) {
   const { control, setValue, watch } =
     useFormContext() != undefined
       ? useFormContext()
diff --git a/packages/components/src/Checkbox/Checkbox.types.ts b/packages/components/src/Checkbox/Checkbox.types.ts
index 394259f4ea..019bfbf0ae 100644
--- a/packages/components/src/Checkbox/Checkbox.types.ts
+++ b/packages/components/src/Checkbox/Checkbox.types.ts
@@ -127,6 +127,9 @@ export type CheckboxRebuiltProps = CheckboxCoreProps &
     ): void;
   };
 
+/**
+ * @deprecated Use the v2 Checkbox component instead (version={2}).
+ */
 export type CheckboxLegacyProps = XOR<
   CheckboxLabelProps,
   CheckboxChildrenProps
diff --git a/packages/components/src/Checkbox/index.tsx b/packages/components/src/Checkbox/index.tsx
index 87d2183765..7beca0e0cc 100644
--- a/packages/components/src/Checkbox/index.tsx
+++ b/packages/components/src/Checkbox/index.tsx
@@ -1,11 +1,14 @@
 import React, { forwardRef } from "react";
 import { CheckboxLegacy } from "./Checkbox";
 import { CheckboxRebuilt } from "./Checkbox.rebuilt";
+// TODO: Temporary disable — this V1 component will be deleted as part of V1/V2 consolidation
 import type {
+  // eslint-disable-next-line import/no-deprecated
   CheckboxLegacyProps,
   CheckboxRebuiltProps,
 } from "./Checkbox.types";
 
+// eslint-disable-next-line import/no-deprecated
 type CheckboxShimProps = CheckboxLegacyProps | CheckboxRebuiltProps;
 
 function isNewCheckboxProps(
@@ -27,4 +30,5 @@ export const Checkbox = forwardRef(function CheckboxShim(
 
 Checkbox.displayName = "Checkbox";
 
+// eslint-disable-next-line import/no-deprecated
 export type { CheckboxLegacyProps, CheckboxRebuiltProps };
diff --git a/packages/components/src/InputEmail/InputEmail.stories.tsx b/packages/components/src/InputEmail/InputEmail.stories.tsx
deleted file mode 100644
index 3b31ce3659..0000000000
--- a/packages/components/src/InputEmail/InputEmail.stories.tsx
+++ /dev/null
@@ -1,267 +0,0 @@
-import React, { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { InputEmail } from "@jobber/components/InputEmail";
-import { Content } from "@jobber/components/Content";
-import { Grid } from "@jobber/components/Grid";
-import { Button } from "@jobber/components/Button";
-
-const meta = {
-  title: "Components/Forms and Inputs/InputEmail",
-  component: InputEmail,
-} satisfies Meta<typeof InputEmail>;
-export default meta;
-type Story = StoryObj<Partial<React.ComponentProps<typeof InputEmail>>>;
-
-const BasicTemplate = (args: Story["args"]) => <InputEmail {...args} />;
-
-export const Basic: Story = {
-  render: BasicTemplate,
-  args: {
-    placeholder: "Enter your email",
-  },
-};
-
-export const VersionComparison: Story = {
-  render: () => {
-    const [values, setValues] = useState({
-      basic: "",
-      disabled: "",
-      invalid: "",
-      withDescription: "",
-      inline: "",
-      prefix: "",
-      suffix: "",
-      both: "",
-      rightAlign: "",
-      centerAlign: "",
-      sizeSmall: "",
-      sizeLarge: "",
-      loading: "",
-      maxLength: "",
-      clearable: "",
-      readonly: "readonly@example.com",
-    });
-
-    const [inline, setInline] = useState(false);
-    const [invalid, setInvalid] = useState<boolean | undefined>(undefined);
-    const [disabled, setDisabled] = useState(false);
-    const [description, setDescription] = useState<string>("");
-    const [error, setError] = useState<string>("");
-
-    const extraProps = {
-      invalid,
-      inline,
-      disabled,
-      description,
-      error,
-    };
-
-    const handleChange = (field: keyof typeof values) => (value: string) => {
-      setValues(prev => ({ ...prev, [field]: value }));
-    };
-
-    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 }}>
-          <InputEmail
-            {...props}
-            version={1}
-            value={values[field]}
-            onChange={handleChange(field)}
-          />
-        </Grid.Cell>
-        <Grid.Cell size={{ xs: 6 }}>
-          <InputEmail
-            {...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(
-            "Basic Input",
-            {
-              placeholder: "Enter your email",
-              ...extraProps,
-            },
-            "basic",
-          )}
-
-          {renderBothVersions(
-            "Right Aligned",
-            {
-              placeholder: "Right aligned",
-              align: "right",
-              ...extraProps,
-            },
-            "rightAlign",
-          )}
-
-          {renderBothVersions(
-            "Center Aligned",
-            {
-              placeholder: "Center aligned",
-              align: "center",
-              ...extraProps,
-            },
-            "centerAlign",
-          )}
-
-          {renderBothVersions(
-            "With Prefix",
-            {
-              placeholder: "Input with prefix",
-              prefix: { icon: "search" },
-              ...extraProps,
-            },
-            "prefix",
-          )}
-
-          {renderBothVersions(
-            "With Suffix",
-            {
-              placeholder: "Input with suffix",
-              suffix: { icon: "sparkles" },
-              ...extraProps,
-            },
-            "suffix",
-          )}
-
-          {renderBothVersions(
-            "With Prefix and Suffix",
-            {
-              placeholder: "Input with both",
-              prefix: { label: "Pre" },
-              suffix: { label: "Suf" },
-              ...extraProps,
-            },
-            "both",
-          )}
-
-          {renderBothVersions(
-            "Size small",
-            {
-              placeholder: "Small input",
-              size: "small",
-              ...extraProps,
-            },
-            "sizeSmall",
-          )}
-
-          {renderBothVersions(
-            "Size large",
-            {
-              placeholder: "Large input",
-              size: "large",
-              ...extraProps,
-            },
-            "sizeLarge",
-          )}
-
-          {renderBothVersions(
-            "Loading",
-            {
-              placeholder: "Loading input",
-              loading: true,
-              ...extraProps,
-            },
-            "loading",
-          )}
-
-          {renderBothVersions(
-            "Max Length",
-            {
-              placeholder: "Max length input",
-              maxLength: 5,
-              ...extraProps,
-            },
-            "maxLength",
-          )}
-          {renderBothVersions(
-            "Clearable",
-            {
-              placeholder: "Clearable input",
-              clearable: "always",
-              ...extraProps,
-            },
-            "clearable",
-          )}
-          {renderBothVersions(
-            "Readonly",
-            {
-              placeholder: "Readonly",
-              ...extraProps,
-              // For version 1
-              readonly: true,
-              // For version 2
-              readOnly: true,
-            },
-            "readonly",
-          )}
-        </div>
-
-        <Grid>
-          <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 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="Toggle Error"
-              onClick={() => setError(error ? "" : "This is an error message")}
-            />
-          </Grid.Cell>
-        </Grid>
-      </Content>
-    );
-  },
-};
diff --git a/packages/components/src/InputEmail/InputEmail.tsx b/packages/components/src/InputEmail/InputEmail.tsx
index 37ab54042e..f3d825bb34 100644
--- a/packages/components/src/InputEmail/InputEmail.tsx
+++ b/packages/components/src/InputEmail/InputEmail.tsx
@@ -1,8 +1,11 @@
 import React from "react";
+// TODO: Temporary disable — this V1 component will be deleted as part of V1/V2 consolidation
+// eslint-disable-next-line import/no-deprecated
 import type { InputEmailLegacyProps } from "./InputEmail.types";
 import { validationMessage } from "./InputEmail.types";
 import { FormField } from "../FormField";
 
+// eslint-disable-next-line import/no-deprecated
 export function InputEmail(props: InputEmailLegacyProps) {
   const { validations } = props;
 
diff --git a/packages/components/src/InputEmail/InputEmail.types.ts b/packages/components/src/InputEmail/InputEmail.types.ts
index 27d6d93cc4..6047018a6a 100644
--- a/packages/components/src/InputEmail/InputEmail.types.ts
+++ b/packages/components/src/InputEmail/InputEmail.types.ts
@@ -7,6 +7,11 @@ import type {
   RebuiltInputCommonProps,
 } from "../sharedHelpers/types";
 
+/**
+ * InputEmail props for the existing version of InputEmail
+ *
+ * @deprecated Use the v2 InputEmail component instead (version={2}).
+ */
 export type InputEmailLegacyProps = CommonFormFieldProps &
   Pick<
     FormFieldProps,
diff --git a/packages/components/src/InputEmail/index.tsx b/packages/components/src/InputEmail/index.tsx
index a46f9a3e79..27c04af442 100644
--- a/packages/components/src/InputEmail/index.tsx
+++ b/packages/components/src/InputEmail/index.tsx
@@ -2,13 +2,16 @@ import type { ForwardedRef } from "react";
 import React, { forwardRef } from "react";
 import { InputEmail as InputEmailLegacy } from "./InputEmail";
 import { InputEmailRebuilt } from "./InputEmail.rebuilt";
+// TODO: Temporary disable — this V1 component will be deleted as part of V1/V2 consolidation
 import {
+  // eslint-disable-next-line import/no-deprecated
   type InputEmailLegacyProps,
   type InputEmailRebuiltProps,
 } from "./InputEmail.types";
 
 export type InputEmailShimProps =
   | InputEmailRebuiltProps
+  // eslint-disable-next-line import/no-deprecated
   | InputEmailLegacyProps;
 
 function isNewInputEmailProps(
@@ -32,4 +35,5 @@ export const InputEmail = forwardRef(function InputEmailShim(
     return <InputEmailLegacy {...props} />;
   }
 });
+// eslint-disable-next-line import/no-deprecated
 export type { InputEmailRebuiltProps, InputEmailLegacyProps };
diff --git a/packages/components/src/InputText/InputText.stories.tsx b/packages/components/src/InputText/InputText.stories.tsx
deleted file mode 100644
index 934f4f65b2..0000000000
--- a/packages/components/src/InputText/InputText.stories.tsx
+++ /dev/null
@@ -1,462 +0,0 @@
-import React, { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import type { InputTextLegacyProps } from "@jobber/components/InputText";
-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";
-import { FormFieldLabel } from "@jobber/components/FormField";
-
-const meta = {
-  title: "Components/Forms and Inputs/InputText",
-  component: InputText,
-} satisfies Meta<typeof InputText>;
-export default meta;
-interface InputTextStoryArgs {
-  name?: string;
-  placeholder?: string;
-  defaultValue?: string;
-  multiline?: boolean;
-  rows?: InputTextLegacyProps["rows"];
-  toolbar?: React.ReactNode;
-  readonly?: boolean;
-  loading?: boolean;
-  clearable?: InputTextLegacyProps["clearable"];
-  showMiniLabel?: boolean;
-  autocomplete?: InputTextLegacyProps["autocomplete"];
-}
-type Story = StoryObj<Partial<InputTextStoryArgs>>;
-
-const BasicTemplate = (args: Story["args"]) => {
-  const storyArgs = (args ?? {}) as InputTextLegacyProps;
-
-  return <InputText {...storyArgs} />;
-};
-
-const ExternalLabelTemplate = (args: Story["args"]) => {
-  const storyArgs = (args ?? {}) as InputTextLegacyProps;
-
-  return (
-    <div>
-      <FormFieldLabel external={true} htmlFor="ext-input">
-        External label
-      </FormFieldLabel>
-      <InputText id="ext-input" {...storyArgs} />
-    </div>
-  );
-};
-
-export const Basic: Story = {
-  render: BasicTemplate,
-  args: {
-    name: "age",
-    placeholder: "Age in words",
-  },
-};
-
-export const Multiline: Story = {
-  render: BasicTemplate,
-  args: {
-    defaultValue: "Rocinante",
-    multiline: true,
-    rows: { min: 1, max: 5 },
-  },
-};
-
-export const Toolbar: Story = {
-  render: BasicTemplate,
-  args: {
-    placeholder: "Hakunamatata",
-    multiline: true,
-    rows: { min: 1, max: 5 },
-    toolbar: (
-      <div
-        style={{
-          display: "flex",
-          width: "100%",
-          justifyContent: "space-between",
-        }}
-      >
-        <Button
-          label="Rewrite"
-          size="small"
-          icon="sparkles"
-          fullWidth={false}
-        />
-        <Button
-          ariaLabel="Undo"
-          size="small"
-          icon="redo"
-          type="tertiary"
-          fullWidth={false}
-        />
-      </div>
-    ),
-  },
-};
-
-const AutocompleteTemplate = (args: Story["args"]) => {
-  const storyArgs = (args ?? {}) as InputTextLegacyProps;
-
-  return (
-    <form onSubmit={event => event.preventDefault()}>
-      <Content spacing="base">
-        <InputText
-          name="atlantis-is-real"
-          {...storyArgs}
-          autocomplete={storyArgs.autocomplete ?? "on"}
-          placeholder={storyArgs.placeholder ?? "Enter a value"}
-        />
-        <Button label="Submit" submit />
-      </Content>
-    </form>
-  );
-};
-
-export const Autocomplete: Story = {
-  render: AutocompleteTemplate,
-};
-
-export const Readonly: Story = {
-  render: BasicTemplate,
-  args: {
-    defaultValue: "Rocinante",
-    readonly: true,
-  },
-};
-
-export const Loading: Story = {
-  render: BasicTemplate,
-  args: {
-    name: "phoneNumber",
-    loading: true,
-  },
-};
-
-export const Clearable: Story = {
-  render: BasicTemplate,
-  args: {
-    name: "name",
-    clearable: "always",
-  },
-};
-
-export const ExternalLabel: Story = {
-  render: ExternalLabelTemplate,
-  args: {
-    name: "name",
-    clearable: "always",
-    showMiniLabel: false,
-  },
-};
-
-export const VersionComparison: Story = {
-  render: () => {
-    const [values, setValues] = React.useState({
-      basic: "",
-      multiline: "",
-      error: "",
-      disabled: "",
-      readonly: "This is 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,
-              showMiniLabel: false,
-              description: "Description text",
-              error: "Error string",
-            },
-            "basic",
-          )}
-          {renderBothVersions(
-            "Readonly",
-            {
-              placeholder: "Readonly",
-              ...extraProps,
-              // For version 1
-              readonly: true,
-              // For version 2
-              readOnly: true,
-            },
-            "readonly",
-          )}
-          {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 = (args: Story["args"]) => {
-  const [value, setValue] = useState("");
-
-  return (
-    <Box gap="base">
-      <InputText
-        {...args}
-        rows={{ min: 1, max: 10 }}
-        multiline
-        value={value}
-        onChange={v => setValue(`${v}`)}
-      />
-
-      <div>
-        <Button label="Reset" onClick={() => setValue("")} />
-      </div>
-    </Box>
-  );
-};
-
-export const Controlled: Story = {
-  render: ControlledTemplate,
-  args: {
-    placeholder: "Hakunamatata",
-  },
-};
diff --git a/packages/components/src/InputText/InputText.tsx b/packages/components/src/InputText/InputText.tsx
index 9a5630c2b7..e8bffaa728 100644
--- a/packages/components/src/InputText/InputText.tsx
+++ b/packages/components/src/InputText/InputText.tsx
@@ -1,11 +1,14 @@
 import type { Ref } from "react";
 import React, { forwardRef, useImperativeHandle, useRef } from "react";
+// TODO: Temporary disable — this V1 component will be deleted as part of V1/V2 consolidation
+// eslint-disable-next-line import/no-deprecated
 import type { InputTextLegacyProps, InputTextRef } from "./InputText.types";
 import { useTextAreaResize } from "./useTextAreaResize";
 import type { FieldActionsRef } from "../FormField";
 import { FormField } from "../FormField";
 
 function InputTextInternal(
+  // eslint-disable-next-line import/no-deprecated
   props: InputTextLegacyProps,
   ref: Ref<InputTextRef>,
 ) {
diff --git a/packages/components/src/InputText/InputText.types.ts b/packages/components/src/InputText/InputText.types.ts
index 8640799f8f..7168d9ea09 100644
--- a/packages/components/src/InputText/InputText.types.ts
+++ b/packages/components/src/InputText/InputText.types.ts
@@ -128,5 +128,7 @@ interface MultilineProps extends BaseProps {
 }
 /**
  * InputText props for the existing version of InputText
+ *
+ * @deprecated Use the v2 InputText component instead (version="rebuilt").
  */
 export type InputTextLegacyProps = XOR<BaseProps, MultilineProps>;
diff --git a/packages/components/src/InputText/index.tsx b/packages/components/src/InputText/index.tsx
index 6f6fc30925..7bec0da306 100644
--- a/packages/components/src/InputText/index.tsx
+++ b/packages/components/src/InputText/index.tsx
@@ -2,12 +2,15 @@ import type { ForwardedRef } from "react";
 import React, { forwardRef } from "react";
 import { InputText as InputTextLegacy } from "./InputText";
 import { InputTextSPAR } from "./InputText.rebuilt";
+// TODO: Temporary disable — this V1 component will be deleted as part of V1/V2 consolidation
 import {
+  // eslint-disable-next-line import/no-deprecated
   type InputTextLegacyProps,
   type InputTextRebuiltProps,
   type InputTextRef,
 } from "./InputText.types";
 
+// eslint-disable-next-line import/no-deprecated
 export type InputTextShimProps = InputTextLegacyProps | InputTextRebuiltProps;
 
 function isNewInputTextProps(
@@ -34,4 +37,5 @@ export const InputText = forwardRef(function InputTextShim(
   }
 });
 
+// eslint-disable-next-line import/no-deprecated
 export type { InputTextRef, InputTextRebuiltProps, InputTextLegacyProps };
diff --git a/packages/site/src/componentList.ts b/packages/site/src/componentList.ts
index 86678476ef..6fa20ce137 100644
--- a/packages/site/src/componentList.ts
+++ b/packages/site/src/componentList.ts
@@ -130,6 +130,12 @@ export const componentList = [
     sections: ["Selections"],
     additionalMatches: ["Select"],
   },
+  {
+    title: "Checkbox v1",
+    to: "/components/Checkbox v1",
+    imageURL: "/Checkbox.png",
+    sections: ["Deprecated"],
+  },
   {
     title: "Chip",
     to: "/components/Chip",
@@ -437,6 +443,12 @@ export const componentList = [
     sections: ["Forms & Inputs"],
     additionalMatches: ["Email Input"],
   },
+  {
+    title: "InputEmail v1",
+    to: "/components/InputEmail v1",
+    imageURL: "/InputEmail.png",
+    sections: ["Deprecated"],
+  },
   {
     title: "InputFieldWrapper",
     to: "/components/InputFieldWrapper",
@@ -511,6 +523,12 @@ export const componentList = [
       "Field",
     ],
   },
+  {
+    title: "InputText v1",
+    to: "/components/InputText v1",
+    imageURL: "/InputText.png",
+    sections: ["Deprecated"],
+  },
   {
     title: "InputTime",
     to: "/components/InputTime",
diff --git a/packages/site/src/content/Checkbox v1/Checkbox.props.json b/packages/site/src/content/Checkbox v1/Checkbox.props.json
new file mode 100644
index 0000000000..c149de7b79
--- /dev/null
+++ b/packages/site/src/content/Checkbox v1/Checkbox.props.json	
@@ -0,0 +1,191 @@
+[
+  {
+    "tags": {},
+    "filePath": "../components/src/Checkbox/Checkbox.tsx",
+    "description": "",
+    "displayName": "CheckboxLegacy",
+    "methods": [],
+    "props": {
+      "label": {
+        "defaultValue": null,
+        "description": "Label that shows up beside the checkbox.",
+        "name": "label",
+        "parent": {
+          "fileName": "packages/components/src/Checkbox/Checkbox.types.ts",
+          "name": "CheckboxLabelProps"
+        },
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "children": {
+        "defaultValue": null,
+        "description": "Component children, which shows up as a label",
+        "name": "children",
+        "parent": {
+          "fileName": "packages/components/src/Checkbox/Checkbox.types.ts",
+          "name": "CheckboxChildrenProps"
+        },
+        "required": false,
+        "type": {
+          "name": "ReactElement<unknown, string | JSXElementConstructor<any>>"
+        }
+      },
+      "disabled": {
+        "defaultValue": null,
+        "description": "Disables the checkbox.",
+        "name": "disabled",
+        "parent": {
+          "fileName": "packages/components/src/Checkbox/Checkbox.types.ts",
+          "name": "BaseCheckboxProps"
+        },
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "name": {
+        "defaultValue": null,
+        "description": "Checkbox input name",
+        "name": "name",
+        "parent": {
+          "fileName": "packages/components/src/Checkbox/Checkbox.types.ts",
+          "name": "BaseCheckboxProps"
+        },
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "description": {
+        "defaultValue": null,
+        "description": "Further description of the label",
+        "name": "description",
+        "parent": {
+          "fileName": "packages/components/src/Checkbox/Checkbox.types.ts",
+          "name": "BaseCheckboxProps"
+        },
+        "required": false,
+        "type": {
+          "name": "ReactNode"
+        }
+      },
+      "id": {
+        "defaultValue": null,
+        "description": "ID for the checkbox input",
+        "name": "id",
+        "parent": {
+          "fileName": "packages/components/src/Checkbox/Checkbox.types.ts",
+          "name": "BaseCheckboxProps"
+        },
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "onChange": {
+        "defaultValue": null,
+        "description": "Called when the checkbox value changes",
+        "name": "onChange",
+        "parent": {
+          "fileName": "packages/components/src/Checkbox/Checkbox.types.ts",
+          "name": "BaseCheckboxProps"
+        },
+        "required": false,
+        "type": {
+          "name": "(newValue: boolean) => void"
+        }
+      },
+      "onFocus": {
+        "defaultValue": null,
+        "description": "Called when the checkbox is focused",
+        "name": "onFocus",
+        "parent": {
+          "fileName": "packages/components/src/Checkbox/Checkbox.types.ts",
+          "name": "BaseCheckboxProps"
+        },
+        "required": false,
+        "type": {
+          "name": "(event: FocusEvent<HTMLInputElement, Element>) => void"
+        }
+      },
+      "onBlur": {
+        "defaultValue": null,
+        "description": "Called when the checkbox loses focus",
+        "name": "onBlur",
+        "parent": {
+          "fileName": "packages/components/src/Checkbox/Checkbox.types.ts",
+          "name": "BaseCheckboxProps"
+        },
+        "required": false,
+        "type": {
+          "name": "(event: FocusEvent<HTMLInputElement, Element>) => void"
+        }
+      },
+      "checked": {
+        "defaultValue": null,
+        "description": "Determines if the checkbox is checked or not.",
+        "name": "checked",
+        "parent": {
+          "fileName": "packages/components/src/Checkbox/Checkbox.types.ts",
+          "name": "CheckboxCoreProps"
+        },
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "defaultChecked": {
+        "defaultValue": null,
+        "description": "Initial checked value of the checkbox. Only use this when you need to\npre-populate the checked attribute that is not controlled by the component's\nstate. If a state is controlling it, use the `checked` prop instead.",
+        "name": "defaultChecked",
+        "parent": {
+          "fileName": "packages/components/src/Checkbox/Checkbox.types.ts",
+          "name": "CheckboxCoreProps"
+        },
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "indeterminate": {
+        "defaultValue": {
+          "value": false
+        },
+        "description": "When `true` the checkbox to appears in indeterminate.",
+        "name": "indeterminate",
+        "parent": {
+          "fileName": "packages/components/src/Checkbox/Checkbox.types.ts",
+          "name": "CheckboxCoreProps"
+        },
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "value": {
+        "defaultValue": null,
+        "description": "Value of the checkbox.",
+        "name": "value",
+        "parent": {
+          "fileName": "packages/components/src/Checkbox/Checkbox.types.ts",
+          "name": "CheckboxCoreProps"
+        },
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "version": {
+        "defaultValue": null,
+        "description": "",
+        "name": "version",
+        "required": false,
+        "type": {
+          "name": "1"
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/packages/site/src/content/Checkbox v1/Checkbox.stories.mdx b/packages/site/src/content/Checkbox v1/Checkbox.stories.mdx
new file mode 100644
index 0000000000..45bd507c8e
--- /dev/null
+++ b/packages/site/src/content/Checkbox v1/Checkbox.stories.mdx	
@@ -0,0 +1,49 @@
+import { Meta } from "@storybook/addon-docs";
+import { Figma } from "@storybook/addon-designs/blocks";
+import { Banner } from "@jobber/components";
+
+<Meta title="Components/Selections/Checkbox v1" />
+
+<Banner type="warning" dismissible={false}>
+  This is the v1 version of Checkbox and has been deprecated. Please use the [v2
+  Checkbox](/components/Checkbox) component instead (`version={2}`).
+</Banner>
+
+# Checkbox
+
+A checkbox lets a user select one or more items from a set of options.
+
+## Design & usage guidelines
+
+A checkbox is a familiar pattern for users who need to choose from a set of
+options, or opt in to a single choice. It allows a user to provide boolean
+input. It can also be in an indeterminate state when we don't know if the
+checkbox is considered checked or not.
+
+A single checkbox, a [Switch](/components/Switch), and a pair of
+[radio buttons](/components/RadioGroup) can seem similar in theory, as all can
+represent an either/or decision for the user. Use a switch when the user must
+make a decision to turn something on or off, and a single checkbox when a user
+is opting in to a choice. A pair of radio buttons can be used to help the user
+decide between two discrete options, such as "fixed price" and "per visit"
+invoicing options.
+
+Of note: when a single selection is to be made, a Switch should be used rather
+than a single Checkbox. Use a Checkbox only when there are multiple selection
+options to choose from. when the volume of Radio options is greater than 5 (or
+there are otherwise critical vertical space constraints) use Select. when the
+labels on a set of Radio options are consistently small (1–2 words), use Chip.
+
+## Related components
+
+- To let people turn a setting on or off instantly, use a
+  [Switch](/components/Switch).
+- To present a set of options where people can only make a single choice, use a
+  [RadioGroup](/components/RadioGroup).
+
+## Mockup
+
+<Figma
+  collapsable
+  url="https://www.figma.com/file/avvgu5SkbBvS8lGVePBsqO/%F0%9F%92%99-Product%2FMobile?node-id=15272%3A30151"
+/>
diff --git a/packages/site/src/content/Checkbox v1/CheckboxNotes.mdx b/packages/site/src/content/Checkbox v1/CheckboxNotes.mdx
new file mode 100644
index 0000000000..f374960649
--- /dev/null
+++ b/packages/site/src/content/Checkbox v1/CheckboxNotes.mdx	
@@ -0,0 +1,17 @@
+## Platform considerations
+
+### Event Handlers
+
+While Checkbox exposes mouse event handlers like `onClick`, the recommended way
+to access the new value is via the `onChange` prop.
+
+### CheckboxGroup (mobile)
+
+The `<CheckboxGroup>` component is a component that provides a grouping of
+checkboxes. It allows you to optionally provide a label which will allow you to
+control the Checkbox children with a single parent checkbox. If some but not all
+children are checked then the parent checkbox will show the indeterminate state.
+An important thing to note is that when using `<CheckboxGroup>` the child
+Checkboxes must have a name provided as a prop. This is so the CheckboxGroup is
+able to keep track the state of the child Checkboxes. See
+[Checkbox/Mobile/Checkbox Group Example](/storybook/mobile/?path=/story/components-selections-checkbox--checkbox-group-example)
diff --git a/packages/site/src/content/Checkbox/exampleV1.ts b/packages/site/src/content/Checkbox v1/exampleV1.ts
similarity index 100%
rename from packages/site/src/content/Checkbox/exampleV1.ts
rename to packages/site/src/content/Checkbox v1/exampleV1.ts
diff --git a/packages/site/src/content/Checkbox v1/index.tsx b/packages/site/src/content/Checkbox v1/index.tsx
new file mode 100644
index 0000000000..3a88b3e428
--- /dev/null
+++ b/packages/site/src/content/Checkbox v1/index.tsx	
@@ -0,0 +1,18 @@
+import Content, { toc } from "./Checkbox.stories.mdx";
+import Props from "./Checkbox.props.json";
+import Notes from "./CheckboxNotes.mdx";
+import originalExample from "./exampleV1";
+import { ContentExport } from "../../types/content";
+
+export default {
+  content: () => <Content />,
+  toc,
+  props: Props,
+  component: {
+    element: originalExample,
+    defaultProps: {},
+  },
+  title: "Checkbox v1",
+  links: [],
+  notes: () => <Notes />,
+} as const satisfies ContentExport;
diff --git a/packages/site/src/content/Checkbox/CheckboxNotes.mdx b/packages/site/src/content/Checkbox/CheckboxNotes.mdx
index f374960649..9f8c51a138 100644
--- a/packages/site/src/content/Checkbox/CheckboxNotes.mdx
+++ b/packages/site/src/content/Checkbox/CheckboxNotes.mdx
@@ -1,10 +1,5 @@
 ## Platform considerations
 
-### Event Handlers
-
-While Checkbox exposes mouse event handlers like `onClick`, the recommended way
-to access the new value is via the `onChange` prop.
-
 ### CheckboxGroup (mobile)
 
 The `<CheckboxGroup>` component is a component that provides a grouping of
diff --git a/packages/site/src/content/Checkbox/index.tsx b/packages/site/src/content/Checkbox/index.tsx
index eb0fff239c..344fb07ee0 100644
--- a/packages/site/src/content/Checkbox/index.tsx
+++ b/packages/site/src/content/Checkbox/index.tsx
@@ -1,9 +1,7 @@
 import CheckboxContent, { toc } from "./Checkbox.stories.mdx";
-import Props from "./Checkbox.props.json";
+import Props from "./CheckboxV2.props.json";
 import MobileProps from "./Checkbox.props-mobile.json";
-import RebuiltProps from "./CheckboxV2.props.json";
 import Notes from "./CheckboxNotes.mdx";
-import originalExample from "./exampleV1";
 import rebuiltExample from "./exampleV2";
 import { ContentExport } from "../../types/content";
 import { getStorybookUrl } from "../../layout/getStorybookUrl";
@@ -13,10 +11,8 @@ export default {
   toc,
   props: Props,
   mobileProps: MobileProps,
-  webSupportedProps: RebuiltProps,
   component: {
-    element: originalExample,
-    webSupported: rebuiltExample,
+    element: rebuiltExample,
     mobileElement: `<Checkbox label={"Check me out"} name={"storyCheckbox"} />`,
   },
   title: "Checkbox",
@@ -25,7 +21,7 @@ export default {
       label: "Web Storybook",
       type: "web",
       url: getStorybookUrl(
-        "?path=/story/components-selections-checkbox--basic",
+        "?path=/story/components-selections-checkbox-web-v2--basic",
         "web",
       ),
     },
@@ -38,15 +34,5 @@ export default {
       ),
     },
   ],
-  webSupportedLinks: [
-    {
-      label: "Web Storybook",
-      type: "web",
-      url: getStorybookUrl(
-        "?path=/story/components-selections-checkbox-web-v2--basic",
-        "web",
-      ),
-    },
-  ],
   notes: () => <Notes />,
 } as const satisfies ContentExport;
diff --git a/packages/site/src/content/InputEmail v1/InputEmail.props.json b/packages/site/src/content/InputEmail v1/InputEmail.props.json
new file mode 100644
index 0000000000..fda8254ec5
--- /dev/null
+++ b/packages/site/src/content/InputEmail v1/InputEmail.props.json	
@@ -0,0 +1,273 @@
+[
+  {
+    "tags": {},
+    "filePath": "../components/src/InputEmail/InputEmail.tsx",
+    "description": "",
+    "displayName": "InputEmail",
+    "methods": [],
+    "props": {
+      "id": {
+        "defaultValue": null,
+        "description": "A unique identifier for the input.",
+        "name": "id",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "align": {
+        "defaultValue": null,
+        "description": "Determines the alignment of the text inside the input.",
+        "name": "align",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "\"center\" | \"right\""
+        }
+      },
+      "description": {
+        "defaultValue": null,
+        "description": "Further description of the input, can be used for a hint.",
+        "name": "description",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "ReactNode"
+        }
+      },
+      "disabled": {
+        "defaultValue": null,
+        "description": "Disable the input",
+        "name": "disabled",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "showMiniLabel": {
+        "defaultValue": {
+          "value": "true"
+        },
+        "description": "Controls the visibility of the mini label that appears inside the input\nwhen a value is entered. By default, the placeholder text moves up to\nbecome a mini label. Set to false to disable this behavior.",
+        "name": "showMiniLabel",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "invalid": {
+        "defaultValue": null,
+        "description": "Highlights the field red to indicate an error.",
+        "name": "invalid",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "inline": {
+        "defaultValue": null,
+        "description": "Adjusts the form field to go inline with a content. This also silences the\ngiven `validations` prop. You'd have to used the `onValidate` prop to\ncapture the message and render it somewhere else using the\n`InputValidation` component.",
+        "name": "inline",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "loading": {
+        "defaultValue": null,
+        "description": "Show a spinner to indicate loading",
+        "name": "loading",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "name": {
+        "defaultValue": null,
+        "description": "Name of the input.",
+        "name": "name",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "onChange": {
+        "defaultValue": null,
+        "description": "onChange handler that provides the new value (or event)\n@param newValue\n@param event",
+        "name": "onChange",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "(newValue: string | number | boolean | Date, event?: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void"
+        }
+      },
+      "onValidation": {
+        "defaultValue": null,
+        "description": "Callback to get the the status and message when validating a field\n@param message",
+        "name": "onValidation",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "(message: string) => void"
+        }
+      },
+      "placeholder": {
+        "defaultValue": null,
+        "description": "Text that appears inside the input when empty and floats above the value\nas a mini label once the user enters a value.\nWhen showMiniLabel is false, this text only serves as a standard placeholder and\ndisappears when the user types.",
+        "name": "placeholder",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "size": {
+        "defaultValue": null,
+        "description": "Adjusts the interface to either have small or large spacing.",
+        "name": "size",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "\"small\" | \"large\""
+        }
+      },
+      "value": {
+        "defaultValue": null,
+        "description": "Set the component to the given value.",
+        "name": "value",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "string | number | Date"
+        }
+      },
+      "clearable": {
+        "defaultValue": null,
+        "description": "Add a clear action on the input that clears the value.\n\nYou should always use `while-editing` if you want the input to be\nclearable. if the input value isn't editable (i.e. `InputTime`) you can\nset it to `always`.",
+        "name": "clearable",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "Clearable"
+        }
+      },
+      "version": {
+        "defaultValue": null,
+        "description": "Experimental:\nDetermine which version of the FormField to use.\nRight now this isn't used but it will be used in the future\nto allow us to release new versions of our form inputs without breaking existing functionality.",
+        "name": "version",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "1"
+        }
+      },
+      "maxLength": {
+        "defaultValue": null,
+        "description": "Maximum character length for an input. This also changes the width to\nroughly the same size as the max length. This is to communicate that the\nuser that on certain cases, they can only type a limited amount of\ncharacters.",
+        "name": "maxLength",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "FormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "number"
+        }
+      },
+      "readonly": {
+        "defaultValue": null,
+        "description": "Prevents users from editing the value.",
+        "name": "readonly",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "FormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "validations": {
+        "defaultValue": null,
+        "description": "Show an error message above the field. This also\nhighlights the the field red if an error message shows up.",
+        "name": "validations",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "FormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "RegisterOptions"
+        }
+      },
+      "defaultValue": {
+        "defaultValue": null,
+        "description": "Initial value of the input. Only use this when you need to pre-populate\nthe field with a data that is not controlled by the components state. If a\nstate is controlling the value, use the `value` prop instead.",
+        "name": "defaultValue",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "FormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "string | Date"
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/packages/site/src/content/InputEmail v1/InputEmail.stories.mdx b/packages/site/src/content/InputEmail v1/InputEmail.stories.mdx
new file mode 100644
index 0000000000..15cc12caf8
--- /dev/null
+++ b/packages/site/src/content/InputEmail v1/InputEmail.stories.mdx	
@@ -0,0 +1,36 @@
+import { Meta } from "@storybook/addon-docs";
+import { Banner } from "@jobber/components";
+
+<Meta title="Components/Forms and Inputs/InputEmail v1" />
+
+<Banner type="warning" dismissible={false}>
+  This is the v1 version of InputEmail and has been deprecated. Please use the
+  [v2 InputEmail](/components/InputEmail) component instead (`version={2}`).
+</Banner>
+
+# Input Email
+
+InputEmail is used to display input with built-in email validation.
+
+## Design & usage guidelines
+
+Use the InputEmail component when you expect the user to input an email address.
+By default, the InputEmail component will validate email addresses.
+
+If you want to add additional validation within the Web/JO, you can pass in the
+`validations` prop with your own message. Note: The validations prop is not
+available on mobile.
+
+## Clearable
+
+- **while-editing**: shows the clear button only while focused and when there is
+  a value. When focus leaves the field and its controls, the button is hidden.
+- **always**: shows the clear button whenever there is a value, even when
+  blurred. Never shown when the field is empty.
+- The clear button is not shown when the field is `disabled` or `readonly`, and
+  is not supported for `multiline` inputs.
+
+## Related components
+
+If you are not worried about email address validation, consider using
+[InputText](/components/InputText).
diff --git a/packages/site/src/content/InputEmail/exampleV1.ts b/packages/site/src/content/InputEmail v1/exampleV1.ts
similarity index 100%
rename from packages/site/src/content/InputEmail/exampleV1.ts
rename to packages/site/src/content/InputEmail v1/exampleV1.ts
diff --git a/packages/site/src/content/InputEmail v1/index.tsx b/packages/site/src/content/InputEmail v1/index.tsx
new file mode 100644
index 0000000000..00381ff841
--- /dev/null
+++ b/packages/site/src/content/InputEmail v1/index.tsx	
@@ -0,0 +1,16 @@
+import Content, { toc } from "./InputEmail.stories.mdx";
+import Props from "./InputEmail.props.json";
+import originalExample from "./exampleV1";
+import { ContentExport } from "../../types/content";
+
+export default {
+  content: () => <Content />,
+  toc,
+  props: Props,
+  component: {
+    element: originalExample,
+    defaultProps: {},
+  },
+  title: "InputEmail v1",
+  links: [],
+} as const satisfies ContentExport;
diff --git a/packages/site/src/content/InputEmail/InputEmail.stories.mdx b/packages/site/src/content/InputEmail/InputEmail.stories.mdx
index e73fd67c68..65a7f0230a 100644
--- a/packages/site/src/content/InputEmail/InputEmail.stories.mdx
+++ b/packages/site/src/content/InputEmail/InputEmail.stories.mdx
@@ -11,9 +11,8 @@ InputEmail is used to display input with built-in email validation.
 Use the InputEmail component when you expect the user to input an email address.
 By default, the InputEmail component will validate email addresses.
 
-If you want to add additional validation within the Web/JO, you can pass in the
-`validations` prop with your own message. Note: The validations prop is not
-available on mobile.
+If you want to show a validation error, use the `error` prop to pass an error
+message string. This will highlight the field red and display the error message.
 
 ## Clearable
 
@@ -21,7 +20,7 @@ available on mobile.
   a value. When focus leaves the field and its controls, the button is hidden.
 - **always**: shows the clear button whenever there is a value, even when
   blurred. Never shown when the field is empty.
-- The clear button is not shown when the field is `disabled` or `readonly`, and
+- The clear button is not shown when the field is `disabled` or `readOnly`, and
   is not supported for `multiline` inputs.
 
 ## Related components
diff --git a/packages/site/src/content/InputEmail/index.tsx b/packages/site/src/content/InputEmail/index.tsx
index f3b163c9b7..33021db3e6 100644
--- a/packages/site/src/content/InputEmail/index.tsx
+++ b/packages/site/src/content/InputEmail/index.tsx
@@ -1,8 +1,6 @@
 import InputEmailContent, { toc } from "./InputEmail.stories.mdx";
-import Props from "./InputEmail.props.json";
+import Props from "./InputEmailV2.props.json";
 import MobileProps from "./InputEmail.props-mobile.json";
-import RebuiltProps from "./InputEmailV2.props.json";
-import originalExample from "./exampleV1";
 import rebuiltExample from "./exampleV2";
 import { ContentExport } from "../../types/content";
 import { getStorybookUrl } from "../../layout/getStorybookUrl";
@@ -12,10 +10,8 @@ export default {
   toc,
   props: Props,
   mobileProps: MobileProps,
-  webSupportedProps: RebuiltProps,
   component: {
-    element: originalExample,
-    webSupported: rebuiltExample,
+    element: rebuiltExample,
     mobileElement: `<InputEmail placeholder={"Enter your email"} />`,
   },
   title: "InputEmail",
@@ -24,7 +20,7 @@ export default {
       label: "Web Storybook",
       type: "web",
       url: getStorybookUrl(
-        "?path=/story/components-forms-and-inputs-inputemail--basic",
+        "?path=/story/components-forms-and-inputs-inputemail-v2--basic",
         "web",
       ),
     },
@@ -37,14 +33,4 @@ export default {
       ),
     },
   ],
-  webSupportedLinks: [
-    {
-      label: "Web Storybook",
-      type: "web",
-      url: getStorybookUrl(
-        "?path=/story/components-forms-and-inputs-inputemail-v2--basic",
-        "web",
-      ),
-    },
-  ],
 } as const satisfies ContentExport;
diff --git a/packages/site/src/content/InputText v1/InputText.props.json b/packages/site/src/content/InputText v1/InputText.props.json
new file mode 100644
index 0000000000..ab213b9c94
--- /dev/null
+++ b/packages/site/src/content/InputText v1/InputText.props.json	
@@ -0,0 +1,455 @@
+[
+  {
+    "tags": {},
+    "filePath": "../components/src/InputText/InputText.tsx",
+    "description": "",
+    "displayName": "InputText",
+    "methods": [],
+    "props": {
+      "multiline": {
+        "defaultValue": null,
+        "description": "Use this when you're expecting a long answer.",
+        "name": "multiline",
+        "parent": {
+          "fileName": "packages/components/src/InputText/InputText.types.ts",
+          "name": "MultilineProps"
+        },
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "rows": {
+        "defaultValue": null,
+        "description": "Specifies the visible height of a long answer form field. Can be in the\nform of a single number to set a static height, or an object with a min\nand max keys indicating the minimum number of visible rows, and the\nmaximum number of visible rows.",
+        "name": "rows",
+        "parent": {
+          "fileName": "packages/components/src/InputText/InputText.types.ts",
+          "name": "MultilineProps"
+        },
+        "required": false,
+        "type": {
+          "name": "number | RowRange"
+        }
+      },
+      "id": {
+        "defaultValue": null,
+        "description": "A unique identifier for the input.",
+        "name": "id",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "align": {
+        "defaultValue": null,
+        "description": "Determines the alignment of the text inside the input.",
+        "name": "align",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "\"center\" | \"right\""
+        }
+      },
+      "description": {
+        "defaultValue": null,
+        "description": "Further description of the input, can be used for a hint.",
+        "name": "description",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "ReactNode"
+        }
+      },
+      "disabled": {
+        "defaultValue": null,
+        "description": "Disable the input",
+        "name": "disabled",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "showMiniLabel": {
+        "defaultValue": {
+          "value": "true"
+        },
+        "description": "Controls the visibility of the mini label that appears inside the input\nwhen a value is entered. By default, the placeholder text moves up to\nbecome a mini label. Set to false to disable this behavior.",
+        "name": "showMiniLabel",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "invalid": {
+        "defaultValue": null,
+        "description": "Highlights the field red to indicate an error.",
+        "name": "invalid",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "inline": {
+        "defaultValue": null,
+        "description": "Adjusts the form field to go inline with a content. This also silences the\ngiven `validations` prop. You'd have to used the `onValidate` prop to\ncapture the message and render it somewhere else using the\n`InputValidation` component.",
+        "name": "inline",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "loading": {
+        "defaultValue": null,
+        "description": "Show a spinner to indicate loading",
+        "name": "loading",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "name": {
+        "defaultValue": null,
+        "description": "Name of the input.",
+        "name": "name",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "onChange": {
+        "defaultValue": null,
+        "description": "onChange handler that provides the new value (or event)\n@param newValue\n@param event",
+        "name": "onChange",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "(newValue: string | number | boolean | Date, event?: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void"
+        }
+      },
+      "onValidation": {
+        "defaultValue": null,
+        "description": "Callback to get the the status and message when validating a field\n@param message",
+        "name": "onValidation",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "(message: string) => void"
+        }
+      },
+      "placeholder": {
+        "defaultValue": null,
+        "description": "Text that appears inside the input when empty and floats above the value\nas a mini label once the user enters a value.\nWhen showMiniLabel is false, this text only serves as a standard placeholder and\ndisappears when the user types.",
+        "name": "placeholder",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "size": {
+        "defaultValue": null,
+        "description": "Adjusts the interface to either have small or large spacing.",
+        "name": "size",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "\"small\" | \"large\""
+        }
+      },
+      "value": {
+        "defaultValue": null,
+        "description": "Set the component to the given value.",
+        "name": "value",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "string | number | Date"
+        }
+      },
+      "clearable": {
+        "defaultValue": null,
+        "description": "Add a clear action on the input that clears the value.\n\nYou should always use `while-editing` if you want the input to be\nclearable. if the input value isn't editable (i.e. `InputTime`) you can\nset it to `always`.",
+        "name": "clearable",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "Clearable"
+        }
+      },
+      "version": {
+        "defaultValue": null,
+        "description": "Experimental:\nDetermine which version of the FormField to use.\nRight now this isn't used but it will be used in the future\nto allow us to release new versions of our form inputs without breaking existing functionality.",
+        "name": "version",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "CommonFormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "1"
+        }
+      },
+      "autofocus": {
+        "defaultValue": null,
+        "description": "Determines if the input should be auto-focused, using the HTML attribute",
+        "name": "autofocus",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "FormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "maxLength": {
+        "defaultValue": null,
+        "description": "Maximum character length for an input. This also changes the width to\nroughly the same size as the max length. This is to communicate that the\nuser that on certain cases, they can only type a limited amount of\ncharacters.",
+        "name": "maxLength",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "FormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "number"
+        }
+      },
+      "readonly": {
+        "defaultValue": null,
+        "description": "Prevents users from editing the value.",
+        "name": "readonly",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "FormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "autocomplete": {
+        "defaultValue": null,
+        "description": "Determines if browser form autocomplete is enabled.\nNote that \"one-time-code\" is experimental and should not be used without\nconsultation. \"address-line1\" and \"address-line2\" are\nused for billing address information.\n\nPrefer the **on** option over the boolean **true** value to explicitly indicate auto-completion behavior.",
+        "name": "autocomplete",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "FormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "boolean | AutocompleteTypes"
+        }
+      },
+      "keyboard": {
+        "defaultValue": null,
+        "description": "Determines what kind of keyboard appears on mobile web.",
+        "name": "keyboard",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "FormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "\"numeric\" | \"decimal\""
+        }
+      },
+      "onEnter": {
+        "defaultValue": null,
+        "description": "A callback to handle \"Enter\" keypress. This will only run\nif Enter is the only key. Will not run if Shift or Control\nare being held.",
+        "name": "onEnter",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "FormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "(event: KeyboardEvent<Element>) => void"
+        }
+      },
+      "onFocus": {
+        "defaultValue": null,
+        "description": "Focus callback.",
+        "name": "onFocus",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "FormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "(event?: FocusEvent<Element, Element>) => void"
+        }
+      },
+      "onBlur": {
+        "defaultValue": null,
+        "description": "Blur callback.",
+        "name": "onBlur",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "FormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "(event?: FocusEvent<Element, Element>) => void"
+        }
+      },
+      "inputRef": {
+        "defaultValue": null,
+        "description": "",
+        "name": "inputRef",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "FormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>"
+        }
+      },
+      "validations": {
+        "defaultValue": null,
+        "description": "Show an error message above the field. This also\nhighlights the the field red if an error message shows up.",
+        "name": "validations",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "FormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "RegisterOptions"
+        }
+      },
+      "defaultValue": {
+        "defaultValue": null,
+        "description": "Initial value of the input. Only use this when you need to pre-populate\nthe field with a data that is not controlled by the components state. If a\nstate is controlling the value, use the `value` prop instead.",
+        "name": "defaultValue",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "FormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "string | Date"
+        }
+      },
+      "prefix": {
+        "defaultValue": null,
+        "description": "Adds a prefix label and icon to the field",
+        "name": "prefix",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "FormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "Affix"
+        }
+      },
+      "suffix": {
+        "defaultValue": null,
+        "description": "Adds a suffix label and icon with an optional action to the field",
+        "name": "suffix",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "FormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "{ onClick: () => void; readonly ariaLabel: string; readonly icon: IconNames; readonly label?: string; } | { onClick?: never; ariaLabel?: never; readonly label?: string; readonly icon?: IconNames; }"
+        }
+      },
+      "toolbar": {
+        "defaultValue": null,
+        "description": "Toolbar to render content below the input.",
+        "name": "toolbar",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "FormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "ReactNode"
+        }
+      },
+      "toolbarVisibility": {
+        "defaultValue": null,
+        "description": "Determines the visibility of the toolbar.",
+        "name": "toolbarVisibility",
+        "parent": {
+          "fileName": "packages/components/src/FormField/FormFieldTypes.ts",
+          "name": "FormFieldProps"
+        },
+        "required": false,
+        "type": {
+          "name": "\"while-editing\" | \"always\""
+        }
+      },
+      "ref": {
+        "defaultValue": null,
+        "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",
+        "name": "ref",
+        "parent": {
+          "fileName": "atlantis/node_modules/@types/react/index.d.ts",
+          "name": "RefAttributes"
+        },
+        "required": false,
+        "type": {
+          "name": "Ref<InputTextRef>"
+        }
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/packages/site/src/content/InputText v1/InputText.stories.mdx b/packages/site/src/content/InputText v1/InputText.stories.mdx
new file mode 100644
index 0000000000..45519a8dd0
--- /dev/null
+++ b/packages/site/src/content/InputText v1/InputText.stories.mdx	
@@ -0,0 +1,191 @@
+import { Canvas, Meta } from "@storybook/addon-docs";
+import { useState } from "react";
+import { InputText } from "@jobber/components/InputText";
+import { Content } from "@jobber/components/Content";
+import { Disclosure } from "@jobber/components/Disclosure";
+import { FormFieldLabel } from "@jobber/components/FormField";
+import { Banner } from "@jobber/components";
+
+<Meta title="Components/Forms and Inputs/InputText v1" component={InputText} />
+
+# Input Text (v1)
+
+<Banner type="warning" dismissible={false}>
+  This is the v1 version of InputText and has been deprecated. Please use the
+  [v2 InputText](/components/InputText) component instead (`version={2}`).
+</Banner>
+
+Input text is used in forms that accept short or long answers from users.
+
+## Design & usage guidelines
+
+### Controlled
+
+Use this to allow users to provide short answers.
+
+export const ControlledExample = () => {
+  const [age, setAge] = useState("Veintisiete");
+  return (
+    <InputText
+      value={age}
+      onChange={setAge}
+      name="age"
+      placeholder="Age in words"
+    />
+  );
+};
+
+<Canvas>
+  <ControlledExample />
+</Canvas>
+
+<Disclosure title="Show code">
+```tsx
+const ControlledExample = () => {
+  const [age, setAge] = useState("Veintisiete");
+  return (
+    <InputText
+      value={age}
+      onChange={setAge}
+      name="age"
+      placeholder="Age in words"
+    />
+  );
+};
+```
+</Disclosure>
+
+### Multiline
+
+Use this to allow users to provide long answers. The default number of rows is
+three. Note that `loading={true}` is unimplemented for multiline input text.
+
+For web, you can set a minimum and maximum number of rows. See:
+[Web/rows example](/storybook/web/?path=/story/components-forms-and-inputs-inputtext--multiline).
+
+<Canvas>
+  <InputText multiline={true} placeholder="Describe your age" />
+</Canvas>
+
+### Prefix/suffix
+
+Use a prefix or suffix when additional visual cues about an input's function may
+be helpful.
+
+Some fields have common visual patterns such as "search" having a magnifying
+glass icon, "Select" having a downwards arrow, or currency inputs having a
+currency symbol. These signifiers reinforce the purpose of the input to increase
+[Recognition over Recall](https://www.nngroup.com/articles/ten-usability-heuristics/)
+and align the input with
+[Consistency and Standards](https://www.nngroup.com/articles/ten-usability-heuristics/).
+With clearer guidance around the purpose of inputs, the user is able to better
+focus on the task at hand.
+
+<Canvas>
+  <Content>
+    <InputText
+      defaultValue="1,000,000"
+      placeholder="Invoice Total"
+      prefix={{ label: "$", icon: "invoice" }}
+      suffix={{ label: ".00" }}
+    />
+    <InputText
+      placeholder="Search"
+      prefix={{ icon: "search" }}
+      suffix={{
+        icon: "cross",
+        ariaLabel: "clear search",
+        onClick: () => alert("This could clear a search value"),
+      }}
+    />
+  </Content>
+</Canvas>
+
+### Validation message
+
+You can add your own custom validation messages on a field to assist the user in
+successfully completing a form. This doesn't _replace_ server-side validation,
+but minimizes the need for it as the user should be set up for success by proper
+guidance pre-submission before any "bad" data gets to the server.
+
+Follow the
+[product vocabulary](/content/product-vocabulary#component-view-general-phrasing)
+for guidance on writing helpful error messages.
+
+<Canvas>
+  <InputText
+    placeholder="What's your age"
+    validations={{
+      required: {
+        value: true,
+        message: "You have to tell us your age",
+      },
+      validate: val => {
+        if (val.length > 0 && !isNaN(val)) {
+          return "Type your age in words please.";
+        }
+        if (val.length >= 10) {
+          return "That seems too old.";
+        }
+        return true;
+      },
+    }}
+  />
+</Canvas>
+
+## States
+
+### Disabled
+
+<Canvas>
+  <InputText
+    placeholder="Credit card"
+    value="**** **** **** 1234"
+    disabled={true}
+  />
+</Canvas>
+
+### Invalid
+
+For mobile, you can pass a string to the `invalid` prop to display an error.
+See:
+[Mobile/invalid example](/storybook/mobile/?path=/story/components-forms-and-inputs-inputtext--invalid).
+
+<Canvas>
+  <InputText placeholder="Email" value="atlantis" invalid={true} />
+</Canvas>
+
+### External label
+
+You can use `FormFieldLabel` to provide a label outside of the input. The
+`showMiniLabel` prop on `InputText` can be used to hide the mini label that
+appears when a value is provided.
+
+<style>
+  {`
+  .fullWidth {
+    width: 100%;
+  }
+`}
+</style>
+
+<Canvas>
+  <div className="fullWidth">
+    <FormFieldLabel external={true} htmlFor="ext-input">
+      External label
+    </FormFieldLabel>
+    <InputText
+      showMiniLabel={false}
+      placeholder="You can still have a placeholder"
+      id="ext-input"
+    />
+  </div>
+</Canvas>
+
+### Keyboard
+
+Determine what default keyboard appears on mobile.
+
+<Canvas>
+  <InputText placeholder="Describe your age" keyboard="numeric" />
+</Canvas>
diff --git a/packages/site/src/content/InputText v1/InputTextNotes.mdx b/packages/site/src/content/InputText v1/InputTextNotes.mdx
new file mode 100644
index 0000000000..3ef7aa03b1
--- /dev/null
+++ b/packages/site/src/content/InputText v1/InputTextNotes.mdx	
@@ -0,0 +1,23 @@
+## Configuration
+
+### react-hook-form
+
+Atlantis utilizes [React Hook Form](https://react-hook-form.com/) to handle
+`input` and `form` validation. This means that the
+[React Hook Form validation options](https://react-hook-form.com/api#register)
+are available out of the box.
+
+This includes, but is not limited to:
+
+- `required` - A Boolean which, if true, indicates that the input must have a
+  value.
+- `maxLength` - The maximum length of the value to accept for this input.
+- `minLength` - The minimum length of the value to accept for this input.
+- `pattern` - The regex pattern for the input.
+- `validate` - You can pass a callback function as the argument to validate, or
+  you can pass an object of callback functions to validate all of them.
+
+### Using onValidation (Web)
+
+If you need to capture the error message and render it outside of the component.
+Read the [InputValidation](/components/InputValidation) documentation.
diff --git a/packages/site/src/content/InputText/exampleV1.ts b/packages/site/src/content/InputText v1/exampleV1.ts
similarity index 100%
rename from packages/site/src/content/InputText/exampleV1.ts
rename to packages/site/src/content/InputText v1/exampleV1.ts
diff --git a/packages/site/src/content/InputText v1/index.tsx b/packages/site/src/content/InputText v1/index.tsx
new file mode 100644
index 0000000000..87cd98170b
--- /dev/null
+++ b/packages/site/src/content/InputText v1/index.tsx	
@@ -0,0 +1,18 @@
+import Content, { toc } from "./InputText.stories.mdx";
+import Props from "./InputText.props.json";
+import Notes from "./InputTextNotes.mdx";
+import originalExample from "./exampleV1";
+import { ContentExport } from "../../types/content";
+
+export default {
+  content: () => <Content />,
+  toc,
+  props: Props,
+  component: {
+    element: originalExample,
+    defaultProps: {},
+  },
+  title: "InputText v1",
+  links: [],
+  notes: () => <Notes />,
+} as const satisfies ContentExport;
diff --git a/packages/site/src/content/InputText/InputText.stories.mdx b/packages/site/src/content/InputText/InputText.stories.mdx
index eb54ea6da0..bb24e59bb3 100644
--- a/packages/site/src/content/InputText/InputText.stories.mdx
+++ b/packages/site/src/content/InputText/InputText.stories.mdx
@@ -3,7 +3,6 @@ import { useState } from "react";
 import { InputText } from "@jobber/components/InputText";
 import { Content } from "@jobber/components/Content";
 import { Disclosure } from "@jobber/components/Disclosure";
-import { FormFieldLabel } from "@jobber/components/FormField";
 
 <Meta title="Components/Forms and Inputs/InputText" component={InputText} />
 
@@ -21,6 +20,7 @@ export const ControlledExample = () => {
   const [age, setAge] = useState("Veintisiete");
   return (
     <InputText
+      version={2}
       value={age}
       onChange={setAge}
       name="age"
@@ -39,6 +39,7 @@ const ControlledExample = () => {
   const [age, setAge] = useState("Veintisiete");
   return (
     <InputText
+      version={2}
       value={age}
       onChange={setAge}
       name="age"
@@ -52,13 +53,26 @@ const ControlledExample = () => {
 ### Multiline
 
 Use this to allow users to provide long answers. The default number of rows is
-three. Note that `loading={true}` is unimplemented for multiline input text.
+three.
 
 For web, you can set a minimum and maximum number of rows. See:
-[Web/rows example](/storybook/web/?path=/story/components-forms-and-inputs-inputtext--multiline).
+[Web/rows example](/storybook/web/?path=/story/components-forms-and-inputs-inputtext-v2--multiline).
+
+export const MultilineExample = () => {
+  const [value, setValue] = useState("");
+  return (
+    <InputText
+      version={2}
+      multiline={true}
+      placeholder="Describe your age"
+      value={value}
+      onChange={setValue}
+    />
+  );
+};
 
 <Canvas>
-  <InputText multiline={true} placeholder="Describe your age" />
+  <MultilineExample />
 </Canvas>
 
 ### Prefix/suffix
@@ -75,111 +89,97 @@ and align the input with
 With clearer guidance around the purpose of inputs, the user is able to better
 focus on the task at hand.
 
+export const PrefixSuffixExample = () => {
+  const [invoice, setInvoice] = useState("1,000,000");
+  const [search, setSearch] = useState("");
+  return (
+    <Content>
+      <InputText
+        version={2}
+        value={invoice}
+        onChange={setInvoice}
+        placeholder="Invoice Total"
+        prefix={{ label: "$", icon: "invoice" }}
+        suffix={{ label: ".00" }}
+      />
+      <InputText
+        version={2}
+        value={search}
+        onChange={setSearch}
+        placeholder="Search"
+        prefix={{ icon: "search" }}
+        suffix={{
+          icon: "cross",
+          ariaLabel: "clear search",
+          onClick: () => setSearch(""),
+        }}
+      />
+    </Content>
+  );
+};
+
 <Canvas>
-  <Content>
-    <InputText
-      defaultValue="1,000,000"
-      placeholder="Invoice Total"
-      prefix={{ label: "$", icon: "invoice" }}
-      suffix={{ label: ".00" }}
-    />
-    <InputText
-      placeholder="Search"
-      prefix={{ icon: "search" }}
-      suffix={{
-        icon: "cross",
-        ariaLabel: "clear search",
-        onClick: () => alert("This could clear a search value"),
-      }}
-    />
-  </Content>
+  <PrefixSuffixExample />
 </Canvas>
 
-### Validation message
+### Error message
 
-You can add your own custom validation messages on a field to assist the user in
-successfully completing a form. This doesn't _replace_ server-side validation,
-but minimizes the need for it as the user should be set up for success by proper
-guidance pre-submission before any "bad" data gets to the server.
+You can provide an `error` string on a field to assist the user in successfully
+completing a form.
 
 Follow the
 [product vocabulary](/content/product-vocabulary#component-view-general-phrasing)
 for guidance on writing helpful error messages.
 
+export const ErrorExample = () => {
+  const [value, setValue] = useState("atlantis");
+  return (
+    <InputText
+      version={2}
+      placeholder="Email"
+      value={value}
+      onChange={setValue}
+      error="Please enter a valid email address"
+    />
+  );
+};
+
 <Canvas>
-  <InputText
-    placeholder="What's your age"
-    validations={{
-      required: {
-        value: true,
-        message: "You have to tell us your age",
-      },
-      validate: val => {
-        if (val.length > 0 && !isNaN(val)) {
-          return "Type your age in words please.";
-        }
-        if (val.length >= 10) {
-          return "That seems too old.";
-        }
-        return true;
-      },
-    }}
-  />
+  <ErrorExample />
 </Canvas>
 
 ## States
 
 ### Disabled
 
-<Canvas>
-  <InputText
-    placeholder="Credit card"
-    value="**** **** **** 1234"
-    disabled={true}
-  />
-</Canvas>
-
-### Invalid
-
-For mobile, you can pass a string to the `invalid` prop to display an error.
-See:
-[Mobile/invalid example](/storybook/mobile/?path=/story/components-forms-and-inputs-inputtext--invalid).
+export const DisabledExample = () => {
+  return (
+    <InputText
+      version={2}
+      placeholder="Credit card"
+      value="**** **** **** 1234"
+      disabled={true}
+    />
+  );
+};
 
 <Canvas>
-  <InputText placeholder="Email" value="atlantis" invalid={true} />
+  <DisabledExample />
 </Canvas>
 
-### External label
-
-You can use `FormFieldLabel` to provide a label outside of the input. The
-`showMiniLabel` prop on `InputText` can be used to hide the mini label that
-appears when a value is provided.
-
-<style>
-  {`
-  .fullWidth {
-    width: 100%;
-  }
-`}
-</style>
+### Invalid
 
-<Canvas>
-  <div className="fullWidth">
-    <FormFieldLabel external={true} htmlFor="ext-input">
-      External label
-    </FormFieldLabel>
+export const InvalidExample = () => {
+  return (
     <InputText
-      showMiniLabel={false}
-      placeholder="You can still have a placeholder"
-      id="ext-input"
+      version={2}
+      placeholder="Email"
+      value="atlantis"
+      invalid={true}
     />
-  </div>
-</Canvas>
-
-### Keyboard
-
-Determine what default keyboard appears on mobile.
+  );
+};
 
 <Canvas>
-  <InputText placeholder="Describe your age" keyboard="numeric" />
+  <InvalidExample />
 </Canvas>
diff --git a/packages/site/src/content/InputText/InputTextNotes.mdx b/packages/site/src/content/InputText/InputTextNotes.mdx
index 55752577ae..4e4e23c8db 100644
--- a/packages/site/src/content/InputText/InputTextNotes.mdx
+++ b/packages/site/src/content/InputText/InputTextNotes.mdx
@@ -1,27 +1,5 @@
 ## Configuration
 
-### react-hook-form
-
-Atlantis utilizes [React Hook Form](https://react-hook-form.com/) to handle
-`input` and `form` validation. This means that the
-[React Hook Form validation options](https://react-hook-form.com/api#register)
-are available out of the box.
-
-This includes, but is not limited to:
-
-- `required` - A Boolean which, if true, indicates that the input must have a
-  value.
-- `maxLength` - The maximum length of the value to accept for this input.
-- `minLength` - The minimum length of the value to accept for this input.
-- `pattern` - The regex pattern for the input.
-- `validate` - You can pass a callback function as the argument to validate, or
-  you can pass an object of callback functions to validate all of them.
-
-### Using onValidation (Web)
-
-If you need to capture the error message and render it outside of the component.
-Read the [InputValidation](/components/InputValidation) documentation.
-
 ### Version 2 Shim (Experimental)
 
 If you need to use the version 2 shim, you can pass `version={2}` to the
diff --git a/packages/site/src/content/InputText/index.tsx b/packages/site/src/content/InputText/index.tsx
index 72df4dca3f..810fe9c0e1 100644
--- a/packages/site/src/content/InputText/index.tsx
+++ b/packages/site/src/content/InputText/index.tsx
@@ -1,9 +1,7 @@
 import Content, { toc } from "./InputText.stories.mdx";
-import Props from "./InputText.props.json";
+import Props from "./InputTextV2.props.json";
 import MobileProps from "./InputText.props-mobile.json";
-import RebuiltProps from "./InputTextV2.props.json";
 import Notes from "./InputTextNotes.mdx";
-import originalExample from "./exampleV1";
 import rebuiltExample from "./exampleV2";
 import { ContentExport } from "../../types/content";
 import { getStorybookUrl } from "../../layout/getStorybookUrl";
@@ -13,10 +11,8 @@ export default {
   toc,
   props: Props,
   mobileProps: MobileProps,
-  webSupportedProps: RebuiltProps,
   component: {
-    element: originalExample,
-    webSupported: rebuiltExample,
+    element: rebuiltExample,
     mobileElement: `<InputText name="age" placeholder="Age in words." />`,
   },
   title: "InputText",
@@ -25,7 +21,7 @@ export default {
       label: "Web Storybook",
       type: "web",
       url: getStorybookUrl(
-        "?path=/story/components-forms-and-inputs-inputtext--basic",
+        "?path=/story/components-forms-and-inputs-inputtext-v2--basic",
         "web",
       ),
     },
@@ -38,15 +34,5 @@ export default {
       ),
     },
   ],
-  webSupportedLinks: [
-    {
-      label: "Web Storybook",
-      type: "web",
-      url: getStorybookUrl(
-        "?path=/story/components-forms-and-inputs-inputtext-v2--basic",
-        "web",
-      ),
-    },
-  ],
   notes: () => <Notes />,
 } as const satisfies ContentExport;
diff --git a/packages/site/src/content/index.ts b/packages/site/src/content/index.ts
index fa5240c978..83353dc4d7 100644
--- a/packages/site/src/content/index.ts
+++ b/packages/site/src/content/index.ts
@@ -14,6 +14,7 @@ import ButtonContent from "./Button";
 import ButtonDismissContent from "./ButtonDismiss";
 import ButtonGroupContent from "./ButtonGroup";
 import CheckboxContent from "./Checkbox";
+import CheckboxV1Content from "./Checkbox v1";
 import CardContent from "./Card";
 import ChipContent from "./Chip";
 import ChipsContent from "./Chips";
@@ -57,6 +58,7 @@ import InputAvatarContent from "./InputAvatar";
 import InputCurrencyContent from "./InputCurrency";
 import InputDateContent from "./InputDate";
 import InputEmailContent from "./InputEmail";
+import InputEmailV1Content from "./InputEmail v1";
 import InputFieldWrapperContent from "./InputFieldWrapper";
 import InputFileContent from "./InputFile";
 import InputGroupContent from "./InputGroup";
@@ -66,6 +68,7 @@ import InputPhoneNumberContent from "./InputPhoneNumber";
 import InputPressableContent from "./InputPressable";
 import InputSearchContent from "./InputSearch";
 import InputTextContent from "./InputText";
+import InputTextV1Content from "./InputText v1";
 import InputTimeContent from "./InputTime";
 import InputValidationContent from "./InputValidation";
 import LightBoxContent from "./LightBox";
@@ -157,6 +160,9 @@ export const SiteContent: Record<string, ContentExport> = {
   Checkbox: {
     ...CheckboxContent,
   },
+  "Checkbox v1": {
+    ...CheckboxV1Content,
+  },
   Chip: {
     ...ChipContent,
   },
@@ -283,6 +289,9 @@ export const SiteContent: Record<string, ContentExport> = {
   InputEmail: {
     ...InputEmailContent,
   },
+  "InputEmail v1": {
+    ...InputEmailV1Content,
+  },
   InputFieldWrapper: {
     ...InputFieldWrapperContent,
   },
@@ -310,6 +319,9 @@ export const SiteContent: Record<string, ContentExport> = {
   InputText: {
     ...InputTextContent,
   },
+  "InputText v1": {
+    ...InputTextV1Content,
+  },
   InputTime: {
     ...InputTimeContent,
   },