From 698d555c68340522d8a25800364dde9ae0da5ade Mon Sep 17 00:00:00 2001
From: lisa <llupi@scaleway.com>
Date: Thu, 2 Jan 2025 15:35:05 +0100
Subject: [PATCH 1/2] feat: timeInputV2

---
 .changeset/funny-gifts-shave.md               |    5 +
 .../__stories__/Controlled.stories.tsx        |   54 +
 .../__stories__/Disabled.stories.tsx          |    7 +
 .../TimeInputV2/__stories__/Error.stories.tsx |   13 +
 .../__stories__/Placeholder.stories.tsx       |   18 +
 .../__stories__/Playground.stories.tsx        |    8 +
 .../__stories__/ReadOnly.stories.tsx          |    7 +
 .../__stories__/Required.stories.tsx          |   14 +
 .../TimeInputV2/__stories__/Size.stories.tsx  |   11 +
 .../__stories__/Template.stories.tsx          |    6 +
 .../__stories__/TimeFormat.stories.tsx        |   35 +
 .../TimeInputV2/__stories__/index.stories.tsx |   22 +
 .../__snapshots__/index.test.tsx.snap         | 5801 +++++++++++++++++
 .../TimeInputV2/__tests__/helper.test.ts      |   74 +
 .../TimeInputV2/__tests__/index.test.tsx      |  231 +
 .../src/components/TimeInputV2/constants.ts   |   12 +
 .../ui/src/components/TimeInputV2/helpers.ts  |   67 +
 .../ui/src/components/TimeInputV2/index.tsx   |  469 ++
 packages/ui/src/components/index.ts           |    1 +
 19 files changed, 6855 insertions(+)
 create mode 100644 .changeset/funny-gifts-shave.md
 create mode 100644 packages/ui/src/components/TimeInputV2/__stories__/Controlled.stories.tsx
 create mode 100644 packages/ui/src/components/TimeInputV2/__stories__/Disabled.stories.tsx
 create mode 100644 packages/ui/src/components/TimeInputV2/__stories__/Error.stories.tsx
 create mode 100644 packages/ui/src/components/TimeInputV2/__stories__/Placeholder.stories.tsx
 create mode 100644 packages/ui/src/components/TimeInputV2/__stories__/Playground.stories.tsx
 create mode 100644 packages/ui/src/components/TimeInputV2/__stories__/ReadOnly.stories.tsx
 create mode 100644 packages/ui/src/components/TimeInputV2/__stories__/Required.stories.tsx
 create mode 100644 packages/ui/src/components/TimeInputV2/__stories__/Size.stories.tsx
 create mode 100644 packages/ui/src/components/TimeInputV2/__stories__/Template.stories.tsx
 create mode 100644 packages/ui/src/components/TimeInputV2/__stories__/TimeFormat.stories.tsx
 create mode 100644 packages/ui/src/components/TimeInputV2/__stories__/index.stories.tsx
 create mode 100644 packages/ui/src/components/TimeInputV2/__tests__/__snapshots__/index.test.tsx.snap
 create mode 100644 packages/ui/src/components/TimeInputV2/__tests__/helper.test.ts
 create mode 100644 packages/ui/src/components/TimeInputV2/__tests__/index.test.tsx
 create mode 100644 packages/ui/src/components/TimeInputV2/constants.ts
 create mode 100644 packages/ui/src/components/TimeInputV2/helpers.ts
 create mode 100644 packages/ui/src/components/TimeInputV2/index.tsx

