diff --git a/components/common/time_picker_input/time_picker.stories.tsx b/components/common/time_picker_input/time_picker.stories.tsx
new file mode 100644
index 00000000..1846a7e4
--- /dev/null
+++ b/components/common/time_picker_input/time_picker.stories.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { TimePickerInput } from './time_picker'
+
+export default {
+	title: 'Common/TimePicker Input',
+	component: TimePickerInput,
+} as ComponentMeta<typeof TimePickerInput>
+
+const Template: ComponentStory<typeof TimePickerInput> = (args) => (
+	<TimePickerInput {...args} />
+)
+
+export const Primary = Template.bind({})
+Primary.args = {}
diff --git a/components/common/time_picker_input/time_picker.tsx b/components/common/time_picker_input/time_picker.tsx
new file mode 100644
index 00000000..ae94fea1
--- /dev/null
+++ b/components/common/time_picker_input/time_picker.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react'
+
+export const TimePickerInput: React.FC<
+	TimePickerInputProps
+> = (): React.ReactElement => {
+	const [hours, setHours] = React.useState('')
+	const [minutes, setMinutes] = React.useState('')
+
+	const handleHoursChange = (e) => {
+		setHours(e.target.value)
+	}
+
+	const handleMinutesChange = (e) => {
+		setMinutes(e.target.value)
+	}
+
+	return (
+		<div className="flex items-center">
+			<label htmlFor="hours" className="mr-5">
+				Time Limit
+			</label>
+			<input
+				id="minutes"
+				placeholder="00"
+				type="number"
+				min="0"
+				max="600"
+				className="p-1 border border-gray-300 rounded"
+				value={minutes}
+				onChange={handleMinutesChange}
+			/>
+			<span className="mx-1">minutes</span>
+		</div>
+	)
+}
+
+type TimePickerInputProps = {}
diff --git a/docs/4256.fd37dfb9.iframe.bundle.js b/docs/4256.fd37dfb9.iframe.bundle.js
index 76a8ea3b..4aa753c3 100644
--- a/docs/4256.fd37dfb9.iframe.bundle.js
+++ b/docs/4256.fd37dfb9.iframe.bundle.js
@@ -324,12 +324,10 @@
 											throw new Error(
 												`Failed to load stylesheet: ${href}`
 											)
-										return res
-											.text()
-											.then((text) => ({
-												href,
-												content: text,
-											}))
+										return res.text().then((text) => ({
+											href,
+											content: text,
+										}))
 									})
 									.catch((err) => {
 										throw markAssetError(err)
@@ -3208,33 +3206,31 @@
 						const route =
 							_removeTrailingSlash.removeTrailingSlash(pathname)
 						yield Promise.all([
-							_this.pageLoader
-								._isSsg(route)
-								.then(
-									(isSsg) =>
-										!!isSsg &&
-										fetchNextData({
-											dataHref:
-												(null == data
-													? void 0
-													: data.dataHref) ||
-												_this.pageLoader.getDataHref({
-													href: url,
-													asPath: resolvedAs,
-													locale,
-												}),
-											isServerRender: !1,
-											parseJSON: !0,
-											inflightCache: _this.sdc,
-											persistCache: !_this.isPreview,
-											isPrefetch: !0,
-											unstable_skipClientCache:
-												options.unstable_skipClientCache ||
-												(options.priority &&
-													!!process.env
-														.__NEXT_OPTIMISTIC_CLIENT_CACHE),
-										}).then(() => !1)
-								),
+							_this.pageLoader._isSsg(route).then(
+								(isSsg) =>
+									!!isSsg &&
+									fetchNextData({
+										dataHref:
+											(null == data
+												? void 0
+												: data.dataHref) ||
+											_this.pageLoader.getDataHref({
+												href: url,
+												asPath: resolvedAs,
+												locale,
+											}),
+										isServerRender: !1,
+										parseJSON: !0,
+										inflightCache: _this.sdc,
+										persistCache: !_this.isPreview,
+										isPrefetch: !0,
+										unstable_skipClientCache:
+											options.unstable_skipClientCache ||
+											(options.priority &&
+												!!process.env
+													.__NEXT_OPTIMISTIC_CLIENT_CACHE),
+									}).then(() => !1)
+							),
 							_this.pageLoader[
 								options.priority ? 'loadPage' : 'prefetch'
 							](route),
diff --git a/docs/sb-manager/chunk-Q24ETD7W.mjs b/docs/sb-manager/chunk-Q24ETD7W.mjs
index 95f31c57..1c104824 100644
--- a/docs/sb-manager/chunk-Q24ETD7W.mjs
+++ b/docs/sb-manager/chunk-Q24ETD7W.mjs
@@ -36251,13 +36251,11 @@ var getTools = (getFn) => Object.values(getFn(Addon_TypesEnum.TOOL)),
 		return import_react75.default.createElement(
 			import_react75.default.Fragment,
 			null,
-			list
-				.filter(Boolean)
-				.map(({ render: Render, id, ...t4 }, index3) =>
-					import_react75.default.createElement(Render, {
-						key: id || t4.key || `f-${index3}`,
-					})
-				)
+			list.filter(Boolean).map(({ render: Render, id, ...t4 }, index3) =>
+				import_react75.default.createElement(Render, {
+					key: id || t4.key || `f-${index3}`,
+				})
+			)
 		)
 	})
 function toolbarItemHasBeenExcluded(item, entry) {