diff --git a/.changeset/funny-gifts-shave.md b/.changeset/funny-gifts-shave.md
new file mode 100644
index 0000000000..fe430e8705
--- /dev/null
+++ b/.changeset/funny-gifts-shave.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": minor
+---
+
+New component `<TimeInputV2 />`
diff --git a/packages/ui/src/components/TimeInputV2/__stories__/Controlled.stories.tsx b/packages/ui/src/components/TimeInputV2/__stories__/Controlled.stories.tsx
new file mode 100644
index 0000000000..b6eba69cd4
--- /dev/null
+++ b/packages/ui/src/components/TimeInputV2/__stories__/Controlled.stories.tsx
@@ -0,0 +1,54 @@
+import type { StoryFn } from '@storybook/react'
+import { useState } from 'react'
+import { type Time, TimeInputV2 } from '..'
+import { Button } from '../../Button'
+import { Stack } from '../../Stack'
+
+export const Controlled: StoryFn<typeof TimeInputV2> = args => {
+  const [value24, setValue24] = useState<Time>()
+  const [value12, setValue12] = useState<Time>()
+
+  return (
+    <Stack gap={5}>
+      <Stack gap={1}>
+        <TimeInputV2
+          {...args}
+          onChange={newValue => {
+            setValue24(newValue)
+          }}
+          value={value24}
+          labelDescription="24 format"
+        />
+        Time: {value24?.h}h {value24?.m}m {value24?.s}s
+        <Button onClick={() => setValue24({ h: '12', m: '34', s: '56' })}>
+          set time to 12:34:56
+        </Button>
+      </Stack>
+      <Stack gap={1}>
+        <TimeInputV2
+          {...args}
+          onChange={newValue => {
+            setValue12(newValue)
+          }}
+          value={value12}
+          timeFormat={12}
+          labelDescription="12 format"
+        />
+        Time: {value12?.h}h {value12?.m}m {value12?.s}s {value12?.period}
+      </Stack>
+    </Stack>
+  )
+}
+
+Controlled.args = {
+  label: 'Label',
+}
+
+Controlled.parameters = {
+  docs: {
+    description: {
+      story:
+        'Most of the time, you need a [controlled component](https://reactjs.org/docs/forms.html).',
+    },
+  },
+}
diff --git a/packages/ui/src/components/TimeInputV2/__stories__/Disabled.stories.tsx b/packages/ui/src/components/TimeInputV2/__stories__/Disabled.stories.tsx
new file mode 100644
index 0000000000..59e97fdc84
--- /dev/null
+++ b/packages/ui/src/components/TimeInputV2/__stories__/Disabled.stories.tsx
@@ -0,0 +1,7 @@
+import { Template } from './Template.stories'
+
+export const Disabled = Template.bind({})
+
+Disabled.args = {
+  disabled: true,
+}
diff --git a/packages/ui/src/components/TimeInputV2/__stories__/Error.stories.tsx b/packages/ui/src/components/TimeInputV2/__stories__/Error.stories.tsx
new file mode 100644
index 0000000000..d40d273822
--- /dev/null
+++ b/packages/ui/src/components/TimeInputV2/__stories__/Error.stories.tsx
@@ -0,0 +1,13 @@
+import { Template } from './Template.stories'
+
+export const Error = Template.bind({})
+
+Error.args = {
+  error: 'An error',
+}
+
+Error.parameters = {
+  docs: {
+    description: { story: 'Fill `TimeInput` error using `error` property.' },
+  },
+}
diff --git a/packages/ui/src/components/TimeInputV2/__stories__/Placeholder.stories.tsx b/packages/ui/src/components/TimeInputV2/__stories__/Placeholder.stories.tsx
new file mode 100644
index 0000000000..1ad62c8286
--- /dev/null
+++ b/packages/ui/src/components/TimeInputV2/__stories__/Placeholder.stories.tsx
@@ -0,0 +1,18 @@
+import { Template } from './Template.stories'
+
+export const Placeholder = Template.bind({})
+
+Placeholder.args = {
+  placeholder: { m: '--', s: '--', h: '--', period: '-M' },
+  label: 'Custom placeholder',
+  timeFormat: 12,
+}
+
+Placeholder.parameters = {
+  docs: {
+    description: {
+      story:
+        'It is possible to set a custom placeholder for every input with prop `placeholder`, which is of type `Time`',
+    },
+  },
+}
diff --git a/packages/ui/src/components/TimeInputV2/__stories__/Playground.stories.tsx b/packages/ui/src/components/TimeInputV2/__stories__/Playground.stories.tsx
new file mode 100644
index 0000000000..deaace388d
--- /dev/null
+++ b/packages/ui/src/components/TimeInputV2/__stories__/Playground.stories.tsx
@@ -0,0 +1,8 @@
+import { Template } from './Template.stories'
+
+export const Playground = Template.bind({})
+
+Playground.args = {
+  label: 'Label',
+  helper: 'Helper',
+}
diff --git a/packages/ui/src/components/TimeInputV2/__stories__/ReadOnly.stories.tsx b/packages/ui/src/components/TimeInputV2/__stories__/ReadOnly.stories.tsx
new file mode 100644
index 0000000000..c86f05cbce
--- /dev/null
+++ b/packages/ui/src/components/TimeInputV2/__stories__/ReadOnly.stories.tsx
@@ -0,0 +1,7 @@
+import { Template } from './Template.stories'
+
+export const ReadOnly = Template.bind({})
+
+ReadOnly.args = {
+  readOnly: true,
+}
diff --git a/packages/ui/src/components/TimeInputV2/__stories__/Required.stories.tsx b/packages/ui/src/components/TimeInputV2/__stories__/Required.stories.tsx
new file mode 100644
index 0000000000..6410c6c666
--- /dev/null
+++ b/packages/ui/src/components/TimeInputV2/__stories__/Required.stories.tsx
@@ -0,0 +1,14 @@
+import { Template } from './Template.stories'
+
+export const Required = Template.bind({})
+
+Required.args = {
+  required: true,
+  label: 'Label',
+}
+
+Required.parameters = {
+  docs: {
+    description: { story: 'Add a required mark using `required` property.' },
+  },
+}
diff --git a/packages/ui/src/components/TimeInputV2/__stories__/Size.stories.tsx b/packages/ui/src/components/TimeInputV2/__stories__/Size.stories.tsx
new file mode 100644
index 0000000000..f9e68b2545
--- /dev/null
+++ b/packages/ui/src/components/TimeInputV2/__stories__/Size.stories.tsx
@@ -0,0 +1,11 @@
+import type { StoryFn } from '@storybook/react'
+import { TimeInputV2 } from '..'
+import { Stack } from '../../Stack'
+
+export const Size: StoryFn<typeof TimeInputV2> = args => (
+  <Stack gap="2">
+    <TimeInputV2 {...args} label="small" size="small" />
+    <TimeInputV2 {...args} label="medium" size="medium" />
+    <TimeInputV2 {...args} label="large" size="large" />
+  </Stack>
+)
diff --git a/packages/ui/src/components/TimeInputV2/__stories__/Template.stories.tsx b/packages/ui/src/components/TimeInputV2/__stories__/Template.stories.tsx
new file mode 100644
index 0000000000..943f363ab0
--- /dev/null
+++ b/packages/ui/src/components/TimeInputV2/__stories__/Template.stories.tsx
@@ -0,0 +1,6 @@
+import type { StoryFn } from '@storybook/react'
+import { TimeInputV2 } from '..'
+
+export const Template: StoryFn<typeof TimeInputV2> = args => (
+  <TimeInputV2 {...args} />
+)
diff --git a/packages/ui/src/components/TimeInputV2/__stories__/TimeFormat.stories.tsx b/packages/ui/src/components/TimeInputV2/__stories__/TimeFormat.stories.tsx
new file mode 100644
index 0000000000..8012d9435f
--- /dev/null
+++ b/packages/ui/src/components/TimeInputV2/__stories__/TimeFormat.stories.tsx
@@ -0,0 +1,35 @@
+import type { StoryFn } from '@storybook/react'
+import { useState } from 'react'
+import { TimeInputV2 } from '..'
+import { Stack } from '../../Stack'
+
+type ValueType = {
+  h: string
+  m: string
+  s: string
+  period?: string
+}
+
+export const TimeFormat: StoryFn<typeof TimeInputV2> = args => {
+  const [value1, setValue1] = useState<ValueType>({ h: '13', m: '34', s: '00' })
+  const [value2, setValue2] = useState<ValueType>({ h: '13', m: '34', s: '00' })
+
+  return (
+    <Stack gap="2">
+      <TimeInputV2
+        {...args}
+        label="12-hour format"
+        timeFormat={12}
+        value={value1}
+        onChange={setValue1}
+      />
+      <TimeInputV2
+        {...args}
+        label="24-hour format"
+        timeFormat={24}
+        value={value2}
+        onChange={setValue2}
+      />
+    </Stack>
+  )
+}
diff --git a/packages/ui/src/components/TimeInputV2/__stories__/index.stories.tsx b/packages/ui/src/components/TimeInputV2/__stories__/index.stories.tsx
new file mode 100644
index 0000000000..4fae0a895f
--- /dev/null
+++ b/packages/ui/src/components/TimeInputV2/__stories__/index.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta } from '@storybook/react'
+import { TimeInputV2 } from '..'
+
+export default {
+  component: TimeInputV2,
+  parameters: {
+    experimental: true,
+  },
+  tags: ['experimental'],
+  title: 'Components/Data Entry/TimeInputV2',
+  decorators: [Story => <Story />],
+} as Meta<typeof TimeInputV2>
+
+export { Playground } from './Playground.stories'
+export { Size } from './Size.stories'
+export { Disabled } from './Disabled.stories'
+export { ReadOnly } from './ReadOnly.stories'
+export { Placeholder } from './Placeholder.stories'
+export { Error } from './Error.stories'
+export { Required } from './Required.stories'
+export { TimeFormat } from './TimeFormat.stories'
+export { Controlled } from './Controlled.stories'
diff --git a/packages/ui/src/components/TimeInputV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/TimeInputV2/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000000..273f4b9beb
--- /dev/null
+++ b/packages/ui/src/components/TimeInputV2/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,5801 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TimeInput > renders correctly clearable 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-4 {
+  color: #222638;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: text;
+  padding: 0.5rem;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  border: 1px solid #d9dadd;
+}
+
+.emotion-6:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-6[data-disabled="false"]:hover,
+.emotion-6 [data-disabled="false"]:focus {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-6[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-6[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-6[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-6[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-6[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  border-color: #92103f;
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-12 {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.875rem;
+  width: 1.5625rem;
+  height: 1.5rem;
+  text-align: center;
+  border-radius: 0.25rem;
+  color: #3f4250;
+}
+
+.emotion-12[data-size='large'] {
+  font-size: 1rem;
+}
+
+.emotion-12:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  background-color: #e9eaeb;
+  color: #727683;
+}
+
+.emotion-12:not([data-disabled="true"]):not([data-readonly="true"]):active,
+.emotion-12:not([data-disabled="true"]):not([data-readonly="true"]):focus {
+  background-color: #e9eaeb;
+  color: #3f4250;
+}
+
+.emotion-12[data-readonly='true'] {
+  cursor: default;
+}
+
+.emotion-12[data-disabled='true'] {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-12[data-period="true"] {
+  color: #727683;
+}
+
+.emotion-12::-moz-selection {
+  background: none;
+}
+
+.emotion-12::selection {
+  background: none;
+}
+
+.emotion-15 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding-inline: 0.125rem;
+}
+
+.emotion-30 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: 2rem;
+  padding: 0 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  width: 2rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  outline-offset: 2px;
+  white-space: nowrap;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  paragraph-spacing: 0;
+  text-case: none;
+  background: none;
+  border: none;
+  color: #3f4250;
+}
+
+.emotion-30:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-30:active {
+  box-shadow: 0px 0px 0px 3px #151a2d5c;
+}
+
+.emotion-30:hover,
+.emotion-30:active {
+  background: #e9eaeb;
+  color: #222638;
+}
+
+.emotion-32 {
+  vertical-align: middle;
+  fill: currentColor;
+  height: 16px;
+  width: 16px;
+  min-width: 16px;
+  min-height: 16px;
+}
+
+.emotion-32 .fillStroke {
+  stroke: currentColor;
+  fill: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <div
+        class="emotion-2 emotion-1"
+      >
+        <label
+          class="emotion-4 emotion-5"
+        >
+          test
+        </label>
+      </div>
+      <div
+        class="emotion-6 emotion-7"
+        data-disabled="false"
+        data-error="false"
+        data-readonly="false"
+        data-size="medium"
+      >
+        <div
+          class="emotion-8 emotion-1"
+        >
+          <div
+            class="emotion-8 emotion-1"
+          >
+            <input
+              aria-label="hours-input"
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="hours-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+            <span
+              class="emotion-14 emotion-15 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-8 emotion-1"
+          >
+            <input
+              aria-label="minutes-input"
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="minutes-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+            <span
+              class="emotion-14 emotion-15 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-8 emotion-1"
+          >
+            <input
+              aria-label="seconds-input"
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="seconds-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+          </div>
+        </div>
+        <div
+          class="emotion-2 emotion-1"
+        >
+          <button
+            aria-label="clear value"
+            class="emotion-30 emotion-31"
+            data-testid="clear"
+            type="button"
+          >
+            <svg
+              class="emotion-32 emotion-33"
+              viewBox="0 0 16 16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94z"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TimeInput > renders correctly clearable 2`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-4 {
+  color: #222638;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-4 {
+  color: #222638;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-6 {
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-6 {
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: text;
+  padding: 0.5rem;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  border: 1px solid #d9dadd;
+}
+
+.emotion-8:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-8[data-disabled="false"]:hover,
+.emotion-8 [data-disabled="false"]:focus {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-8[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-8[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-8[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-8[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-8[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-8[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  border-color: #92103f;
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: text;
+  padding: 0.5rem;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  border: 1px solid #d9dadd;
+}
+
+.emotion-8:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-8[data-disabled="false"]:hover,
+.emotion-8 [data-disabled="false"]:focus {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-8[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-8[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-8[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-8[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-8[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-8[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  border-color: #92103f;
+}
+
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-14 {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.875rem;
+  width: 1.5625rem;
+  height: 1.5rem;
+  text-align: center;
+  border-radius: 0.25rem;
+  color: #3f4250;
+}
+
+.emotion-14[data-size='large'] {
+  font-size: 1rem;
+}
+
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  background-color: #e9eaeb;
+  color: #727683;
+}
+
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):active,
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):focus {
+  background-color: #e9eaeb;
+  color: #3f4250;
+}
+
+.emotion-14[data-readonly='true'] {
+  cursor: default;
+}
+
+.emotion-14[data-disabled='true'] {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-14[data-period="true"] {
+  color: #727683;
+}
+
+.emotion-14::-moz-selection {
+  background: none;
+}
+
+.emotion-14::selection {
+  background: none;
+}
+
+.emotion-14 {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.875rem;
+  width: 1.5625rem;
+  height: 1.5rem;
+  text-align: center;
+  border-radius: 0.25rem;
+  color: #3f4250;
+}
+
+.emotion-14[data-size='large'] {
+  font-size: 1rem;
+}
+
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  background-color: #e9eaeb;
+  color: #727683;
+}
+
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):active,
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):focus {
+  background-color: #e9eaeb;
+  color: #3f4250;
+}
+
+.emotion-14[data-readonly='true'] {
+  cursor: default;
+}
+
+.emotion-14[data-disabled='true'] {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-14[data-period="true"] {
+  color: #727683;
+}
+
+.emotion-14::-moz-selection {
+  background: none;
+}
+
+.emotion-14::selection {
+  background: none;
+}
+
+.emotion-17 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding-inline: 0.125rem;
+}
+
+.emotion-17 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding-inline: 0.125rem;
+}
+
+.emotion-34 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: 2rem;
+  padding: 0 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  width: 2rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  outline-offset: 2px;
+  white-space: nowrap;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  paragraph-spacing: 0;
+  text-case: none;
+  background: none;
+  border: none;
+  color: #3f4250;
+}
+
+.emotion-34:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-34:active {
+  box-shadow: 0px 0px 0px 3px #151a2d5c;
+}
+
+.emotion-34:hover,
+.emotion-34:active {
+  background: #e9eaeb;
+  color: #222638;
+}
+
+.emotion-34 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: 2rem;
+  padding: 0 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  width: 2rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  outline-offset: 2px;
+  white-space: nowrap;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  paragraph-spacing: 0;
+  text-case: none;
+  background: none;
+  border: none;
+  color: #3f4250;
+}
+
+.emotion-34:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-34:active {
+  box-shadow: 0px 0px 0px 3px #151a2d5c;
+}
+
+.emotion-34:hover,
+.emotion-34:active {
+  background: #e9eaeb;
+  color: #222638;
+}
+
+.emotion-36 {
+  vertical-align: middle;
+  fill: currentColor;
+  height: 16px;
+  width: 16px;
+  min-width: 16px;
+  min-height: 16px;
+}
+
+.emotion-36 .fillStroke {
+  stroke: currentColor;
+  fill: none;
+}
+
+.emotion-36 {
+  vertical-align: middle;
+  fill: currentColor;
+  height: 16px;
+  width: 16px;
+  min-width: 16px;
+  min-height: 16px;
+}
+
+.emotion-36 .fillStroke {
+  stroke: currentColor;
+  fill: none;
+}
+
+.emotion-38 {
+  color: #727683;
+  font-size: 0.75rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-38 {
+  color: #727683;
+  font-size: 0.75rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <div
+        class="emotion-2 emotion-1"
+      >
+        <label
+          class="emotion-4 emotion-5"
+        >
+          label
+        </label>
+        <label
+          class="emotion-6 emotion-5"
+        >
+          labeldescription
+        </label>
+      </div>
+      <div
+        class="emotion-8 emotion-9"
+        data-disabled="false"
+        data-error="false"
+        data-readonly="false"
+        data-size="medium"
+      >
+        <div
+          class="emotion-10 emotion-1"
+        >
+          <div
+            class="emotion-10 emotion-1"
+          >
+            <input
+              aria-label="hours-input"
+              class="emotion-14 emotion-15"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="hours-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+            <span
+              class="emotion-16 emotion-17 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-10 emotion-1"
+          >
+            <input
+              aria-label="minutes-input"
+              class="emotion-14 emotion-15"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="minutes-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+            <span
+              class="emotion-16 emotion-17 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-10 emotion-1"
+          >
+            <input
+              aria-label="seconds-input"
+              class="emotion-14 emotion-15"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="seconds-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+          </div>
+          <input
+            aria-label="am-pm-input"
+            class="emotion-14 emotion-15"
+            data-disabled="false"
+            data-period="true"
+            data-readonly="false"
+            data-size="medium"
+            data-testid="am-pm-input"
+            placeholder="-M"
+            readonly=""
+            value=""
+          />
+        </div>
+        <div
+          class="emotion-2 emotion-1"
+        >
+          <button
+            aria-label="clear value"
+            class="emotion-34 emotion-35"
+            data-testid="clear"
+            type="button"
+          >
+            <svg
+              class="emotion-36 emotion-37"
+              viewBox="0 0 16 16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94z"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+      <p
+        class="emotion-38 emotion-5"
+      >
+        helper
+      </p>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TimeInput > renders correctly controlled - 12-hour format 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-4 {
+  color: #222638;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-4 {
+  color: #222638;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-6 {
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-6 {
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: text;
+  padding: 0.5rem;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  border: 1px solid #d9dadd;
+}
+
+.emotion-8:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-8[data-disabled="false"]:hover,
+.emotion-8 [data-disabled="false"]:focus {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-8[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-8[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-8[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-8[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-8[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-8[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  border-color: #92103f;
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: text;
+  padding: 0.5rem;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  border: 1px solid #d9dadd;
+}
+
+.emotion-8:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-8[data-disabled="false"]:hover,
+.emotion-8 [data-disabled="false"]:focus {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-8[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-8[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-8[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-8[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-8[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-8[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  border-color: #92103f;
+}
+
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-14 {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.875rem;
+  width: 1.5625rem;
+  height: 1.5rem;
+  text-align: center;
+  border-radius: 0.25rem;
+  color: #3f4250;
+}
+
+.emotion-14[data-size='large'] {
+  font-size: 1rem;
+}
+
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  background-color: #e9eaeb;
+  color: #727683;
+}
+
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):active,
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):focus {
+  background-color: #e9eaeb;
+  color: #3f4250;
+}
+
+.emotion-14[data-readonly='true'] {
+  cursor: default;
+}
+
+.emotion-14[data-disabled='true'] {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-14[data-period="true"] {
+  color: #727683;
+}
+
+.emotion-14::-moz-selection {
+  background: none;
+}
+
+.emotion-14::selection {
+  background: none;
+}
+
+.emotion-14 {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.875rem;
+  width: 1.5625rem;
+  height: 1.5rem;
+  text-align: center;
+  border-radius: 0.25rem;
+  color: #3f4250;
+}
+
+.emotion-14[data-size='large'] {
+  font-size: 1rem;
+}
+
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  background-color: #e9eaeb;
+  color: #727683;
+}
+
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):active,
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):focus {
+  background-color: #e9eaeb;
+  color: #3f4250;
+}
+
+.emotion-14[data-readonly='true'] {
+  cursor: default;
+}
+
+.emotion-14[data-disabled='true'] {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-14[data-period="true"] {
+  color: #727683;
+}
+
+.emotion-14::-moz-selection {
+  background: none;
+}
+
+.emotion-14::selection {
+  background: none;
+}
+
+.emotion-17 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding-inline: 0.125rem;
+}
+
+.emotion-17 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding-inline: 0.125rem;
+}
+
+.emotion-34 {
+  color: #727683;
+  font-size: 0.75rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-34 {
+  color: #727683;
+  font-size: 0.75rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <div
+        class="emotion-2 emotion-1"
+      >
+        <label
+          class="emotion-4 emotion-5"
+        >
+          label
+        </label>
+        <label
+          class="emotion-6 emotion-5"
+        >
+          labeldescription
+        </label>
+      </div>
+      <div
+        class="emotion-8 emotion-9"
+        data-disabled="false"
+        data-error="false"
+        data-readonly="false"
+        data-size="medium"
+      >
+        <div
+          class="emotion-10 emotion-1"
+        >
+          <div
+            class="emotion-10 emotion-1"
+          >
+            <input
+              aria-label="hours-input"
+              class="emotion-14 emotion-15"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="hours-input"
+              placeholder="00"
+              readonly=""
+              value="12"
+            />
+            <span
+              class="emotion-16 emotion-17 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-10 emotion-1"
+          >
+            <input
+              aria-label="minutes-input"
+              class="emotion-14 emotion-15"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="minutes-input"
+              placeholder="00"
+              readonly=""
+              value="23"
+            />
+            <span
+              class="emotion-16 emotion-17 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-10 emotion-1"
+          >
+            <input
+              aria-label="seconds-input"
+              class="emotion-14 emotion-15"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="seconds-input"
+              placeholder="00"
+              readonly=""
+              value="07"
+            />
+          </div>
+          <input
+            aria-label="am-pm-input"
+            class="emotion-14 emotion-15"
+            data-disabled="false"
+            data-period="true"
+            data-readonly="false"
+            data-size="medium"
+            data-testid="am-pm-input"
+            placeholder="-M"
+            readonly=""
+            value="AM"
+          />
+        </div>
+        <div
+          class="emotion-2 emotion-1"
+        />
+      </div>
+      <p
+        class="emotion-34 emotion-5"
+      >
+        helper
+      </p>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TimeInput > renders correctly controlled - 24-hours format 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-4 {
+  color: #222638;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-4 {
+  color: #222638;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-6 {
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-6 {
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: text;
+  padding: 0.5rem;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  border: 1px solid #d9dadd;
+}
+
+.emotion-8:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-8[data-disabled="false"]:hover,
+.emotion-8 [data-disabled="false"]:focus {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-8[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-8[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-8[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-8[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-8[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-8[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  border-color: #92103f;
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: text;
+  padding: 0.5rem;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  border: 1px solid #d9dadd;
+}
+
+.emotion-8:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-8[data-disabled="false"]:hover,
+.emotion-8 [data-disabled="false"]:focus {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-8[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-8[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-8[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-8[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-8[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-8[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  border-color: #92103f;
+}
+
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-14 {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.875rem;
+  width: 1.5625rem;
+  height: 1.5rem;
+  text-align: center;
+  border-radius: 0.25rem;
+  color: #3f4250;
+}
+
+.emotion-14[data-size='large'] {
+  font-size: 1rem;
+}
+
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  background-color: #e9eaeb;
+  color: #727683;
+}
+
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):active,
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):focus {
+  background-color: #e9eaeb;
+  color: #3f4250;
+}
+
+.emotion-14[data-readonly='true'] {
+  cursor: default;
+}
+
+.emotion-14[data-disabled='true'] {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-14[data-period="true"] {
+  color: #727683;
+}
+
+.emotion-14::-moz-selection {
+  background: none;
+}
+
+.emotion-14::selection {
+  background: none;
+}
+
+.emotion-14 {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.875rem;
+  width: 1.5625rem;
+  height: 1.5rem;
+  text-align: center;
+  border-radius: 0.25rem;
+  color: #3f4250;
+}
+
+.emotion-14[data-size='large'] {
+  font-size: 1rem;
+}
+
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  background-color: #e9eaeb;
+  color: #727683;
+}
+
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):active,
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):focus {
+  background-color: #e9eaeb;
+  color: #3f4250;
+}
+
+.emotion-14[data-readonly='true'] {
+  cursor: default;
+}
+
+.emotion-14[data-disabled='true'] {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-14[data-period="true"] {
+  color: #727683;
+}
+
+.emotion-14::-moz-selection {
+  background: none;
+}
+
+.emotion-14::selection {
+  background: none;
+}
+
+.emotion-17 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding-inline: 0.125rem;
+}
+
+.emotion-17 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding-inline: 0.125rem;
+}
+
+.emotion-32 {
+  color: #727683;
+  font-size: 0.75rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-32 {
+  color: #727683;
+  font-size: 0.75rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <div
+        class="emotion-2 emotion-1"
+      >
+        <label
+          class="emotion-4 emotion-5"
+        >
+          label
+        </label>
+        <label
+          class="emotion-6 emotion-5"
+        >
+          labeldescription
+        </label>
+      </div>
+      <div
+        class="emotion-8 emotion-9"
+        data-disabled="false"
+        data-error="false"
+        data-readonly="false"
+        data-size="medium"
+      >
+        <div
+          class="emotion-10 emotion-1"
+        >
+          <div
+            class="emotion-10 emotion-1"
+          >
+            <input
+              aria-label="hours-input"
+              class="emotion-14 emotion-15"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="hours-input"
+              placeholder="00"
+              readonly=""
+              value="23"
+            />
+            <span
+              class="emotion-16 emotion-17 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-10 emotion-1"
+          >
+            <input
+              aria-label="minutes-input"
+              class="emotion-14 emotion-15"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="minutes-input"
+              placeholder="00"
+              readonly=""
+              value="32"
+            />
+            <span
+              class="emotion-16 emotion-17 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-10 emotion-1"
+          >
+            <input
+              aria-label="seconds-input"
+              class="emotion-14 emotion-15"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="seconds-input"
+              placeholder="00"
+              readonly=""
+              value="31"
+            />
+          </div>
+        </div>
+        <div
+          class="emotion-2 emotion-1"
+        />
+      </div>
+      <p
+        class="emotion-32 emotion-5"
+      >
+        helper
+      </p>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TimeInput > renders correctly disabled 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-4 {
+  color: #222638;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: text;
+  padding: 0.5rem;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  border: 1px solid #d9dadd;
+}
+
+.emotion-6:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-6[data-disabled="false"]:hover,
+.emotion-6 [data-disabled="false"]:focus {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-6[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-6[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-6[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-6[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-6[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  border-color: #92103f;
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-12 {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.875rem;
+  width: 1.5625rem;
+  height: 1.5rem;
+  text-align: center;
+  border-radius: 0.25rem;
+  color: #3f4250;
+}
+
+.emotion-12[data-size='large'] {
+  font-size: 1rem;
+}
+
+.emotion-12:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  background-color: #e9eaeb;
+  color: #727683;
+}
+
+.emotion-12:not([data-disabled="true"]):not([data-readonly="true"]):active,
+.emotion-12:not([data-disabled="true"]):not([data-readonly="true"]):focus {
+  background-color: #e9eaeb;
+  color: #3f4250;
+}
+
+.emotion-12[data-readonly='true'] {
+  cursor: default;
+}
+
+.emotion-12[data-disabled='true'] {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-12[data-period="true"] {
+  color: #727683;
+}
+
+.emotion-12::-moz-selection {
+  background: none;
+}
+
+.emotion-12::selection {
+  background: none;
+}
+
+.emotion-15 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding-inline: 0.125rem;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <div
+        class="emotion-2 emotion-1"
+      >
+        <label
+          class="emotion-4 emotion-5"
+        >
+          test
+        </label>
+      </div>
+      <div
+        class="emotion-6 emotion-7"
+        data-disabled="true"
+        data-error="false"
+        data-readonly="false"
+        data-size="medium"
+      >
+        <div
+          class="emotion-8 emotion-1"
+        >
+          <div
+            class="emotion-8 emotion-1"
+          >
+            <input
+              aria-label="hours-input"
+              class="emotion-12 emotion-13"
+              data-disabled="true"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="hours-input"
+              disabled=""
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+            <span
+              class="emotion-14 emotion-15 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-8 emotion-1"
+          >
+            <input
+              aria-label="minutes-input"
+              class="emotion-12 emotion-13"
+              data-disabled="true"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="minutes-input"
+              disabled=""
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+            <span
+              class="emotion-14 emotion-15 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-8 emotion-1"
+          >
+            <input
+              aria-label="seconds-input"
+              class="emotion-12 emotion-13"
+              data-disabled="true"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="seconds-input"
+              disabled=""
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+          </div>
+        </div>
+        <div
+          class="emotion-2 emotion-1"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TimeInput > renders correctly large 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-4 {
+  color: #222638;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: text;
+  padding: 0.5rem;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  border: 1px solid #d9dadd;
+}
+
+.emotion-6:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-6[data-disabled="false"]:hover,
+.emotion-6 [data-disabled="false"]:focus {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-6[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-6[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-6[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-6[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-6[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  border-color: #92103f;
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-12 {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.875rem;
+  width: 1.5625rem;
+  height: 1.5rem;
+  text-align: center;
+  border-radius: 0.25rem;
+  color: #3f4250;
+}
+
+.emotion-12[data-size='large'] {
+  font-size: 1rem;
+}
+
+.emotion-12:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  background-color: #e9eaeb;
+  color: #727683;
+}
+
+.emotion-12:not([data-disabled="true"]):not([data-readonly="true"]):active,
+.emotion-12:not([data-disabled="true"]):not([data-readonly="true"]):focus {
+  background-color: #e9eaeb;
+  color: #3f4250;
+}
+
+.emotion-12[data-readonly='true'] {
+  cursor: default;
+}
+
+.emotion-12[data-disabled='true'] {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-12[data-period="true"] {
+  color: #727683;
+}
+
+.emotion-12::-moz-selection {
+  background: none;
+}
+
+.emotion-12::selection {
+  background: none;
+}
+
+.emotion-15 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding-inline: 0.125rem;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <div
+        class="emotion-2 emotion-1"
+      >
+        <label
+          class="emotion-4 emotion-5"
+        >
+          test
+        </label>
+      </div>
+      <div
+        class="emotion-6 emotion-7"
+        data-disabled="false"
+        data-error="false"
+        data-readonly="false"
+        data-size="large"
+      >
+        <div
+          class="emotion-8 emotion-1"
+        >
+          <div
+            class="emotion-8 emotion-1"
+          >
+            <input
+              aria-label="hours-input"
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="large"
+              data-testid="hours-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+            <span
+              class="emotion-14 emotion-15 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-8 emotion-1"
+          >
+            <input
+              aria-label="minutes-input"
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="large"
+              data-testid="minutes-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+            <span
+              class="emotion-14 emotion-15 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-8 emotion-1"
+          >
+            <input
+              aria-label="seconds-input"
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="large"
+              data-testid="seconds-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+          </div>
+        </div>
+        <div
+          class="emotion-2 emotion-1"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TimeInput > renders correctly readOnly 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-4 {
+  color: #222638;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: text;
+  padding: 0.5rem;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  border: 1px solid #d9dadd;
+}
+
+.emotion-6:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-6[data-disabled="false"]:hover,
+.emotion-6 [data-disabled="false"]:focus {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-6[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-6[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-6[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-6[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-6[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  border-color: #92103f;
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-12 {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.875rem;
+  width: 1.5625rem;
+  height: 1.5rem;
+  text-align: center;
+  border-radius: 0.25rem;
+  color: #3f4250;
+}
+
+.emotion-12[data-size='large'] {
+  font-size: 1rem;
+}
+
+.emotion-12:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  background-color: #e9eaeb;
+  color: #727683;
+}
+
+.emotion-12:not([data-disabled="true"]):not([data-readonly="true"]):active,
+.emotion-12:not([data-disabled="true"]):not([data-readonly="true"]):focus {
+  background-color: #e9eaeb;
+  color: #3f4250;
+}
+
+.emotion-12[data-readonly='true'] {
+  cursor: default;
+}
+
+.emotion-12[data-disabled='true'] {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-12[data-period="true"] {
+  color: #727683;
+}
+
+.emotion-12::-moz-selection {
+  background: none;
+}
+
+.emotion-12::selection {
+  background: none;
+}
+
+.emotion-15 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding-inline: 0.125rem;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <div
+        class="emotion-2 emotion-1"
+      >
+        <label
+          class="emotion-4 emotion-5"
+        >
+          test
+        </label>
+      </div>
+      <div
+        class="emotion-6 emotion-7"
+        data-disabled="false"
+        data-error="false"
+        data-readonly="true"
+        data-size="medium"
+      >
+        <div
+          class="emotion-8 emotion-1"
+        >
+          <div
+            class="emotion-8 emotion-1"
+          >
+            <input
+              aria-label="hours-input"
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-readonly="true"
+              data-size="medium"
+              data-testid="hours-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+            <span
+              class="emotion-14 emotion-15 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-8 emotion-1"
+          >
+            <input
+              aria-label="minutes-input"
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-readonly="true"
+              data-size="medium"
+              data-testid="minutes-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+            <span
+              class="emotion-14 emotion-15 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-8 emotion-1"
+          >
+            <input
+              aria-label="seconds-input"
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-readonly="true"
+              data-size="medium"
+              data-testid="seconds-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+          </div>
+        </div>
+        <div
+          class="emotion-2 emotion-1"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TimeInput > renders correctly required 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-4 {
+  color: #222638;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-6 {
+  vertical-align: middle;
+  fill: #b3144d;
+  height: 8px;
+  width: 8px;
+  min-width: 8px;
+  min-height: 8px;
+}
+
+.emotion-6 .fillStroke {
+  stroke: #b3144d;
+  fill: none;
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: text;
+  padding: 0.5rem;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  border: 1px solid #d9dadd;
+}
+
+.emotion-8:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-8[data-disabled="false"]:hover,
+.emotion-8 [data-disabled="false"]:focus {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-8[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-8[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-8[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-8[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-8[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-8[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  border-color: #92103f;
+}
+
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-14 {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.875rem;
+  width: 1.5625rem;
+  height: 1.5rem;
+  text-align: center;
+  border-radius: 0.25rem;
+  color: #3f4250;
+}
+
+.emotion-14[data-size='large'] {
+  font-size: 1rem;
+}
+
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  background-color: #e9eaeb;
+  color: #727683;
+}
+
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):active,
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):focus {
+  background-color: #e9eaeb;
+  color: #3f4250;
+}
+
+.emotion-14[data-readonly='true'] {
+  cursor: default;
+}
+
+.emotion-14[data-disabled='true'] {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-14[data-period="true"] {
+  color: #727683;
+}
+
+.emotion-14::-moz-selection {
+  background: none;
+}
+
+.emotion-14::selection {
+  background: none;
+}
+
+.emotion-17 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding-inline: 0.125rem;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <div
+        class="emotion-2 emotion-1"
+      >
+        <label
+          class="emotion-4 emotion-5"
+        >
+          test
+        </label>
+        <svg
+          class="emotion-6 emotion-7"
+          viewBox="0 0 20 20"
+        >
+          <path
+            d="M10 2h4l-.79 7.91 6.45-4.64 2 3.46L14.42 12l7.24 3.27-2 3.46-6.45-4.64L14 22h-4l.79-7.91-6.45 4.64-2-3.46L9.58 12 2.34 8.73l2-3.46 6.45 4.64z"
+          />
+        </svg>
+      </div>
+      <div
+        aria-required="true"
+        class="emotion-8 emotion-9"
+        data-disabled="false"
+        data-error="false"
+        data-readonly="false"
+        data-size="medium"
+      >
+        <div
+          class="emotion-10 emotion-1"
+        >
+          <div
+            class="emotion-10 emotion-1"
+          >
+            <input
+              aria-label="hours-input"
+              class="emotion-14 emotion-15"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="hours-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+            <span
+              class="emotion-16 emotion-17 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-10 emotion-1"
+          >
+            <input
+              aria-label="minutes-input"
+              class="emotion-14 emotion-15"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="minutes-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+            <span
+              class="emotion-16 emotion-17 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-10 emotion-1"
+          >
+            <input
+              aria-label="seconds-input"
+              class="emotion-14 emotion-15"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="seconds-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+          </div>
+        </div>
+        <div
+          class="emotion-2 emotion-1"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TimeInput > renders correctly small 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-4 {
+  color: #222638;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: text;
+  padding: 0.5rem;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  border: 1px solid #d9dadd;
+}
+
+.emotion-6:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-6[data-disabled="false"]:hover,
+.emotion-6 [data-disabled="false"]:focus {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-6[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-6[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-6[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-6[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-6[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  border-color: #92103f;
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-12 {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.875rem;
+  width: 1.5625rem;
+  height: 1.5rem;
+  text-align: center;
+  border-radius: 0.25rem;
+  color: #3f4250;
+}
+
+.emotion-12[data-size='large'] {
+  font-size: 1rem;
+}
+
+.emotion-12:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  background-color: #e9eaeb;
+  color: #727683;
+}
+
+.emotion-12:not([data-disabled="true"]):not([data-readonly="true"]):active,
+.emotion-12:not([data-disabled="true"]):not([data-readonly="true"]):focus {
+  background-color: #e9eaeb;
+  color: #3f4250;
+}
+
+.emotion-12[data-readonly='true'] {
+  cursor: default;
+}
+
+.emotion-12[data-disabled='true'] {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-12[data-period="true"] {
+  color: #727683;
+}
+
+.emotion-12::-moz-selection {
+  background: none;
+}
+
+.emotion-12::selection {
+  background: none;
+}
+
+.emotion-15 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding-inline: 0.125rem;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <div
+        class="emotion-2 emotion-1"
+      >
+        <label
+          class="emotion-4 emotion-5"
+        >
+          test
+        </label>
+      </div>
+      <div
+        class="emotion-6 emotion-7"
+        data-disabled="false"
+        data-error="false"
+        data-readonly="false"
+        data-size="small"
+      >
+        <div
+          class="emotion-8 emotion-1"
+        >
+          <div
+            class="emotion-8 emotion-1"
+          >
+            <input
+              aria-label="hours-input"
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="small"
+              data-testid="hours-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+            <span
+              class="emotion-14 emotion-15 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-8 emotion-1"
+          >
+            <input
+              aria-label="minutes-input"
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="small"
+              data-testid="minutes-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+            <span
+              class="emotion-14 emotion-15 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-8 emotion-1"
+          >
+            <input
+              aria-label="seconds-input"
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="small"
+              data-testid="seconds-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+          </div>
+        </div>
+        <div
+          class="emotion-2 emotion-1"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TimeInput > renders correctly with 12-hour format 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-4 {
+  color: #222638;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: text;
+  padding: 0.5rem;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  border: 1px solid #d9dadd;
+}
+
+.emotion-6:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-6[data-disabled="false"]:hover,
+.emotion-6 [data-disabled="false"]:focus {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-6[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-6[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-6[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-6[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-6[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  border-color: #92103f;
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-12 {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.875rem;
+  width: 1.5625rem;
+  height: 1.5rem;
+  text-align: center;
+  border-radius: 0.25rem;
+  color: #3f4250;
+}
+
+.emotion-12[data-size='large'] {
+  font-size: 1rem;
+}
+
+.emotion-12:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  background-color: #e9eaeb;
+  color: #727683;
+}
+
+.emotion-12:not([data-disabled="true"]):not([data-readonly="true"]):active,
+.emotion-12:not([data-disabled="true"]):not([data-readonly="true"]):focus {
+  background-color: #e9eaeb;
+  color: #3f4250;
+}
+
+.emotion-12[data-readonly='true'] {
+  cursor: default;
+}
+
+.emotion-12[data-disabled='true'] {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-12[data-period="true"] {
+  color: #727683;
+}
+
+.emotion-12::-moz-selection {
+  background: none;
+}
+
+.emotion-12::selection {
+  background: none;
+}
+
+.emotion-15 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding-inline: 0.125rem;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <div
+        class="emotion-2 emotion-1"
+      >
+        <label
+          class="emotion-4 emotion-5"
+        >
+          test
+        </label>
+      </div>
+      <div
+        class="emotion-6 emotion-7"
+        data-disabled="false"
+        data-error="false"
+        data-readonly="false"
+        data-size="medium"
+      >
+        <div
+          class="emotion-8 emotion-1"
+        >
+          <div
+            class="emotion-8 emotion-1"
+          >
+            <input
+              aria-label="hours-input"
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="hours-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+            <span
+              class="emotion-14 emotion-15 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-8 emotion-1"
+          >
+            <input
+              aria-label="minutes-input"
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="minutes-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+            <span
+              class="emotion-14 emotion-15 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-8 emotion-1"
+          >
+            <input
+              aria-label="seconds-input"
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="seconds-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+          </div>
+          <input
+            aria-label="am-pm-input"
+            class="emotion-12 emotion-13"
+            data-disabled="false"
+            data-period="true"
+            data-readonly="false"
+            data-size="medium"
+            data-testid="am-pm-input"
+            placeholder="-M"
+            readonly=""
+            value=""
+          />
+        </div>
+        <div
+          class="emotion-2 emotion-1"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TimeInput > renders correctly with base props 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-4 {
+  color: #222638;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: text;
+  padding: 0.5rem;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  border: 1px solid #d9dadd;
+}
+
+.emotion-6:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-6[data-disabled="false"]:hover,
+.emotion-6 [data-disabled="false"]:focus {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-6[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-6[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-6[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-6[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-6[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  border-color: #92103f;
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-12 {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.875rem;
+  width: 1.5625rem;
+  height: 1.5rem;
+  text-align: center;
+  border-radius: 0.25rem;
+  color: #3f4250;
+}
+
+.emotion-12[data-size='large'] {
+  font-size: 1rem;
+}
+
+.emotion-12:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  background-color: #e9eaeb;
+  color: #727683;
+}
+
+.emotion-12:not([data-disabled="true"]):not([data-readonly="true"]):active,
+.emotion-12:not([data-disabled="true"]):not([data-readonly="true"]):focus {
+  background-color: #e9eaeb;
+  color: #3f4250;
+}
+
+.emotion-12[data-readonly='true'] {
+  cursor: default;
+}
+
+.emotion-12[data-disabled='true'] {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-12[data-period="true"] {
+  color: #727683;
+}
+
+.emotion-12::-moz-selection {
+  background: none;
+}
+
+.emotion-12::selection {
+  background: none;
+}
+
+.emotion-15 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding-inline: 0.125rem;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <div
+        class="emotion-2 emotion-1"
+      >
+        <label
+          class="emotion-4 emotion-5"
+        />
+      </div>
+      <div
+        class="emotion-6 emotion-7"
+        data-disabled="false"
+        data-error="false"
+        data-readonly="false"
+        data-size="medium"
+      >
+        <div
+          class="emotion-8 emotion-1"
+        >
+          <div
+            class="emotion-8 emotion-1"
+          >
+            <input
+              aria-label="hours-input"
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="hours-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+            <span
+              class="emotion-14 emotion-15 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-8 emotion-1"
+          >
+            <input
+              aria-label="minutes-input"
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="minutes-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+            <span
+              class="emotion-14 emotion-15 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-8 emotion-1"
+          >
+            <input
+              aria-label="seconds-input"
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="seconds-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+          </div>
+        </div>
+        <div
+          class="emotion-2 emotion-1"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TimeInput > renders correctly with error 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-4 {
+  color: #222638;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: text;
+  padding: 0.5rem;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  border: 1px solid #d9dadd;
+}
+
+.emotion-6:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-6[data-disabled="false"]:hover,
+.emotion-6 [data-disabled="false"]:focus {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-6[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-6[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-6[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-6[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-6[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-6[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-6[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-6[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  border-color: #92103f;
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-12 {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.875rem;
+  width: 1.5625rem;
+  height: 1.5rem;
+  text-align: center;
+  border-radius: 0.25rem;
+  color: #3f4250;
+}
+
+.emotion-12[data-size='large'] {
+  font-size: 1rem;
+}
+
+.emotion-12:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  background-color: #e9eaeb;
+  color: #727683;
+}
+
+.emotion-12:not([data-disabled="true"]):not([data-readonly="true"]):active,
+.emotion-12:not([data-disabled="true"]):not([data-readonly="true"]):focus {
+  background-color: #e9eaeb;
+  color: #3f4250;
+}
+
+.emotion-12[data-readonly='true'] {
+  cursor: default;
+}
+
+.emotion-12[data-disabled='true'] {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-12[data-period="true"] {
+  color: #727683;
+}
+
+.emotion-12::-moz-selection {
+  background: none;
+}
+
+.emotion-12::selection {
+  background: none;
+}
+
+.emotion-15 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding-inline: 0.125rem;
+}
+
+.emotion-30 {
+  vertical-align: middle;
+  fill: #b3144d;
+  height: 1em;
+  width: 1em;
+  min-width: 1em;
+  min-height: 1em;
+}
+
+.emotion-30 .fillStroke {
+  stroke: #b3144d;
+  fill: none;
+}
+
+.emotion-32 {
+  color: #b3144d;
+  font-size: 0.75rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <div
+        class="emotion-2 emotion-1"
+      >
+        <label
+          class="emotion-4 emotion-5"
+        >
+          test
+        </label>
+      </div>
+      <div
+        class="emotion-6 emotion-7"
+        data-disabled="false"
+        data-error="true"
+        data-readonly="false"
+        data-size="medium"
+      >
+        <div
+          class="emotion-8 emotion-1"
+        >
+          <div
+            class="emotion-8 emotion-1"
+          >
+            <input
+              aria-label="hours-input"
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="hours-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+            <span
+              class="emotion-14 emotion-15 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-8 emotion-1"
+          >
+            <input
+              aria-label="minutes-input"
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="minutes-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+            <span
+              class="emotion-14 emotion-15 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-8 emotion-1"
+          >
+            <input
+              aria-label="seconds-input"
+              class="emotion-12 emotion-13"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="seconds-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+          </div>
+        </div>
+        <div
+          class="emotion-2 emotion-1"
+        >
+          <svg
+            class="emotion-30 emotion-31"
+            viewBox="0 0 20 20"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0m-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5m0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </div>
+      </div>
+      <p
+        class="emotion-32 emotion-5"
+      >
+        error
+      </p>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TimeInput > renders correctly with helper and error 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-4 {
+  color: #222638;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-6 {
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: text;
+  padding: 0.5rem;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  border: 1px solid #d9dadd;
+}
+
+.emotion-8:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-8[data-disabled="false"]:hover,
+.emotion-8 [data-disabled="false"]:focus {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-8[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-8[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-8[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-8[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-8[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-8[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  border-color: #92103f;
+}
+
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-14 {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.875rem;
+  width: 1.5625rem;
+  height: 1.5rem;
+  text-align: center;
+  border-radius: 0.25rem;
+  color: #3f4250;
+}
+
+.emotion-14[data-size='large'] {
+  font-size: 1rem;
+}
+
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  background-color: #e9eaeb;
+  color: #727683;
+}
+
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):active,
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):focus {
+  background-color: #e9eaeb;
+  color: #3f4250;
+}
+
+.emotion-14[data-readonly='true'] {
+  cursor: default;
+}
+
+.emotion-14[data-disabled='true'] {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-14[data-period="true"] {
+  color: #727683;
+}
+
+.emotion-14::-moz-selection {
+  background: none;
+}
+
+.emotion-14::selection {
+  background: none;
+}
+
+.emotion-17 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding-inline: 0.125rem;
+}
+
+.emotion-32 {
+  vertical-align: middle;
+  fill: #b3144d;
+  height: 1em;
+  width: 1em;
+  min-width: 1em;
+  min-height: 1em;
+}
+
+.emotion-32 .fillStroke {
+  stroke: #b3144d;
+  fill: none;
+}
+
+.emotion-34 {
+  color: #b3144d;
+  font-size: 0.75rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <div
+        class="emotion-2 emotion-1"
+      >
+        <label
+          class="emotion-4 emotion-5"
+        >
+          label
+        </label>
+        <label
+          class="emotion-6 emotion-5"
+        >
+          label description
+        </label>
+      </div>
+      <div
+        class="emotion-8 emotion-9"
+        data-disabled="false"
+        data-error="true"
+        data-readonly="false"
+        data-size="medium"
+      >
+        <div
+          class="emotion-10 emotion-1"
+        >
+          <div
+            class="emotion-10 emotion-1"
+          >
+            <input
+              aria-label="hours-input"
+              class="emotion-14 emotion-15"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="hours-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+            <span
+              class="emotion-16 emotion-17 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-10 emotion-1"
+          >
+            <input
+              aria-label="minutes-input"
+              class="emotion-14 emotion-15"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="minutes-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+            <span
+              class="emotion-16 emotion-17 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-10 emotion-1"
+          >
+            <input
+              aria-label="seconds-input"
+              class="emotion-14 emotion-15"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="seconds-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+          </div>
+        </div>
+        <div
+          class="emotion-2 emotion-1"
+        >
+          <svg
+            class="emotion-32 emotion-33"
+            viewBox="0 0 20 20"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0m-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5m0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </div>
+      </div>
+      <p
+        class="emotion-34 emotion-5"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TimeInput > renders correctly with label description and helper 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-4 {
+  color: #222638;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-6 {
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: text;
+  padding: 0.5rem;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  border: 1px solid #d9dadd;
+}
+
+.emotion-8:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-8[data-disabled="false"]:hover,
+.emotion-8 [data-disabled="false"]:focus {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-8[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-8[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-8[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-8[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-8[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-8[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  border-color: #92103f;
+}
+
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-14 {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.875rem;
+  width: 1.5625rem;
+  height: 1.5rem;
+  text-align: center;
+  border-radius: 0.25rem;
+  color: #3f4250;
+}
+
+.emotion-14[data-size='large'] {
+  font-size: 1rem;
+}
+
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  background-color: #e9eaeb;
+  color: #727683;
+}
+
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):active,
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):focus {
+  background-color: #e9eaeb;
+  color: #3f4250;
+}
+
+.emotion-14[data-readonly='true'] {
+  cursor: default;
+}
+
+.emotion-14[data-disabled='true'] {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-14[data-period="true"] {
+  color: #727683;
+}
+
+.emotion-14::-moz-selection {
+  background: none;
+}
+
+.emotion-14::selection {
+  background: none;
+}
+
+.emotion-17 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding-inline: 0.125rem;
+}
+
+.emotion-32 {
+  color: #727683;
+  font-size: 0.75rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <div
+        class="emotion-2 emotion-1"
+      >
+        <label
+          class="emotion-4 emotion-5"
+        >
+          label
+        </label>
+        <label
+          class="emotion-6 emotion-5"
+        >
+          <h1>
+            label
+          </h1>
+        </label>
+        <h1>
+          label
+        </h1>
+      </div>
+      <div
+        class="emotion-8 emotion-9"
+        data-disabled="false"
+        data-error="false"
+        data-readonly="false"
+        data-size="medium"
+      >
+        <div
+          class="emotion-10 emotion-1"
+        >
+          <div
+            class="emotion-10 emotion-1"
+          >
+            <input
+              aria-label="hours-input"
+              class="emotion-14 emotion-15"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="hours-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+            <span
+              class="emotion-16 emotion-17 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-10 emotion-1"
+          >
+            <input
+              aria-label="minutes-input"
+              class="emotion-14 emotion-15"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="minutes-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+            <span
+              class="emotion-16 emotion-17 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-10 emotion-1"
+          >
+            <input
+              aria-label="seconds-input"
+              class="emotion-14 emotion-15"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="seconds-input"
+              placeholder="00"
+              readonly=""
+              value=""
+            />
+          </div>
+        </div>
+        <div
+          class="emotion-2 emotion-1"
+        />
+      </div>
+      <p
+        class="emotion-32 emotion-5"
+      >
+        helper
+      </p>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/ui/src/components/TimeInputV2/__tests__/helper.test.ts b/packages/ui/src/components/TimeInputV2/__tests__/helper.test.ts
new file mode 100644
index 0000000000..f01e38119a
--- /dev/null
+++ b/packages/ui/src/components/TimeInputV2/__tests__/helper.test.ts
@@ -0,0 +1,74 @@
+import { describe, expect, test } from 'vitest'
+import {
+  canConcat,
+  formatValue,
+  isAOrP,
+  isCompleteHour,
+  isNumber,
+} from '../helpers'
+
+const value1 = {
+  h: '1',
+  m: '23',
+  s: '45',
+  period: 'am',
+} as const
+
+const value2 = {
+  h: '14',
+  m: '23',
+  s: '45',
+} as const
+
+describe('Helper functions dateInput', () => {
+  test('formatValue should work', () => {
+    expect(formatValue(value1, 12)).toStrictEqual({
+      h: '01',
+      m: '23',
+      s: '45',
+      period: 'am',
+    })
+    expect(formatValue(value1, 24)).toStrictEqual({
+      h: '01',
+      m: '23',
+      s: '45',
+      period: 'am',
+    })
+    expect(formatValue(value2, 24)).toStrictEqual({
+      h: '14',
+      m: '23',
+      s: '45',
+      period: 'pm',
+    })
+    expect(formatValue(value2, 12)).toStrictEqual({
+      h: '02',
+      m: '23',
+      s: '45',
+      period: 'pm',
+    })
+  })
+
+  test('isNumber should work', () => {
+    expect(isNumber('2')).toBe(true)
+    expect(isNumber('a')).toBe(false)
+  })
+
+  test('isAOrP should work', () => {
+    expect(isAOrP('a')).toBe(true)
+    expect(isAOrP('p')).toBe(true)
+    expect(isAOrP('d')).toBe(false)
+  })
+
+  test('canConcat should work', () => {
+    expect(canConcat('3', 'h', '3', 12)).toBe(false)
+    expect(canConcat('1', 'm', '2', 24)).toBe(true)
+    expect(canConcat('1', 'm', '2', 12)).toBe(true)
+  })
+
+  test('isCompleteHour should work', () => {
+    expect(isCompleteHour(24, '2')).toBe(false)
+    expect(isCompleteHour(12, '13')).toBe(true)
+    expect(isCompleteHour(24, '4')).toBe(true)
+    expect(isCompleteHour(12, undefined)).toBe(false)
+  })
+})
diff --git a/packages/ui/src/components/TimeInputV2/__tests__/index.test.tsx b/packages/ui/src/components/TimeInputV2/__tests__/index.test.tsx
new file mode 100644
index 0000000000..5abef30fdc
--- /dev/null
+++ b/packages/ui/src/components/TimeInputV2/__tests__/index.test.tsx
@@ -0,0 +1,231 @@
+import { screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
+import { renderWithTheme, shouldMatchEmotionSnapshot } from '@utils/test'
+import { describe, expect, test, vi } from 'vitest'
+import { TimeInputV2 } from '..'
+
+const DEFAULT_VALUE = {
+  h: '11',
+  m: '23',
+  s: '14',
+}
+
+describe('TimeInput', () => {
+  test('renders correctly with base props', () =>
+    shouldMatchEmotionSnapshot(<TimeInputV2 />))
+
+  test('renders correctly disabled', () =>
+    shouldMatchEmotionSnapshot(<TimeInputV2 label="test" disabled />))
+
+  test('renders correctly readOnly', () =>
+    shouldMatchEmotionSnapshot(<TimeInputV2 label="test" readOnly />))
+
+  test('renders correctly with error', () =>
+    shouldMatchEmotionSnapshot(<TimeInputV2 label="test" error="error" />))
+
+  test('renders correctly clearable', () =>
+    shouldMatchEmotionSnapshot(<TimeInputV2 label="test" clearable />))
+
+  test('renders correctly required', () =>
+    shouldMatchEmotionSnapshot(<TimeInputV2 label="test" required />))
+
+  test('renders correctly small', () =>
+    shouldMatchEmotionSnapshot(<TimeInputV2 label="test" size="small" />))
+
+  test('renders correctly large', () =>
+    shouldMatchEmotionSnapshot(<TimeInputV2 label="test" size="large" />))
+
+  test('renders correctly with 12-hour format', () =>
+    shouldMatchEmotionSnapshot(<TimeInputV2 label="test" timeFormat={12} />))
+
+  test('renders correctly with label description and helper', () =>
+    shouldMatchEmotionSnapshot(
+      <TimeInputV2
+        label="label"
+        labelDescription={<h1>label</h1>}
+        helper="helper"
+      />,
+    ))
+
+  test('renders correctly with helper and error', () =>
+    shouldMatchEmotionSnapshot(
+      <TimeInputV2
+        label="label"
+        labelDescription="label description"
+        helper="helper"
+        error
+      />,
+    ))
+
+  test('renders correctly controlled - 12-hour format', async () => {
+    const mockOnChange = vi.fn()
+    const { asFragment } = renderWithTheme(
+      <TimeInputV2
+        label="label"
+        labelDescription="labeldescription"
+        helper="helper"
+        onChange={mockOnChange}
+        value={DEFAULT_VALUE}
+        timeFormat={12}
+      />,
+    )
+    const hours = screen.getByTestId('hours-input')
+    const period = screen.getByTestId('am-pm-input')
+    const seconds = screen.getByTestId('seconds-input')
+
+    await userEvent.type(hours, '12')
+    expect(hours).toHaveValue('12')
+
+    await userEvent.type(seconds, '7')
+    expect(period).toHaveFocus()
+
+    await userEvent.type(period, 'p')
+    expect(period).toHaveValue('PM')
+
+    await userEvent.type(period, 'A')
+    expect(period).toHaveValue('AM')
+
+    await userEvent.type(period, 'P')
+    expect(period).toHaveValue('PM')
+
+    await userEvent.type(period, 'a')
+    expect(period).toHaveValue('AM')
+
+    expect(mockOnChange).toHaveBeenCalled()
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('renders correctly controlled - 24-hours format', async () => {
+    const mockOnChange = vi.fn()
+    const { asFragment } = renderWithTheme(
+      <TimeInputV2
+        label="label"
+        labelDescription="labeldescription"
+        helper="helper"
+        onChange={mockOnChange}
+        value={DEFAULT_VALUE}
+        timeFormat={24}
+      />,
+    )
+    const hours = screen.getByTestId('hours-input')
+    const minutes = screen.getByTestId('minutes-input')
+    const seconds = screen.getByTestId('seconds-input')
+
+    await userEvent.type(minutes, '3')
+    expect(mockOnChange).toHaveBeenCalledOnce()
+    expect(minutes).toHaveValue('03')
+
+    await userEvent.type(minutes, '2')
+    expect(minutes).toHaveValue('32')
+    expect(seconds).toHaveFocus()
+
+    await userEvent.type(seconds, '31')
+    expect(seconds).toHaveValue('31')
+
+    await userEvent.type(hours, '23')
+    expect(hours).toHaveValue('23')
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('renders correctly clearable', async () => {
+    const mockOnChange = vi.fn()
+    const { asFragment } = renderWithTheme(
+      <TimeInputV2
+        label="label"
+        labelDescription="labeldescription"
+        helper="helper"
+        onChange={mockOnChange}
+        value={DEFAULT_VALUE}
+        timeFormat={12}
+        clearable
+      />,
+    )
+    await userEvent.click(screen.getByTestId('clear'))
+    expect(mockOnChange).toHaveBeenCalledOnce()
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('renders can move with arrow keys - 12-hour format', async () => {
+    const mockOnChange = vi.fn()
+    const { asFragment } = renderWithTheme(
+      <TimeInputV2
+        label="label"
+        labelDescription="labeldescription"
+        helper="helper"
+        onChange={mockOnChange}
+        value={DEFAULT_VALUE}
+        timeFormat={12}
+      />,
+    )
+
+    const hours = screen.getByTestId('hours-input')
+    const seconds = screen.getByTestId('seconds-input')
+    const period = screen.getByTestId('am-pm-input')
+
+    await userEvent.click(hours)
+    await userEvent.keyboard('[ArrowUp]')
+    expect(hours).toHaveValue('01')
+    expect(mockOnChange).toHaveBeenCalledOnce()
+    await userEvent.keyboard('[ArrowDown]')
+    expect(hours).toHaveValue('12')
+
+    await userEvent.keyboard('[ArrowDown]')
+    expect(period).toHaveValue('PM')
+
+    await userEvent.keyboard('[ArrowLeft')
+    expect(seconds).toHaveFocus()
+
+    await userEvent.keyboard('[ArrowRight')
+    expect(period).toHaveFocus()
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test('renders can move with arrow keys - 24-hour format', async () => {
+    const mockOnChange = vi.fn()
+    const { asFragment } = renderWithTheme(
+      <TimeInputV2
+        label="label"
+        labelDescription="labeldescription"
+        helper="helper"
+        onChange={mockOnChange}
+        value={DEFAULT_VALUE}
+        timeFormat={12}
+        clearable
+      />,
+    )
+    const hours = screen.getByTestId('hours-input')
+    const minutes = screen.getByTestId('minutes-input')
+    const seconds = screen.getByTestId('seconds-input')
+
+    await userEvent.click(seconds)
+    await userEvent.keyboard('[ArrowUp]')
+    expect(seconds).toHaveValue('15')
+    expect(mockOnChange).toHaveBeenCalledOnce()
+    await userEvent.keyboard('[ArrowDown]')
+    expect(seconds).toHaveValue('14')
+
+    await userEvent.click(minutes)
+    await userEvent.keyboard('[ArrowUp]')
+    expect(minutes).toHaveValue('24')
+    await userEvent.keyboard('[ArrowDown]')
+    expect(minutes).toHaveValue('23')
+
+    await userEvent.type(hours, '23')
+    await userEvent.click(hours)
+    await userEvent.keyboard('[ArrowUp]')
+    expect(hours).toHaveValue('00')
+    await userEvent.keyboard('[ArrowDown]')
+    expect(hours).toHaveValue('23')
+
+    await userEvent.keyboard('[ArrowRight')
+    expect(minutes).toHaveFocus()
+
+    await userEvent.keyboard('[ArrowLeft')
+    expect(hours).toHaveFocus()
+
+    expect(asFragment()).toMatchSnapshot()
+  })
+})
diff --git a/packages/ui/src/components/TimeInputV2/constants.ts b/packages/ui/src/components/TimeInputV2/constants.ts
new file mode 100644
index 0000000000..fe4315da58
--- /dev/null
+++ b/packages/ui/src/components/TimeInputV2/constants.ts
@@ -0,0 +1,12 @@
+export const INPUT_SIZE_HEIGHT = {
+  small: '400',
+  medium: '500',
+  large: '600',
+} as const
+
+export const EMPTY_TIME = {
+  h: '',
+  m: '',
+  s: '',
+  period: '',
+}
diff --git a/packages/ui/src/components/TimeInputV2/helpers.ts b/packages/ui/src/components/TimeInputV2/helpers.ts
new file mode 100644
index 0000000000..e0f5b3463c
--- /dev/null
+++ b/packages/ui/src/components/TimeInputV2/helpers.ts
@@ -0,0 +1,67 @@
+const format = (value: string, timeFormat: 12 | 24, isHour?: boolean) => {
+  if (value === '') return ''
+  if (timeFormat === 12 && isHour) {
+    const formattedValue = Number.parseInt(value, 10) % 12
+    const finalValue = formattedValue === 0 ? 12 : formattedValue
+
+    return finalValue.toString().padStart(2, '0')
+  }
+
+  return value.padStart(2, '0')
+}
+
+const computePeriod = (hours?: string, period?: 'am' | 'pm') => {
+  if (period) return period
+
+  if (hours && Number.parseInt(hours, 10) >= 12) return 'pm'
+
+  return 'am'
+}
+
+export const isNumber = (key: string) => /^\d+$/.test(key)
+export const isAOrP = (key: string) => ['a', 'A', 'p', 'P'].includes(key)
+
+const isValidNewHour = (old: string, key: string, timeFormat: number) => {
+  const newValue = Number.parseInt(old + key, 10)
+
+  return (
+    (timeFormat === 24 && newValue < 24) || (timeFormat === 12 && newValue < 13)
+  )
+}
+
+export const isCompleteHour = (timeFormat: number, value?: string) => {
+  const computedValue = Number.parseInt(value ?? '0', 10)
+
+  if (timeFormat === 12 && computedValue > 1) return true
+  if (timeFormat === 24 && computedValue > 2) return true
+
+  return false
+}
+
+export const canConcat = (
+  oldValue: string | undefined,
+  type: 'h' | 'm' | 's',
+  key: string,
+  timeFormat: 24 | 12,
+) =>
+  oldValue &&
+  ((type === 'h' && oldValue && isValidNewHour(oldValue, key, timeFormat)) ||
+    (type !== 'h' && Number.parseInt(oldValue, 10) < 6))
+
+export const formatValue = (
+  value: {
+    h: string
+    m: string
+    s: string
+    period?: string
+  },
+  timeFormat: 24 | 12,
+) => ({
+  h: format(value.h, timeFormat, true),
+  m: format(value.m, timeFormat),
+  s: format(value.s, timeFormat),
+  period: computePeriod(
+    value.h,
+    value.period === 'am' || value.period === 'pm' ? value.period : undefined,
+  ),
+})
diff --git a/packages/ui/src/components/TimeInputV2/index.tsx b/packages/ui/src/components/TimeInputV2/index.tsx
new file mode 100644
index 0000000000..7a42ba785c
--- /dev/null
+++ b/packages/ui/src/components/TimeInputV2/index.tsx
@@ -0,0 +1,469 @@
+import styled from '@emotion/styled'
+import { AlertCircleIcon, AsteriskIcon } from '@ultraviolet/icons'
+import type { FocusEvent, ReactNode } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import { Button } from '../Button'
+import { Stack } from '../Stack'
+import { Text } from '../Text'
+import { EMPTY_TIME, INPUT_SIZE_HEIGHT } from './constants'
+import {
+  canConcat,
+  formatValue,
+  isAOrP,
+  isCompleteHour,
+  isNumber,
+} from './helpers'
+
+export type Time = {
+  h: string
+  m: string
+  s: string
+  period?: string
+}
+
+const timeKeys: ('h' | 'm' | 's')[] = ['h', 'm', 's']
+
+const TimeInputWrapper = styled(Stack)<{
+  'data-readonly': boolean
+  'data-disabled': boolean
+  'data-size': 'small' | 'medium' | 'large'
+  'data-error': boolean
+}>`
+  display: flex;
+  cursor: text;
+  padding: ${({ theme }) => theme.space[1]};
+  box-shadow: none;
+  background: ${({ theme }) => theme.colors.neutral.background};
+  border-radius: ${({ theme }) => theme.radii.default};
+  border: 1px solid ${({ theme }) => theme.colors.neutral.border};
+
+  &:not([data-disabled="true"]):not([data-readonly="true"]):active {
+    border-color: ${({ theme }) => theme.colors.primary.borderHover};
+    box-shadow: ${({ theme }) => theme.shadows.focusPrimary};
+  }
+  
+  &[data-disabled="false"]:hover,
+  [data-disabled="false"]:focus {
+    border-color: ${({ theme }) => theme.colors.primary.borderHover};
+    outline: none;
+  }
+
+  &[data-size='small'] {
+    height: ${({ theme }) => theme.sizing[INPUT_SIZE_HEIGHT.small]};
+    padding-left: ${({ theme }) => theme.space[1]};
+  }
+
+  &[data-size='medium'] {
+    height: ${({ theme }) => theme.sizing[INPUT_SIZE_HEIGHT.medium]};
+  }
+
+  &[data-size='large'] {
+    height: ${({ theme }) => theme.sizing[INPUT_SIZE_HEIGHT.large]};
+  }
+
+  &[data-readonly='true'] {
+    background: ${({ theme }) => theme.colors.neutral.backgroundWeak};
+    border-color: ${({ theme }) => theme.colors.neutral.border};
+    cursor: default;
+  }
+
+  &[data-disabled='true'] {
+    background: ${({ theme }) => theme.colors.neutral.backgroundDisabled};
+    border-color: ${({ theme }) => theme.colors.neutral.borderDisabled};
+    cursor: not-allowed;
+    user-select: none;
+  }
+
+  &[data-error='true'] {
+    border: 1px solid ${({ theme }) => theme.colors.danger.border};
+
+    &:not([data-disabled="true"]):not([data-readonly="true"]):active {
+      border-color: ${({ theme }) => theme.colors.danger.borderHover};
+      box-shadow: ${({ theme }) => theme.shadows.focusDanger};
+    }
+
+    &:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+      border-color: ${({ theme }) => theme.colors.danger.borderHover};
+    }
+  }
+`
+
+export const Input = styled.input<{
+  'data-size': 'small' | 'medium' | 'large'
+  'data-readonly': boolean
+  'data-disabled': boolean
+  'data-period'?: boolean
+}>`
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: ${({ theme }) => theme.typography.bodySmall.fontSize};
+  width: ${({ theme }) => theme.sizing[312]};
+  height: ${({ theme }) => theme.sizing[300]};
+  text-align: center;
+  border-radius: ${({ theme }) => theme.radii.default};
+  color: ${({ theme }) => theme.colors.neutral.text};
+
+  &[data-size='large'] {
+    font-size: ${({ theme }) => theme.typography.body.fontSize};
+  }
+
+  &:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+    background-color: ${({ theme }) => theme.colors.neutral.backgroundHover};
+    color: ${({ theme }) => theme.colors.neutral.textWeak};
+  }
+
+  &:not([data-disabled="true"]):not([data-readonly="true"]):active, 
+  :not([data-disabled="true"]):not([data-readonly="true"]):focus{
+    background-color: ${({ theme }) => theme.colors.neutral.backgroundStrong};
+    color:  ${({ theme }) => theme.colors.neutral.text};
+  }
+
+  &[data-readonly='true'] {
+    cursor: default;
+  }
+
+  &[data-disabled='true'] {
+    cursor: not-allowed;
+    user-select: none;
+  }
+
+  &[data-period="true"] {
+    color: ${({ theme }) => theme.colors.neutral.textWeak};
+  }
+
+  ::-moz-selection {
+    background: none;
+  }
+
+  ::selection {
+    background: none;
+  }
+`
+
+const CustomText = styled(Text)`
+padding-inline: ${({ theme }) => theme.space['0.25']};
+`
+
+type TimeInputProps = {
+  label?: ReactNode
+  placeholder?: Time
+  value?: Time
+  clearable?: boolean
+  required?: boolean
+  labelDescription?: ReactNode
+  helper?: string
+  disabled?: boolean
+  readOnly?: boolean
+  error?: boolean | string
+  'data-testid'?: string
+  onChange?: (time: Time, timePeriod?: string) => void
+  onBlur?: (event: FocusEvent<HTMLInputElement>) => void
+  onFocus?: (event: FocusEvent<HTMLInputElement>) => void
+  className?: string
+  id?: string
+  size?: 'small' | 'medium' | 'large'
+  timeFormat?: 12 | 24
+}
+
+const DEFAULT_PLACEHOLDER = { h: '00', m: '00', s: '00' } as const
+/**
+ * A time input component that allows users to type a time in a 24 or 12-hour format.
+ * @experimental This component is experimental and may be subject to breaking changes in the future.
+ */
+export const TimeInputV2 = ({
+  label,
+  timeFormat = 24,
+  value,
+  clearable,
+  required,
+  labelDescription,
+  helper,
+  size = 'medium',
+  disabled = false,
+  readOnly = false,
+  error = false,
+  onChange,
+  onBlur,
+  onFocus,
+  className,
+  id,
+  'data-testid': dataTestId,
+  placeholder = DEFAULT_PLACEHOLDER,
+}: TimeInputProps) => {
+  const [time, setTime] = useState<Time>(
+    value ? formatValue(value, timeFormat) : EMPTY_TIME,
+  )
+
+  const refHours = useRef<HTMLInputElement>(null)
+  const refSeconds = useRef<HTMLInputElement>(null)
+  const refMinutes = useRef<HTMLInputElement>(null)
+  const refPeriod = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (value) {
+      setTime(formatValue(value, timeFormat))
+    }
+  }, [timeFormat, value])
+
+  const handleChange = (type: keyof Time, key: string) => {
+    const newValue = { ...time }
+
+    if (type === 'period') {
+      if (key.toLowerCase() === 'a') newValue.period = 'am'
+      else newValue.period = 'pm'
+    } else {
+      // Create new time
+      if (canConcat(time[type], type, key, timeFormat)) {
+        newValue[type] = newValue[type].slice(-1) + key
+      } else newValue[type] = key.padStart(2, '0')
+
+      // Focus to next input if the current input has a valid time
+      if (
+        type === 's' &&
+        newValue.s &&
+        Number.parseInt(newValue.s, 10) >= 7 &&
+        timeFormat === 12
+      ) {
+        refPeriod.current?.focus()
+      } else if (
+        type === 'm' &&
+        newValue.m &&
+        Number.parseInt(newValue.m, 10) >= 10
+      ) {
+        refSeconds.current?.focus()
+      }
+
+      if (type === 'h') {
+        if (isCompleteHour(timeFormat, newValue.h)) {
+          refMinutes.current?.focus()
+        }
+      }
+    }
+
+    setTime(newValue)
+    onChange?.(newValue)
+  }
+
+  // Increase time with arrow up
+  const handleIncrease = (type: 'h' | 'm' | 's') => {
+    const newTime = { ...time }
+    const currentValue = Number.parseInt(
+      time[type] && time[type].length > 0 ? time[type] : '0',
+      10,
+    )
+
+    if (type === 'h' && timeFormat === 24) {
+      newTime[type] = (currentValue === 23 ? 0 : currentValue + 1)
+        .toString()
+        .padStart(2, '0')
+    } else if (type === 'h' && timeFormat === 12) {
+      newTime[type] = (currentValue === 12 ? 1 : currentValue + 1)
+        .toString()
+        .padStart(2, '0')
+    } else {
+      newTime[type] = (currentValue === 59 ? 0 : currentValue + 1)
+        .toString()
+        .padStart(2, '0')
+    }
+    setTime(newTime)
+    onChange?.(newTime)
+  }
+
+  // Decrease time with arrow down
+  const handleDecrease = (type: 'h' | 'm' | 's') => {
+    const newTime = { ...time }
+    const currentValue = Number.parseInt(
+      time[type] && time[type].length > 0 ? time[type] : '0',
+      10,
+    )
+
+    if (type === 'h' && timeFormat === 24) {
+      newTime[type] = (currentValue === 0 ? 23 : currentValue - 1)
+        .toString()
+        .padStart(2, '0')
+    } else if (type === 'h' && timeFormat === 12) {
+      newTime[type] = (currentValue === 1 ? 12 : currentValue - 1)
+        .toString()
+        .padStart(2, '0')
+    } else {
+      newTime[type] = (currentValue === 0 ? 59 : currentValue - 1)
+        .toString()
+        .padStart(2, '0')
+    }
+    setTime(newTime)
+    onChange?.(newTime)
+  }
+
+  // Go to next input
+  const handleNext = (type: 'h' | 'm' | 's') => {
+    if (type === 'h') refMinutes.current?.focus()
+    if (type === 'm') refSeconds.current?.focus()
+    if (type === 's' && timeFormat === 12) refPeriod.current?.focus()
+  }
+
+  // Go to previous input
+  const handlePrevious = (type: 'h' | 'm' | 's') => {
+    if (type === 'm') refHours.current?.focus()
+    if (type === 's') refMinutes.current?.focus()
+  }
+
+  return (
+    <Stack gap={0.5} className={className} id={id} data-testid={dataTestId}>
+      <Stack direction="row" gap={1} alignItems="center">
+        <Text as="label" prominence="strong" sentiment="neutral" variant="body">
+          {label}
+        </Text>
+        {required ? <AsteriskIcon size={8} sentiment="danger" /> : null}
+        {labelDescription ? (
+          <Text as="label" variant="bodySmall">
+            {labelDescription}
+          </Text>
+        ) : null}
+        {labelDescription && typeof labelDescription !== 'string'
+          ? labelDescription
+          : null}
+      </Stack>
+      <TimeInputWrapper
+        data-readonly={readOnly}
+        data-disabled={disabled}
+        data-size={size}
+        data-error={!!error}
+        direction="row"
+        alignItems="center"
+        justifyContent="space-between"
+        onBlur={onBlur}
+        onFocus={onFocus}
+        aria-required={required}
+      >
+        <Stack direction="row">
+          {timeKeys.map(type => {
+            const computedRef = () => {
+              if (type === 'h') return refHours
+              if (type === 'm') return refMinutes
+
+              return refSeconds
+            }
+            const fullName = () => {
+              if (type === 'h') return 'hours'
+              if (type === 'm') return 'minutes'
+
+              return 'seconds'
+            }
+
+            return (
+              <Stack key={type} gap={0} direction="row">
+                <Input
+                  value={time[type]}
+                  placeholder={placeholder[type]}
+                  data-size={size}
+                  data-disabled={disabled}
+                  data-readonly={readOnly}
+                  readOnly
+                  disabled={disabled}
+                  aria-label={`${fullName()}-input`}
+                  data-testid={`${fullName()}-input`}
+                  onKeyDown={event => {
+                    if (!readOnly && !disabled) {
+                      if (isNumber(event.key)) handleChange(type, event.key)
+                      else if (event.key === 'ArrowUp') {
+                        event.preventDefault()
+                        handleIncrease(type)
+                      } else if (event.key === 'ArrowDown') {
+                        event.preventDefault()
+                        handleDecrease(type)
+                      } else if (event.key === 'ArrowLeft') {
+                        event.preventDefault()
+                        handlePrevious(type)
+                      } else if (event.key === 'ArrowRight') {
+                        event.preventDefault()
+                        handleNext(type)
+                      }
+                    }
+                  }}
+                  ref={computedRef()}
+                />
+                {type === 's' ? null : (
+                  <CustomText
+                    as="span"
+                    variant="body"
+                    prominence="default"
+                    sentiment="neutral"
+                  >
+                    :
+                  </CustomText>
+                )}
+              </Stack>
+            )
+          })}
+          {timeFormat === 12 ? (
+            <Input
+              value={time.period?.toUpperCase()}
+              placeholder={placeholder.period ?? '-M'}
+              data-size={size}
+              data-disabled={disabled}
+              data-readonly={readOnly}
+              data-period
+              readOnly
+              disabled={disabled}
+              aria-label="am-pm-input"
+              data-testid="am-pm-input"
+              onKeyDown={event => {
+                if (!readOnly && !disabled) {
+                  if (isAOrP(event.key)) handleChange('period', event.key)
+                  else if (
+                    event.key === 'ArrowUp' ||
+                    event.key === 'ArrowDown'
+                  ) {
+                    event.preventDefault()
+                    const newTime = {
+                      ...time,
+                      period:
+                        time.period === 'am' ? 'pm' : ('am' as 'am' | 'pm'),
+                    }
+                    setTime(newTime)
+                    onChange?.(newTime)
+                  } else if (event.key === 'ArrowLeft') {
+                    event.preventDefault()
+                    refSeconds.current?.focus()
+                  }
+                }
+              }}
+              ref={refPeriod}
+            />
+          ) : null}
+        </Stack>
+        <Stack direction="row" alignItems="center" gap="1">
+          {error ? <AlertCircleIcon sentiment="danger" /> : null}
+          {clearable ? (
+            <Button
+              aria-label="clear value"
+              disabled={disabled || readOnly}
+              variant="ghost"
+              size="small"
+              icon="close"
+              onClick={event => {
+                event.stopPropagation()
+                setTime(EMPTY_TIME)
+                onChange?.(EMPTY_TIME)
+              }}
+              sentiment="neutral"
+              data-testid="clear"
+            />
+          ) : null}
+        </Stack>
+      </TimeInputWrapper>
+      {helper || error ? (
+        <Text
+          as="p"
+          variant="caption"
+          sentiment={error ? 'danger' : 'neutral'}
+          prominence={error ? 'default' : 'weak'}
+          disabled={disabled}
+        >
+          {error || helper}
+        </Text>
+      ) : null}
+    </Stack>
+  )
+}
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 10fd674d0d..50a4e7f593 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -67,6 +67,7 @@ export { TextArea } from './TextArea'
 export { TextInput } from './TextInput'
 export { TextInputV2 } from './TextInputV2'
 export { TimeInput } from './TimeInput'
+export { TimeInputV2, type Time } from './TimeInputV2'
 export { ToastContainer, toast } from './Toaster'
 export { Toggle } from './Toggle'
 export { ToggleGroup } from './ToggleGroup'

From 8d2493cdd6c14f4938738454513746d81102b5db Mon Sep 17 00:00:00 2001
From: lisa <llupi@scaleway.com>
Date: Thu, 2 Jan 2025 17:21:31 +0100
Subject: [PATCH 2/2] fix: tests

---
 .../__snapshots__/index.test.tsx.snap         | 1381 +++++++++++++++++
 .../TimeInputV2/__tests__/index.test.tsx      |   15 +-
 2 files changed, 1389 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/TimeInputV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/TimeInputV2/__tests__/__snapshots__/index.test.tsx.snap
index 273f4b9beb..84bf4c3989 100644
--- a/packages/ui/src/components/TimeInputV2/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/TimeInputV2/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,5 +1,1386 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`TimeInput > renders can move with arrow keys - 12-hour format 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-4 {
+  color: #222638;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-4 {
+  color: #222638;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-6 {
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-6 {
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: text;
+  padding: 0.5rem;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  border: 1px solid #d9dadd;
+}
+
+.emotion-8:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-8[data-disabled="false"]:hover,
+.emotion-8 [data-disabled="false"]:focus {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-8[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-8[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-8[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-8[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-8[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-8[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  border-color: #92103f;
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: text;
+  padding: 0.5rem;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  border: 1px solid #d9dadd;
+}
+
+.emotion-8:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-8[data-disabled="false"]:hover,
+.emotion-8 [data-disabled="false"]:focus {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-8[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-8[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-8[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-8[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-8[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-8[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  border-color: #92103f;
+}
+
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-14 {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.875rem;
+  width: 1.5625rem;
+  height: 1.5rem;
+  text-align: center;
+  border-radius: 0.25rem;
+  color: #3f4250;
+}
+
+.emotion-14[data-size='large'] {
+  font-size: 1rem;
+}
+
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  background-color: #e9eaeb;
+  color: #727683;
+}
+
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):active,
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):focus {
+  background-color: #e9eaeb;
+  color: #3f4250;
+}
+
+.emotion-14[data-readonly='true'] {
+  cursor: default;
+}
+
+.emotion-14[data-disabled='true'] {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-14[data-period="true"] {
+  color: #727683;
+}
+
+.emotion-14::-moz-selection {
+  background: none;
+}
+
+.emotion-14::selection {
+  background: none;
+}
+
+.emotion-14 {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.875rem;
+  width: 1.5625rem;
+  height: 1.5rem;
+  text-align: center;
+  border-radius: 0.25rem;
+  color: #3f4250;
+}
+
+.emotion-14[data-size='large'] {
+  font-size: 1rem;
+}
+
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  background-color: #e9eaeb;
+  color: #727683;
+}
+
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):active,
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):focus {
+  background-color: #e9eaeb;
+  color: #3f4250;
+}
+
+.emotion-14[data-readonly='true'] {
+  cursor: default;
+}
+
+.emotion-14[data-disabled='true'] {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-14[data-period="true"] {
+  color: #727683;
+}
+
+.emotion-14::-moz-selection {
+  background: none;
+}
+
+.emotion-14::selection {
+  background: none;
+}
+
+.emotion-17 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding-inline: 0.125rem;
+}
+
+.emotion-17 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding-inline: 0.125rem;
+}
+
+.emotion-34 {
+  color: #727683;
+  font-size: 0.75rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-34 {
+  color: #727683;
+  font-size: 0.75rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <div
+        class="emotion-2 emotion-1"
+      >
+        <label
+          class="emotion-4 emotion-5"
+        >
+          label
+        </label>
+        <label
+          class="emotion-6 emotion-5"
+        >
+          labeldescription
+        </label>
+      </div>
+      <div
+        class="emotion-8 emotion-9"
+        data-disabled="false"
+        data-error="false"
+        data-readonly="false"
+        data-size="medium"
+      >
+        <div
+          class="emotion-10 emotion-1"
+        >
+          <div
+            class="emotion-10 emotion-1"
+          >
+            <input
+              aria-label="hours-input"
+              class="emotion-14 emotion-15"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="hours-input"
+              placeholder="00"
+              readonly=""
+              value="12"
+            />
+            <span
+              class="emotion-16 emotion-17 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-10 emotion-1"
+          >
+            <input
+              aria-label="minutes-input"
+              class="emotion-14 emotion-15"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="minutes-input"
+              placeholder="00"
+              readonly=""
+              value="23"
+            />
+            <span
+              class="emotion-16 emotion-17 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-10 emotion-1"
+          >
+            <input
+              aria-label="seconds-input"
+              class="emotion-14 emotion-15"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="seconds-input"
+              placeholder="00"
+              readonly=""
+              value="14"
+            />
+          </div>
+          <input
+            aria-label="am-pm-input"
+            class="emotion-14 emotion-15"
+            data-disabled="false"
+            data-period="true"
+            data-readonly="false"
+            data-size="medium"
+            data-testid="am-pm-input"
+            placeholder="-M"
+            readonly=""
+            value="PM"
+          />
+        </div>
+        <div
+          class="emotion-2 emotion-1"
+        />
+      </div>
+      <p
+        class="emotion-34 emotion-5"
+      >
+        helper
+      </p>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`TimeInput > renders can move with arrow keys - 24-hour format 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-4 {
+  color: #222638;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-4 {
+  color: #222638;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-6 {
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-6 {
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: text;
+  padding: 0.5rem;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  border: 1px solid #d9dadd;
+}
+
+.emotion-8:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-8[data-disabled="false"]:hover,
+.emotion-8 [data-disabled="false"]:focus {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-8[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-8[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-8[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-8[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-8[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-8[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  border-color: #92103f;
+}
+
+.emotion-8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: text;
+  padding: 0.5rem;
+  box-shadow: none;
+  background: #ffffff;
+  border-radius: 0.25rem;
+  border: 1px solid #d9dadd;
+}
+
+.emotion-8:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #792dd4;
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+}
+
+.emotion-8[data-disabled="false"]:hover,
+.emotion-8 [data-disabled="false"]:focus {
+  border-color: #792dd4;
+  outline: none;
+}
+
+.emotion-8[data-size='small'] {
+  height: 2rem;
+  padding-left: 0.5rem;
+}
+
+.emotion-8[data-size='medium'] {
+  height: 2.5rem;
+}
+
+.emotion-8[data-size='large'] {
+  height: 3rem;
+}
+
+.emotion-8[data-readonly='true'] {
+  background: #f9f9fa;
+  border-color: #d9dadd;
+  cursor: default;
+}
+
+.emotion-8[data-disabled='true'] {
+  background: #f3f3f4;
+  border-color: #e9eaeb;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-8[data-error='true'] {
+  border: 1px solid #b3144d;
+}
+
+.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):active {
+  border-color: #92103f;
+  box-shadow: 0px 0px 0px 3px #f91b6c40;
+}
+
+.emotion-8[data-error='true']:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  border-color: #92103f;
+}
+
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-10 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-box-pack: normal;
+  -ms-flex-pack: normal;
+  -webkit-justify-content: normal;
+  justify-content: normal;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-14 {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.875rem;
+  width: 1.5625rem;
+  height: 1.5rem;
+  text-align: center;
+  border-radius: 0.25rem;
+  color: #3f4250;
+}
+
+.emotion-14[data-size='large'] {
+  font-size: 1rem;
+}
+
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  background-color: #e9eaeb;
+  color: #727683;
+}
+
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):active,
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):focus {
+  background-color: #e9eaeb;
+  color: #3f4250;
+}
+
+.emotion-14[data-readonly='true'] {
+  cursor: default;
+}
+
+.emotion-14[data-disabled='true'] {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-14[data-period="true"] {
+  color: #727683;
+}
+
+.emotion-14::-moz-selection {
+  background: none;
+}
+
+.emotion-14::selection {
+  background: none;
+}
+
+.emotion-14 {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 0.875rem;
+  width: 1.5625rem;
+  height: 1.5rem;
+  text-align: center;
+  border-radius: 0.25rem;
+  color: #3f4250;
+}
+
+.emotion-14[data-size='large'] {
+  font-size: 1rem;
+}
+
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):hover {
+  background-color: #e9eaeb;
+  color: #727683;
+}
+
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):active,
+.emotion-14:not([data-disabled="true"]):not([data-readonly="true"]):focus {
+  background-color: #e9eaeb;
+  color: #3f4250;
+}
+
+.emotion-14[data-readonly='true'] {
+  cursor: default;
+}
+
+.emotion-14[data-disabled='true'] {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-14[data-period="true"] {
+  color: #727683;
+}
+
+.emotion-14::-moz-selection {
+  background: none;
+}
+
+.emotion-14::selection {
+  background: none;
+}
+
+.emotion-17 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding-inline: 0.125rem;
+}
+
+.emotion-17 {
+  color: #3f4250;
+  font-size: 1rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding-inline: 0.125rem;
+}
+
+.emotion-32 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: 2rem;
+  padding: 0 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  width: 2rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  outline-offset: 2px;
+  white-space: nowrap;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  paragraph-spacing: 0;
+  text-case: none;
+  background: none;
+  border: none;
+  color: #3f4250;
+}
+
+.emotion-32:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-32:active {
+  box-shadow: 0px 0px 0px 3px #151a2d5c;
+}
+
+.emotion-32:hover,
+.emotion-32:active {
+  background: #e9eaeb;
+  color: #222638;
+}
+
+.emotion-32 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  height: 2rem;
+  padding: 0 0.5rem;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  width: 2rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  outline-offset: 2px;
+  white-space: nowrap;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  paragraph-spacing: 0;
+  text-case: none;
+  background: none;
+  border: none;
+  color: #3f4250;
+}
+
+.emotion-32:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-32:active {
+  box-shadow: 0px 0px 0px 3px #151a2d5c;
+}
+
+.emotion-32:hover,
+.emotion-32:active {
+  background: #e9eaeb;
+  color: #222638;
+}
+
+.emotion-34 {
+  vertical-align: middle;
+  fill: currentColor;
+  height: 16px;
+  width: 16px;
+  min-width: 16px;
+  min-height: 16px;
+}
+
+.emotion-34 .fillStroke {
+  stroke: currentColor;
+  fill: none;
+}
+
+.emotion-34 {
+  vertical-align: middle;
+  fill: currentColor;
+  height: 16px;
+  width: 16px;
+  min-width: 16px;
+  min-height: 16px;
+}
+
+.emotion-34 .fillStroke {
+  stroke: currentColor;
+  fill: none;
+}
+
+.emotion-36 {
+  color: #727683;
+  font-size: 0.75rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.emotion-36 {
+  color: #727683;
+  font-size: 0.75rem;
+  font-family: Inter,Asap,sans-serif;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1rem;
+  text-transform: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      class="emotion-0 emotion-1"
+    >
+      <div
+        class="emotion-2 emotion-1"
+      >
+        <label
+          class="emotion-4 emotion-5"
+        >
+          label
+        </label>
+        <label
+          class="emotion-6 emotion-5"
+        >
+          labeldescription
+        </label>
+      </div>
+      <div
+        class="emotion-8 emotion-9"
+        data-disabled="false"
+        data-error="false"
+        data-readonly="false"
+        data-size="medium"
+      >
+        <div
+          class="emotion-10 emotion-1"
+        >
+          <div
+            class="emotion-10 emotion-1"
+          >
+            <input
+              aria-label="hours-input"
+              class="emotion-14 emotion-15"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="hours-input"
+              placeholder="00"
+              readonly=""
+              value="23"
+            />
+            <span
+              class="emotion-16 emotion-17 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-10 emotion-1"
+          >
+            <input
+              aria-label="minutes-input"
+              class="emotion-14 emotion-15"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="minutes-input"
+              placeholder="00"
+              readonly=""
+              value="23"
+            />
+            <span
+              class="emotion-16 emotion-17 emotion-5"
+            >
+              :
+            </span>
+          </div>
+          <div
+            class="emotion-10 emotion-1"
+          >
+            <input
+              aria-label="seconds-input"
+              class="emotion-14 emotion-15"
+              data-disabled="false"
+              data-readonly="false"
+              data-size="medium"
+              data-testid="seconds-input"
+              placeholder="00"
+              readonly=""
+              value="14"
+            />
+          </div>
+        </div>
+        <div
+          class="emotion-2 emotion-1"
+        >
+          <button
+            aria-label="clear value"
+            class="emotion-32 emotion-33"
+            data-testid="clear"
+            type="button"
+          >
+            <svg
+              class="emotion-34 emotion-35"
+              viewBox="0 0 16 16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94z"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+      <p
+        class="emotion-36 emotion-5"
+      >
+        helper
+      </p>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`TimeInput > renders correctly clearable 1`] = `
 <DocumentFragment>
   .emotion-0 {
diff --git a/packages/ui/src/components/TimeInputV2/__tests__/index.test.tsx b/packages/ui/src/components/TimeInputV2/__tests__/index.test.tsx
index 5abef30fdc..894bb7900d 100644
--- a/packages/ui/src/components/TimeInputV2/__tests__/index.test.tsx
+++ b/packages/ui/src/components/TimeInputV2/__tests__/index.test.tsx
@@ -165,19 +165,20 @@ describe('TimeInput', () => {
     const period = screen.getByTestId('am-pm-input')
 
     await userEvent.click(hours)
-    await userEvent.keyboard('[ArrowUp]')
+    await userEvent.keyboard('[ArrowUp][ArrowUp]')
     expect(hours).toHaveValue('01')
-    expect(mockOnChange).toHaveBeenCalledOnce()
+    expect(mockOnChange).toHaveBeenCalledTimes(2)
     await userEvent.keyboard('[ArrowDown]')
     expect(hours).toHaveValue('12')
 
+    await userEvent.click(period)
     await userEvent.keyboard('[ArrowDown]')
     expect(period).toHaveValue('PM')
 
-    await userEvent.keyboard('[ArrowLeft')
+    await userEvent.keyboard('[ArrowLeft]')
     expect(seconds).toHaveFocus()
 
-    await userEvent.keyboard('[ArrowRight')
+    await userEvent.keyboard('[ArrowRight]')
     expect(period).toHaveFocus()
 
     expect(asFragment()).toMatchSnapshot()
@@ -192,7 +193,7 @@ describe('TimeInput', () => {
         helper="helper"
         onChange={mockOnChange}
         value={DEFAULT_VALUE}
-        timeFormat={12}
+        timeFormat={24}
         clearable
       />,
     )
@@ -220,10 +221,10 @@ describe('TimeInput', () => {
     await userEvent.keyboard('[ArrowDown]')
     expect(hours).toHaveValue('23')
 
-    await userEvent.keyboard('[ArrowRight')
+    await userEvent.keyboard('[ArrowRight]')
     expect(minutes).toHaveFocus()
 
-    await userEvent.keyboard('[ArrowLeft')
+    await userEvent.keyboard('[ArrowLeft]')
     expect(hours).toHaveFocus()
 
     expect(asFragment()).toMatchSnapshot()