From 6c6734b68acc3986b94c7726aef56742f27fd487 Mon Sep 17 00:00:00 2001
From: m-abe-dev <66056064+m-abe-dev@users.noreply.github.com>
Date: Fri, 12 Jul 2024 17:27:27 +0900
Subject: [PATCH] refactor(web): new field components (#1017)

Co-authored-by: mkumbobeaty <charsbeaty@gmail.com>
Co-authored-by: airslice <icesunex@hotmail.com>
---
 .../fields/CameraField/EditPanel/hooks.ts     |   2 +-
 .../components/fields/CameraField/types.ts    |   8 +-
 .../components/DatePicker/index.tsx           |   4 +-
 .../components/ModalPanel/index.tsx           |   1 +
 .../components/NumberInput/index.tsx          |  14 +-
 .../reearth-ui/components/Selector/index.tsx  |  11 +-
 .../components/TextInput/index.stories.tsx    |   2 +-
 .../reearth-ui/components/TextInput/index.tsx |  13 +-
 .../components/TimePicker/index.tsx           |   4 +-
 .../beta/ui/components/EntryItem/index.tsx    |   1 +
 web/src/beta/ui/fields/AssetField.tsx         | 136 ++++++++++++++
 .../ui/fields/CamersField/CapturePanel.tsx    |  74 ++++++++
 .../ui/fields/CamersField/EditorPanel.tsx     | 100 +++++++++++
 web/src/beta/ui/fields/CamersField/hooks.ts   | 105 +++++++++++
 web/src/beta/ui/fields/CamersField/index.tsx  | 168 +++++++++++++++++
 web/src/beta/ui/fields/CodeField.tsx          |  29 +++
 web/src/beta/ui/fields/ColorField.tsx         |   7 +-
 web/src/beta/ui/fields/CommonField.tsx        |  36 ++--
 web/src/beta/ui/fields/InputField.tsx         |   4 +-
 web/src/beta/ui/fields/ListField/ListItem.tsx | 112 ++++++++++++
 .../ui/fields/ListField/index.stories.tsx     | 114 ++++++++++++
 web/src/beta/ui/fields/ListField/index.tsx    | 120 +++++++++++++
 web/src/beta/ui/fields/QuartetInputField.tsx  |  83 +++++++++
 web/src/beta/ui/fields/SelectField.tsx        |  17 ++
 web/src/beta/ui/fields/SpacingField.tsx       |  93 ++++++++++
 web/src/beta/ui/fields/SwitchField.tsx        |   7 +-
 web/src/beta/ui/fields/TextareaField.tsx      |  17 ++
 .../ui/fields/TimePeriodField/EditModal.tsx   | 134 ++++++++++++++
 .../beta/ui/fields/TimePeriodField/hooks.ts   | 106 +++++++++++
 .../beta/ui/fields/TimePeriodField/index.tsx  | 170 ++++++++++++++++++
 .../ui/fields/TimePointField/EditPanel.tsx    | 108 +++++++++++
 .../beta/ui/fields/TimePointField/hooks.ts    |  98 ++++++++++
 .../beta/ui/fields/TimePointField/index.tsx   | 111 ++++++++++++
 web/src/beta/ui/fields/TripletInputField.tsx  |  84 +++++++++
 web/src/beta/ui/fields/TwinInputField.tsx     |  84 +++++++++
 web/src/beta/ui/fields/index.stories.tsx      | 133 ++++++++++++++
 web/src/beta/ui/fields/index.ts               |  20 ++-
 web/src/services/i18n/translations/en.yml     |   6 +-
 web/src/services/i18n/translations/ja.yml     |   3 +
 39 files changed, 2297 insertions(+), 42 deletions(-)
 create mode 100644 web/src/beta/ui/fields/AssetField.tsx
 create mode 100644 web/src/beta/ui/fields/CamersField/CapturePanel.tsx
 create mode 100644 web/src/beta/ui/fields/CamersField/EditorPanel.tsx
 create mode 100644 web/src/beta/ui/fields/CamersField/hooks.ts
 create mode 100644 web/src/beta/ui/fields/CamersField/index.tsx
 create mode 100644 web/src/beta/ui/fields/CodeField.tsx
 create mode 100644 web/src/beta/ui/fields/ListField/ListItem.tsx
 create mode 100644 web/src/beta/ui/fields/ListField/index.stories.tsx
 create mode 100644 web/src/beta/ui/fields/ListField/index.tsx
 create mode 100644 web/src/beta/ui/fields/QuartetInputField.tsx
 create mode 100644 web/src/beta/ui/fields/SelectField.tsx
 create mode 100644 web/src/beta/ui/fields/SpacingField.tsx
 create mode 100644 web/src/beta/ui/fields/TextareaField.tsx
 create mode 100644 web/src/beta/ui/fields/TimePeriodField/EditModal.tsx
 create mode 100644 web/src/beta/ui/fields/TimePeriodField/hooks.ts
 create mode 100644 web/src/beta/ui/fields/TimePeriodField/index.tsx
 create mode 100644 web/src/beta/ui/fields/TimePointField/EditPanel.tsx
 create mode 100644 web/src/beta/ui/fields/TimePointField/hooks.ts
 create mode 100644 web/src/beta/ui/fields/TimePointField/index.tsx
 create mode 100644 web/src/beta/ui/fields/TripletInputField.tsx
 create mode 100644 web/src/beta/ui/fields/TwinInputField.tsx
 create mode 100644 web/src/beta/ui/fields/index.stories.tsx

diff --git a/web/src/beta/components/fields/CameraField/EditPanel/hooks.ts b/web/src/beta/components/fields/CameraField/EditPanel/hooks.ts
index 20409b43b4..b9540d0cf3 100644
--- a/web/src/beta/components/fields/CameraField/EditPanel/hooks.ts
+++ b/web/src/beta/components/fields/CameraField/EditPanel/hooks.ts
@@ -44,7 +44,7 @@ export default ({
         { id: "lat", description: t("Latitude") },
         { id: "lng", description: t("Longitude") },
       ],
-      [t("Height")]: [{ id: "height", suffix: "km" }],
+      [t("Height")]: [{ id: "height", unit: "km", description: t("Height") }],
       [t("Rotation")]: [
         { id: "heading", description: t("Heading") },
         { id: "pitch", description: t("Pitch") },
diff --git a/web/src/beta/components/fields/CameraField/types.ts b/web/src/beta/components/fields/CameraField/types.ts
index de9d38b9f2..25297cb761 100644
--- a/web/src/beta/components/fields/CameraField/types.ts
+++ b/web/src/beta/components/fields/CameraField/types.ts
@@ -2,4 +2,10 @@ import type { Camera } from "@reearth/beta/utils/value";
 
 export type { Camera } from "@reearth/beta/utils/value";
 
-export type RowType = { id: keyof Camera; value?: number; description?: string; suffix?: string }[];
+export type RowType = {
+  id: keyof Camera;
+  value?: number;
+  description?: string;
+  suffix?: string;
+  unit?: string;
+}[];
diff --git a/web/src/beta/lib/reearth-ui/components/DatePicker/index.tsx b/web/src/beta/lib/reearth-ui/components/DatePicker/index.tsx
index c6f99a4a3f..4822fdb2da 100644
--- a/web/src/beta/lib/reearth-ui/components/DatePicker/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/DatePicker/index.tsx
@@ -22,9 +22,9 @@ export const DatePicker: FC<DatePickerProps> = ({ value, disabled, onChange, onB
     (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
       const newValue = e.currentTarget.value;
       setCurrentValue(newValue ?? "");
-      onChange?.(currentValue);
+      onChange?.(newValue);
     },
-    [currentValue, onChange],
+    [onChange],
   );
 
   const handleBlur = useCallback(() => {
diff --git a/web/src/beta/lib/reearth-ui/components/ModalPanel/index.tsx b/web/src/beta/lib/reearth-ui/components/ModalPanel/index.tsx
index 8cf8ab2fcc..b02d0d1eb2 100644
--- a/web/src/beta/lib/reearth-ui/components/ModalPanel/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/ModalPanel/index.tsx
@@ -50,6 +50,7 @@ const Title = styled("div")(() => ({
 
 const Content = styled("div")(() => ({
   alignSelf: "stretch",
+  userSelect: "none",
 }));
 
 const ActionWrapper = styled("div")(({ theme }) => ({
diff --git a/web/src/beta/lib/reearth-ui/components/NumberInput/index.tsx b/web/src/beta/lib/reearth-ui/components/NumberInput/index.tsx
index e1484ca0d8..1e056a2bb8 100644
--- a/web/src/beta/lib/reearth-ui/components/NumberInput/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/NumberInput/index.tsx
@@ -8,6 +8,7 @@ export type NumberInputProps = {
   disabled?: boolean;
   placeholder?: string;
   appearance?: "readonly";
+  extendWidth?: boolean;
   unit?: string;
   min?: number;
   max?: number;
@@ -21,6 +22,7 @@ export const NumberInput: FC<NumberInputProps> = ({
   disabled,
   placeholder,
   appearance,
+  extendWidth,
   unit,
   min,
   max,
@@ -50,9 +52,8 @@ export const NumberInput: FC<NumberInputProps> = ({
             validatedValue = currentValue;
           }
         }
-
         setCurrentValue(validatedValue);
-        onChange?.(parseFloat(validatedValue));
+        onChange?.(currentValue === "" ? undefined : parseFloat(validatedValue));
       }
     },
     [max, min, onChange],
@@ -76,7 +77,7 @@ export const NumberInput: FC<NumberInputProps> = ({
   }, []);
 
   return (
-    <Wrapper size={size} status={isFocused ? "active" : "default"}>
+    <Wrapper size={size} status={isFocused ? "active" : "default"} extendWidth={extendWidth}>
       <StyledInput
         value={currentValue}
         disabled={disabled}
@@ -94,13 +95,15 @@ export const NumberInput: FC<NumberInputProps> = ({
 const Wrapper = styled("div")<{
   size: "normal" | "small";
   status: "default" | "active";
-}>(({ size, theme, status }) => {
+  extendWidth?: boolean;
+}>(({ size, theme, status, extendWidth }) => {
   return {
     border:
       status === "active" ? `1px solid ${theme.select.main}` : `1px solid ${theme.outline.weak}`,
     borderRadius: theme.radius.small,
     background: theme.bg[1],
     display: "flex",
+    flex: 1,
     gap: theme.spacing.smallest,
     alignItems: "center",
     padding:
@@ -108,6 +111,8 @@ const Wrapper = styled("div")<{
         ? `0 ${theme.spacing.smallest}px`
         : `${theme.spacing.smallest}px ${theme.spacing.small}px`,
     boxShadow: theme.shadow.input,
+    width: !extendWidth ? "" : "100%",
+    boxSizing: "border-box",
   };
 });
 
@@ -124,6 +129,7 @@ const StyledInput = styled("input")<{
   fontSize: fonts.sizes.body,
   lineHeight: `${fonts.lineHeights.body}px`,
   textOverflow: "ellipsis",
+  pointerEvents: disabled ? "none" : "inherit",
   overflow: "hidden",
   "::placeholder": {
     color: theme.content.weak,
diff --git a/web/src/beta/lib/reearth-ui/components/Selector/index.tsx b/web/src/beta/lib/reearth-ui/components/Selector/index.tsx
index 59f2d55c0d..146f16429f 100644
--- a/web/src/beta/lib/reearth-ui/components/Selector/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/Selector/index.tsx
@@ -13,6 +13,7 @@ export type SelectorProps = {
   options: { value: string; label?: string }[];
   disabled?: boolean;
   placeholder?: string;
+  maxHeight?: number;
   onChange?: (value: string | string[]) => void;
 };
 
@@ -22,6 +23,7 @@ export const Selector: FC<SelectorProps> = ({
   options,
   placeholder = "Please select",
   disabled,
+  maxHeight,
   onChange,
 }) => {
   const theme = useTheme();
@@ -151,7 +153,7 @@ export const Selector: FC<SelectorProps> = ({
         onOpenChange={setIsOpen}
         disabled={disabled}
         placement="bottom-start">
-        <DropDownWrapper width={selectorWidth}>
+        <DropDownWrapper maxHeight={maxHeight} width={selectorWidth}>
           {optionValues.length === 0 ? (
             <DropDownItem>
               <Typography size="body" color={theme.content.weaker}>
@@ -203,7 +205,7 @@ const SelectInput = styled("div")<{
   }px`,
   cursor: disabled ? "not-allowed" : "pointer",
   minWidth: width ? `${width}px` : "fit-content",
-  minHeight: "32px",
+  height: "32px",
 }));
 
 const SelectedItems = styled("div")(({ theme }) => ({
@@ -225,7 +227,8 @@ const SelectedItem = styled("div")(({ theme }) => ({
 
 const DropDownWrapper = styled("div")<{
   width?: number;
-}>(({ width, theme }) => ({
+  maxHeight?: number;
+}>(({ width, maxHeight, theme }) => ({
   boxSizing: "border-box",
   display: "flex",
   flexDirection: "column",
@@ -236,6 +239,8 @@ const DropDownWrapper = styled("div")<{
   borderRadius: `${theme.radius.small}px`,
   width: width ? `${width}px` : "",
   border: `1px solid ${theme.outline.weaker}`,
+  maxHeight: maxHeight ? `${maxHeight}px` : "",
+  overflowY: maxHeight ? "auto" : "hidden",
 }));
 
 const DropDownItem = styled("div")<{
diff --git a/web/src/beta/lib/reearth-ui/components/TextInput/index.stories.tsx b/web/src/beta/lib/reearth-ui/components/TextInput/index.stories.tsx
index faf7490db8..cd5dedfdf7 100644
--- a/web/src/beta/lib/reearth-ui/components/TextInput/index.stories.tsx
+++ b/web/src/beta/lib/reearth-ui/components/TextInput/index.stories.tsx
@@ -54,7 +54,7 @@ export const UsecaseReadonly: Story = {
   },
 };
 // TODO: use IconButton instead of MockButton
-const MockButton: FC = () => <Icon icon="settings" size={12} />;
+const MockButton: FC = () => <Icon icon="settings" size={12} color="#525252" />;
 
 export const Actions: Story = {
   args: {
diff --git a/web/src/beta/lib/reearth-ui/components/TextInput/index.tsx b/web/src/beta/lib/reearth-ui/components/TextInput/index.tsx
index 1ba7409d9d..72538b2f3b 100644
--- a/web/src/beta/lib/reearth-ui/components/TextInput/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/TextInput/index.tsx
@@ -12,6 +12,7 @@ export type TextInputProps = {
   extendWidth?: boolean;
   autoFocus?: boolean;
   actions?: FC[];
+  leftAction?: FC[];
   onChange?: (text: string) => void;
   onBlur?: (text: string) => void;
 };
@@ -25,6 +26,7 @@ export const TextInput: FC<TextInputProps> = ({
   appearance,
   extendWidth,
   actions,
+  leftAction,
   autoFocus,
   onChange,
   onBlur,
@@ -60,6 +62,13 @@ export const TextInput: FC<TextInputProps> = ({
       appearance={appearance}
       extendWidth={extendWidth}
       status={isFocused || autoFocus ? "active" : "default"}>
+      {leftAction && (
+        <ActionsWrapper>
+          {leftAction.map((Action, i) => (
+            <Action key={i} />
+          ))}
+        </ActionsWrapper>
+      )}
       <StyledInput
         value={currentValue}
         placeholder={placeholder}
@@ -102,6 +111,7 @@ const Wrapper = styled("div")<{
     borderRadius: theme.radius.small,
     background: appearance === "present" ? "" : theme.bg[1],
     display: "flex",
+    flex: 1,
     gap: `${theme.spacing.smallest}px`,
     alignItems: "center",
     padding:
@@ -131,6 +141,7 @@ const StyledInput = styled("input")<{
   lineHeight: `${fonts.lineHeights.body}px`,
   textOverflow: "ellipsis",
   pointerEvents: disabled ? "none" : "inherit",
+  width: "100%",
   overflow: "hidden",
   "::placeholder": {
     color: theme.content.weak,
@@ -142,6 +153,4 @@ const ActionsWrapper = styled("div")(({ theme }) => ({
   alignItems: "center",
   gap: `${theme.spacing.smallest}px`,
   flexShrink: 0,
-  padding: theme.spacing.micro,
-  color: theme.content.weak,
 }));
diff --git a/web/src/beta/lib/reearth-ui/components/TimePicker/index.tsx b/web/src/beta/lib/reearth-ui/components/TimePicker/index.tsx
index 53445a7a42..c08991bf33 100644
--- a/web/src/beta/lib/reearth-ui/components/TimePicker/index.tsx
+++ b/web/src/beta/lib/reearth-ui/components/TimePicker/index.tsx
@@ -22,9 +22,9 @@ export const TimePicker: FC<TimePickerProps> = ({ value, disabled, onChange, onB
     (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
       const newValue = e.currentTarget.value;
       setCurrentValue(newValue ?? "");
-      onChange?.(currentValue);
+      onChange?.(newValue);
     },
-    [currentValue, onChange],
+    [onChange],
   );
 
   const handleBlur = useCallback(() => {
diff --git a/web/src/beta/ui/components/EntryItem/index.tsx b/web/src/beta/ui/components/EntryItem/index.tsx
index 121956edfd..cced78b9be 100644
--- a/web/src/beta/ui/components/EntryItem/index.tsx
+++ b/web/src/beta/ui/components/EntryItem/index.tsx
@@ -101,6 +101,7 @@ const Wrapper = styled("div")<{
   borderRadius: theme.radius.small,
   backgroundColor: "transparent",
   minHeight: 28,
+  width: "100%",
   cursor: "pointer",
   ...(hovered && {
     backgroundColor: theme.bg[1],
diff --git a/web/src/beta/ui/fields/AssetField.tsx b/web/src/beta/ui/fields/AssetField.tsx
new file mode 100644
index 0000000000..e31e18c412
--- /dev/null
+++ b/web/src/beta/ui/fields/AssetField.tsx
@@ -0,0 +1,136 @@
+import { FC, useCallback, useEffect, useState } from "react";
+
+import { FILE_FORMATS, IMAGE_FORMATS } from "@reearth/beta/features/Assets/constants";
+import { AcceptedFileFormat } from "@reearth/beta/features/Assets/types";
+import AssetModal from "@reearth/beta/features/Modals/AssetModal";
+import LayerStyleModal from "@reearth/beta/features/Modals/LayerStyleModal";
+import useFileUploaderHook from "@reearth/beta/hooks/useAssetUploader/hooks";
+import { TextInput, Button } from "@reearth/beta/lib/reearth-ui";
+import { checkIfFileType } from "@reearth/beta/utils/util";
+import { useT } from "@reearth/services/i18n";
+import { useNotification, useWorkspace } from "@reearth/services/state";
+import { styled } from "@reearth/services/theme";
+
+import CommonField, { CommonFieldProps } from "./CommonField";
+
+export type AssetFieldProps = CommonFieldProps & {
+  value?: string;
+  fileType?: "asset" | "URL" | "layerStyle";
+  entityType?: "image" | "file" | "layerStyle";
+  fileFormat?: AcceptedFileFormat;
+  sceneId?: string;
+  placeholder?: string;
+  onChange?: (value: string | undefined, name: string | undefined) => void;
+};
+
+const AssetField: FC<AssetFieldProps> = ({
+  commonTitle,
+  description,
+  value,
+  entityType,
+  fileType,
+  fileFormat,
+  sceneId,
+  placeholder,
+  onChange,
+}) => {
+  const t = useT();
+  const [open, setOpen] = useState(false);
+  const [currentWorkspace] = useWorkspace();
+  const [, setNotification] = useNotification();
+  const [currentValue, setCurrentValue] = useState(value);
+
+  const handleChange = useCallback(
+    (inputValue?: string, name?: string) => {
+      if (!inputValue) {
+        setCurrentValue(inputValue);
+        onChange?.(inputValue, name);
+      } else if (
+        fileType === "asset" &&
+        !(checkIfFileType(inputValue, FILE_FORMATS) || checkIfFileType(inputValue, IMAGE_FORMATS))
+      ) {
+        setNotification({
+          type: "error",
+          text: t("Wrong file format"),
+        });
+        setCurrentValue(undefined);
+      } else {
+        setCurrentValue(inputValue);
+        onChange?.(inputValue, name);
+      }
+    },
+    [fileType, onChange, setNotification, t],
+  );
+
+  const { handleFileUpload } = useFileUploaderHook({
+    workspaceId: currentWorkspace?.id,
+    onAssetSelect: handleChange,
+    assetType: entityType,
+    fileFormat,
+  });
+
+  useEffect(() => {
+    setCurrentValue(value ?? "");
+  }, [value]);
+
+  const handleClick = useCallback(() => setOpen(!open), [open]);
+  const handleModalClose = useCallback(() => setOpen(false), []);
+
+  return (
+    <CommonField commonTitle={commonTitle} description={description}>
+      <AssetWrapper>
+        <TextInput
+          value={currentValue}
+          onChange={handleChange}
+          placeholder={placeholder ?? t("Not set")}
+        />
+        {fileType === "asset" && (
+          <ButtonWrapper>
+            <Button icon={"image"} size="small" title="Choose" onClick={handleClick} extendWidth />
+            <Button
+              icon={"uploadSimple"}
+              size="small"
+              title="Upload"
+              onClick={handleFileUpload}
+              extendWidth
+            />
+          </ButtonWrapper>
+        )}
+      </AssetWrapper>
+      {open && entityType !== "layerStyle" && (
+        <AssetModal
+          open={open}
+          onModalClose={handleModalClose}
+          assetType={entityType}
+          currentWorkspace={currentWorkspace}
+          currentValue={currentValue}
+          fileFormat={fileFormat}
+          onSelect={handleChange}
+        />
+      )}
+      {open && entityType === "layerStyle" && (
+        <LayerStyleModal
+          open={open}
+          sceneId={sceneId}
+          onClose={handleModalClose}
+          onSelect={handleChange}
+        />
+      )}
+    </CommonField>
+  );
+};
+
+export default AssetField;
+
+const AssetWrapper = styled("div")<{}>(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: `${theme.spacing.smallest}px`,
+  width: "100%",
+}));
+
+const ButtonWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "row",
+  gap: `${theme.spacing.smallest}px`,
+}));
diff --git a/web/src/beta/ui/fields/CamersField/CapturePanel.tsx b/web/src/beta/ui/fields/CamersField/CapturePanel.tsx
new file mode 100644
index 0000000000..8cad417058
--- /dev/null
+++ b/web/src/beta/ui/fields/CamersField/CapturePanel.tsx
@@ -0,0 +1,74 @@
+import { FC, useCallback } from "react";
+
+import { Button, PopupPanel } from "@reearth/beta/lib/reearth-ui";
+import { useT } from "@reearth/services/i18n";
+import { styled } from "@reearth/services/theme";
+
+import TripletInputField from "../TripletInputField";
+
+import { radiansToDegrees } from "./hooks";
+
+import { PanelProps } from ".";
+
+const CapturePanel: FC<PanelProps> = ({ camera, onSave, onClose }) => {
+  const t = useT();
+
+  const handleSave = useCallback(() => {
+    onSave?.(camera);
+  }, [camera, onSave]);
+
+  return (
+    <PopupPanel
+      title={t("Position Capture")}
+      onCancel={onClose}
+      actions={
+        <ButtonWrapper>
+          <Button extendWidth size="small" title="Cancel" onClick={onClose} />
+          <Button
+            extendWidth
+            size="small"
+            title="Apply"
+            appearance="primary"
+            onClick={handleSave}
+          />
+        </ButtonWrapper>
+      }>
+      <GroupWrapper>
+        <TripletInputField
+          values={[camera?.lat ?? 0, camera?.lng ?? 0, camera?.height ?? 0]}
+          content={[t("Latitude"), t("Longitude"), t("Height")]}
+          commonTitle={t("Current Position")}
+          appearance="readonly"
+          disabled
+        />
+        <TripletInputField
+          commonTitle={t("Current Rotation")}
+          values={[
+            radiansToDegrees(camera?.heading ?? 0),
+            radiansToDegrees(camera?.pitch ?? 0),
+            radiansToDegrees(camera?.roll ?? 0),
+          ]}
+          appearance="readonly"
+          disabled
+          content={[t("Heading"), t("Pitch"), t("Roll")]}
+        />
+      </GroupWrapper>
+    </PopupPanel>
+  );
+};
+
+const ButtonWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "flex-start",
+  gap: theme.spacing.small,
+}));
+
+const GroupWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  flexDirection: "column",
+  gap: theme.spacing.normal,
+}));
+
+export default CapturePanel;
diff --git a/web/src/beta/ui/fields/CamersField/EditorPanel.tsx b/web/src/beta/ui/fields/CamersField/EditorPanel.tsx
new file mode 100644
index 0000000000..282baabe97
--- /dev/null
+++ b/web/src/beta/ui/fields/CamersField/EditorPanel.tsx
@@ -0,0 +1,100 @@
+import { FC } from "react";
+
+import { Button, NumberInput, PopupPanel, Typography } from "@reearth/beta/lib/reearth-ui";
+import { useT } from "@reearth/services/i18n";
+import { styled } from "@reearth/services/theme";
+
+import TripletInputField from "../TripletInputField";
+import TwinInputField from "../TwinInputField";
+
+import useHooks from "./hooks";
+
+import { PanelProps } from ".";
+
+const EditPanel: FC<PanelProps> = ({ camera, onSave, onFlyTo, onClose }) => {
+  const t = useT();
+
+  const {
+    newCamera,
+    handleTrippleFieldBlur,
+    handleTwinFieldBlur,
+    handleTwinFieldChange,
+    handleTrippleFieldChange,
+    handleFieldBlur,
+    handleFieldChange,
+    handleSave,
+  } = useHooks({
+    camera,
+    onFlyTo,
+    onSave,
+    onClose,
+  });
+
+  return (
+    <PopupPanel
+      title={t("Camera Position Editor")}
+      onCancel={onClose}
+      actions={
+        <ButtonWrapper>
+          <Button extendWidth size="small" title="Cancel" onClick={onClose} />
+          <Button
+            extendWidth
+            size="small"
+            title="Apply"
+            appearance="primary"
+            onClick={handleSave}
+          />
+        </ButtonWrapper>
+      }>
+      <GroupWrapper>
+        <TwinInputField
+          values={[newCamera?.lat ?? 0, newCamera?.lng ?? 0]}
+          content={[t("Latitude"), t("Longitude")]}
+          commonTitle={t("Location")}
+          placeholders={[t("value"), t("value")]}
+          onChange={handleTwinFieldChange}
+          onBlur={handleTwinFieldBlur}
+        />
+        <InputWrapper>
+          <Typography size="body">{t("Height")}</Typography>
+          <NumberInput
+            unit={"km"}
+            value={newCamera?.height ?? 0}
+            onChange={value => handleFieldChange("height", value)}
+            onBlur={value => handleFieldBlur("height", value)}
+          />
+        </InputWrapper>
+        <TripletInputField
+          commonTitle={t("Rotation")}
+          values={[newCamera?.heading ?? 0, newCamera?.pitch ?? 0, newCamera?.roll ?? 0]}
+          content={[t("Heading"), t("Pitch"), t("Roll")]}
+          placeholders={[t("value"), t("value"), t("value")]}
+          onChange={handleTrippleFieldChange}
+          onBlur={handleTrippleFieldBlur}
+        />
+      </GroupWrapper>
+    </PopupPanel>
+  );
+};
+
+const ButtonWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "flex-start",
+  gap: theme.spacing.small,
+}));
+
+const GroupWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  flexDirection: "column",
+  gap: theme.spacing.normal,
+}));
+
+const InputWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing.small,
+}));
+
+export default EditPanel;
diff --git a/web/src/beta/ui/fields/CamersField/hooks.ts b/web/src/beta/ui/fields/CamersField/hooks.ts
new file mode 100644
index 0000000000..e5a8f17332
--- /dev/null
+++ b/web/src/beta/ui/fields/CamersField/hooks.ts
@@ -0,0 +1,105 @@
+import { useCallback, useEffect, useState } from "react";
+
+import { Camera } from "@reearth/beta/utils/value";
+
+export const degreesToRadians = (degrees: number): number => degrees * (Math.PI / 180);
+
+export const radiansToDegrees = (radians: number): number => radians * (180 / Math.PI);
+
+export const handleCameraeRadianToDegree = (camera: Camera) => ({
+  lat: camera.lat,
+  lng: camera.lng,
+  height: camera.height,
+  heading: radiansToDegrees(camera.heading),
+  pitch: radiansToDegrees(camera.pitch),
+  roll: radiansToDegrees(camera.roll),
+  fov: camera?.fov,
+});
+
+export const handleCameraDegreeToRadian = (camera: Camera) => ({
+  lat: camera.lat,
+  lng: camera.lng,
+  height: camera.height,
+  heading: degreesToRadians(camera.heading),
+  pitch: degreesToRadians(camera.pitch),
+  roll: degreesToRadians(camera.roll),
+  fov: camera?.fov,
+});
+
+export default ({
+  camera,
+  onFlyTo,
+  onSave,
+  onClose,
+}: {
+  camera?: Camera;
+  onFlyTo?: (c?: Camera) => void;
+  onSave: (value?: Camera) => void;
+  onClose?: () => void;
+}) => {
+  const [newCamera, setNewCamera] = useState<Camera | undefined>(
+    camera ? handleCameraeRadianToDegree(camera) : undefined,
+  );
+
+  useEffect(() => {
+    if (!newCamera && camera) {
+      setNewCamera(handleCameraeRadianToDegree(camera));
+    }
+  }, [newCamera, camera]);
+
+  const handleFieldBlur = useCallback(
+    (key: keyof Camera, update?: number) => {
+      if (update === undefined || !newCamera) return;
+      const updated: Camera = {
+        ...newCamera,
+        [key]: update,
+      };
+      onFlyTo?.(handleCameraDegreeToRadian(updated));
+    },
+    [newCamera, onFlyTo],
+  );
+
+  const handleFieldChange = useCallback((key: keyof Camera, value?: number) => {
+    setNewCamera(prev => (prev ? { ...prev, [key]: value } : undefined));
+  }, []);
+
+  const handleSave = useCallback(() => {
+    if (!newCamera) return;
+    const data = handleCameraDegreeToRadian(newCamera);
+    onSave?.(data);
+    onClose?.();
+  }, [newCamera, onClose, onSave]);
+
+  const handleTwinFieldChange = (values: [number, number]) => {
+    handleFieldChange("lat", values[0]);
+    handleFieldChange("lng", values[1]);
+  };
+
+  const handleTrippleFieldChange = (values: [number, number, number]) => {
+    handleFieldChange("heading", values[0]);
+    handleFieldChange("pitch", values[1]);
+    handleFieldChange("roll", values[2]);
+  };
+
+  const handleTwinFieldBlur = (values: [number, number]) => {
+    handleFieldBlur("lat", values[0]);
+    handleFieldBlur("lng", values[1]);
+  };
+
+  const handleTrippleFieldBlur = (values: [number, number, number]) => {
+    handleFieldBlur("heading", values[0]);
+    handleFieldBlur("pitch", values[1]);
+    handleFieldBlur("roll", values[2]);
+  };
+
+  return {
+    newCamera,
+    handleTwinFieldBlur,
+    handleTwinFieldChange,
+    handleTrippleFieldChange,
+    handleTrippleFieldBlur,
+    handleFieldChange,
+    handleFieldBlur,
+    handleSave,
+  };
+};
diff --git a/web/src/beta/ui/fields/CamersField/index.tsx b/web/src/beta/ui/fields/CamersField/index.tsx
new file mode 100644
index 0000000000..6e095a4b81
--- /dev/null
+++ b/web/src/beta/ui/fields/CamersField/index.tsx
@@ -0,0 +1,168 @@
+import { useCallback, useState, FC, useEffect } from "react";
+
+import { useCurrentCamera } from "@reearth/beta/features/Editor/atoms";
+import { Button, ButtonProps, Popup, TextInput } from "@reearth/beta/lib/reearth-ui";
+import type { Camera } from "@reearth/beta/utils/value";
+import type { FlyTo } from "@reearth/core";
+import { useT } from "@reearth/services/i18n";
+import { styled, useTheme } from "@reearth/services/theme";
+
+import CommonField, { CommonFieldProps } from "../CommonField";
+
+import CapturePanel from "./CapturePanel";
+import EditPanel from "./EditorPanel";
+
+export type PanelProps = {
+  camera?: Camera;
+  onSave: (value?: Camera) => void;
+  onFlyTo?: (camera?: Camera) => void;
+  onClose: () => void;
+};
+
+export type CameraFieldProps = CommonFieldProps &
+  ButtonProps & {
+    description?: string;
+    value?: Camera;
+    disabled?: boolean;
+    onSave: (value?: Camera) => void;
+    onFlyTo?: FlyTo;
+  };
+
+const CameraField: FC<CameraFieldProps> = ({
+  description,
+  value,
+  disabled,
+  commonTitle,
+  onSave,
+  onFlyTo,
+}) => {
+  const theme = useTheme();
+  const t = useT();
+  const [open, setOpen] = useState<"editor" | "capture" | null>(null);
+  const [currentCamera, setCurrentCamera] = useCurrentCamera();
+
+  const handleClick = useCallback(
+    (panel: "editor" | "capture") => setOpen(current => (current === panel ? null : panel)),
+    [],
+  );
+
+  const handleClose = useCallback(() => setOpen(null), []);
+
+  const handleSave = useCallback(
+    (value?: Camera) => {
+      onSave(value);
+      setOpen(null);
+    },
+    [onSave],
+  );
+
+  const handleFlyto = useCallback(
+    (c?: Partial<Camera>) => {
+      if (!value) return;
+      const dest = c ?? currentCamera;
+      if (dest) {
+        onFlyTo?.(dest);
+      }
+    },
+    [currentCamera, onFlyTo, value],
+  );
+
+  const handleCameraSettingDelete = useCallback(() => {
+    if (!value) return;
+    handleSave();
+  }, [value, handleSave]);
+
+  useEffect(() => {
+    if (!value) return;
+    setCurrentCamera(value);
+  }, [setCurrentCamera, value]);
+
+  const ZoomToPosition: FC = () => (
+    <Button
+      icon="capture"
+      size="small"
+      iconButton
+      appearance="simple"
+      disabled={!value}
+      onClick={() => handleFlyto(value)}
+      iconColor={value ? theme.content.main : theme.content.weak}
+    />
+  );
+
+  const DeleteAction: FC = () => (
+    <Button
+      icon="trash"
+      size="small"
+      iconButton
+      appearance="simple"
+      disabled={!value}
+      onClick={handleCameraSettingDelete}
+      iconColor={value ? theme.content.main : theme.content.weak}
+    />
+  );
+
+  return (
+    <CommonField commonTitle={commonTitle} description={description}>
+      <InputWrapper>
+        <TextInput
+          value={value && t("Position Set")}
+          placeholder={t("Not set")}
+          appearance="readonly"
+          disabled
+          leftAction={value && [ZoomToPosition]}
+          actions={[DeleteAction]}
+        />
+        <Popup
+          trigger={
+            <Button
+              appearance="secondary"
+              title={t("Edit")}
+              icon="pencilSimple"
+              size="small"
+              onClick={() => handleClick("editor")}
+              disabled={disabled}
+            />
+          }
+          open={open === "editor"}
+          offset={4}
+          placement="bottom-start">
+          {open === "editor" && (
+            <EditPanel
+              camera={value}
+              onSave={handleSave}
+              onFlyTo={handleFlyto}
+              onClose={handleClose}
+            />
+          )}
+        </Popup>
+        <Popup
+          trigger={
+            <Button
+              appearance="secondary"
+              title={t("Capture")}
+              icon="camera"
+              size="small"
+              onClick={() => handleClick("capture")}
+              disabled={disabled}
+            />
+          }
+          open={open === "capture"}
+          offset={4}
+          placement="bottom-start">
+          {open === "capture" && (
+            <CapturePanel camera={currentCamera} onSave={handleSave} onClose={handleClose} />
+          )}
+        </Popup>
+      </InputWrapper>
+    </CommonField>
+  );
+};
+
+const InputWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  gap: theme.spacing.small,
+  flexWrap: "wrap",
+  width: "100%",
+}));
+
+export default CameraField;
diff --git a/web/src/beta/ui/fields/CodeField.tsx b/web/src/beta/ui/fields/CodeField.tsx
new file mode 100644
index 0000000000..4c2345dc6a
--- /dev/null
+++ b/web/src/beta/ui/fields/CodeField.tsx
@@ -0,0 +1,29 @@
+import { FC } from "react";
+
+import { CodeInput, CodeInputProps } from "@reearth/beta/lib/reearth-ui";
+import { styled } from "@reearth/services/theme";
+
+import CommonField, { CommonFieldProps } from "./CommonField";
+
+export type CodeFieldProps = CommonFieldProps &
+  CodeInputProps & { height?: number; width?: number };
+
+const CodeField: FC<CodeFieldProps> = ({ commonTitle, description, height, width, ...props }) => {
+  return (
+    <CommonField commonTitle={commonTitle} description={description}>
+      <CodeInputWrapper height={height} width={width}>
+        <CodeInput {...props} />
+      </CodeInputWrapper>
+    </CommonField>
+  );
+};
+
+export default CodeField;
+
+const CodeInputWrapper = styled("div")<{
+  height?: number;
+  width?: number;
+}>(({ height, width }) => ({
+  height: height ? `${height}px` : "auto",
+  width: width ? `${width}px` : "100%",
+}));
diff --git a/web/src/beta/ui/fields/ColorField.tsx b/web/src/beta/ui/fields/ColorField.tsx
index d57cef92ce..1a4f087e7e 100644
--- a/web/src/beta/ui/fields/ColorField.tsx
+++ b/web/src/beta/ui/fields/ColorField.tsx
@@ -4,12 +4,11 @@ import { ColorInput, ColorInputProps } from "@reearth/beta/lib/reearth-ui";
 
 import CommonField, { CommonFieldProps } from "./CommonField";
 
-export type ColorInputFieldProps = CommonFieldProps &
-  Pick<ColorInputProps, "value" | "size" | "onChange" | "alphaDisabled" | "disabled">;
+export type ColorInputFieldProps = CommonFieldProps & ColorInputProps;
 
-const ColorInputField: FC<ColorInputFieldProps> = ({ title, description, ...props }) => {
+const ColorInputField: FC<ColorInputFieldProps> = ({ commonTitle, description, ...props }) => {
   return (
-    <CommonField title={title} description={description}>
+    <CommonField commonTitle={commonTitle} description={description}>
       <ColorInput {...props} />
     </CommonField>
   );
diff --git a/web/src/beta/ui/fields/CommonField.tsx b/web/src/beta/ui/fields/CommonField.tsx
index 18e107fc59..7e38a7eb0f 100644
--- a/web/src/beta/ui/fields/CommonField.tsx
+++ b/web/src/beta/ui/fields/CommonField.tsx
@@ -4,18 +4,18 @@ import { Typography } from "@reearth/beta/lib/reearth-ui";
 import { styled } from "@reearth/services/theme";
 
 export interface CommonFieldProps {
-  title?: string;
+  commonTitle?: string;
   description?: string;
 }
 
 const CommonField: FC<CommonFieldProps & { children?: ReactNode }> = ({
-  title,
+  commonTitle,
   description,
   children,
 }) => {
   return (
     <Wrapper>
-      {title && <Typography size="body">{title}</Typography>}
+      {commonTitle && <Typography size="body">{commonTitle}</Typography>}
       {children}
       {description && <Description size="footnote">{description}</Description>}
     </Wrapper>
@@ -24,12 +24,26 @@ const CommonField: FC<CommonFieldProps & { children?: ReactNode }> = ({
 
 export default CommonField;
 
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${({ theme }) => theme.spacing.small};
-`;
+const Wrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing.small,
+  ["* ::-webkit-scrollbar"]: {
+    width: "8px",
+  },
+  ["* ::-webkit-scrollbar-track"]: {
+    background: theme.relative.darker,
+    borderRadius: "10px",
+  },
+  ["* ::-webkit-scrollbar-thumb"]: {
+    background: theme.relative.light,
+    borderRadius: "4px",
+  },
+  ["* ::-webkit-scrollbar-thumb:hover"]: {
+    background: theme.relative.lighter,
+  },
+}));
 
-const Description = styled(Typography)`
-  color: ${({ theme }) => theme.content.weak};
-`;
+const Description = styled(Typography)(({ theme }) => ({
+  color: theme.content.weak,
+}));
diff --git a/web/src/beta/ui/fields/InputField.tsx b/web/src/beta/ui/fields/InputField.tsx
index 1ac9059c41..ee1c6441d9 100644
--- a/web/src/beta/ui/fields/InputField.tsx
+++ b/web/src/beta/ui/fields/InputField.tsx
@@ -7,9 +7,9 @@ import CommonField, { CommonFieldProps } from "./CommonField";
 export type InputFieldProps = CommonFieldProps &
   Pick<TextInputProps, "value" | "placeholder" | "onChange" | "onBlur" | "disabled">;
 
-const InputField: FC<InputFieldProps> = ({ title, description, ...props }) => {
+const InputField: FC<InputFieldProps> = ({ commonTitle, description, ...props }) => {
   return (
-    <CommonField title={title} description={description}>
+    <CommonField commonTitle={commonTitle} description={description}>
       <TextInput {...props} />
     </CommonField>
   );
diff --git a/web/src/beta/ui/fields/ListField/ListItem.tsx b/web/src/beta/ui/fields/ListField/ListItem.tsx
new file mode 100644
index 0000000000..17edb3d8a3
--- /dev/null
+++ b/web/src/beta/ui/fields/ListField/ListItem.tsx
@@ -0,0 +1,112 @@
+import { FC, useCallback, useMemo, useState } from "react";
+
+import { TextInput } from "@reearth/beta/lib/reearth-ui";
+import { EntryItem } from "@reearth/beta/ui/components";
+import { styled } from "@reearth/services/theme";
+
+import { ListItemProps } from ".";
+
+type ItemProps = {
+  item: ListItemProps;
+  selectedItem?: string;
+  dragHandleClassName?: string;
+  isDragging?: boolean;
+  onItemDelete?: (id: string) => void;
+  onItemSelect?: (id: string) => void;
+  onItemNameUpdate?: (id: string, value: string) => void;
+};
+
+const ListItem: FC<ItemProps> = ({
+  item,
+  dragHandleClassName,
+  isDragging,
+  selectedItem,
+  onItemDelete,
+  onItemSelect,
+  onItemNameUpdate,
+}) => {
+  const [localTitle, setLocalTitle] = useState(item.title);
+  const [itemNameRenameId, setItemNameRenameId] = useState("");
+
+  const handleItemDelete = useCallback(() => {
+    if (!selectedItem) return;
+    onItemDelete?.(selectedItem);
+  }, [selectedItem, onItemDelete]);
+
+  const optionsMenu = useMemo(
+    () => [
+      {
+        id: "rename",
+        title: "Rename",
+        icon: "pencilSimple" as const,
+        onClick: () => setItemNameRenameId(item.id),
+      },
+      {
+        id: "delete",
+        title: "Delete",
+        icon: "trash" as const,
+        onClick: handleItemDelete,
+      },
+    ],
+    [handleItemDelete, item.id],
+  );
+
+  const handleTitleUpdate = useCallback(() => {
+    setItemNameRenameId("");
+    if (!localTitle || localTitle === item.title) return;
+    onItemNameUpdate?.(item.id, localTitle);
+  }, [item.id, item.title, localTitle, onItemNameUpdate]);
+
+  return (
+    <Wrapper>
+      <EntryItemWrapper>
+        <EntryItem
+          title={
+            itemNameRenameId === item.id ? (
+              <TextInput
+                size="small"
+                extendWidth
+                autoFocus
+                value={localTitle}
+                onChange={setLocalTitle}
+                onBlur={handleTitleUpdate}
+              />
+            ) : (
+              <TitleWrapper onDoubleClick={() => setItemNameRenameId(item.id)}>
+                {item.title}
+              </TitleWrapper>
+            )
+          }
+          dragHandleClassName={dragHandleClassName}
+          disableHover={isDragging}
+          optionsMenu={optionsMenu}
+          highlighted={selectedItem == item.id}
+          optionsMenuWidth={100}
+          onClick={() => onItemSelect?.(item?.id)}
+        />
+      </EntryItemWrapper>
+    </Wrapper>
+  );
+};
+
+export default ListItem;
+
+const Wrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing.micro,
+}));
+
+const EntryItemWrapper = styled("div")(() => ({
+  flex: 1,
+}));
+
+const TitleWrapper = styled("div")(({ theme }) => ({
+  padding: `0 ${theme.spacing.smallest + 1}px`,
+  color: theme.content.main,
+  fontSize: theme.fonts.sizes.body,
+  fontWeight: theme.fonts.weight.regular,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+}));
diff --git a/web/src/beta/ui/fields/ListField/index.stories.tsx b/web/src/beta/ui/fields/ListField/index.stories.tsx
new file mode 100644
index 0000000000..75e5f6acf8
--- /dev/null
+++ b/web/src/beta/ui/fields/ListField/index.stories.tsx
@@ -0,0 +1,114 @@
+import { useArgs } from "@storybook/preview-api";
+import { Meta, StoryObj } from "@storybook/react";
+import { useCallback } from "react";
+
+import ListField, { ListFieldProps } from ".";
+
+const meta: Meta<typeof ListField> = {
+  component: ListField,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ListField>;
+
+export const Default: Story = (args: ListFieldProps) => {
+  const [_, updateArgs] = useArgs();
+
+  const handleAdd = useCallback(() => {
+    const randomId = (Math.random() + 1).toString(30).substring(9);
+    updateArgs({
+      items: [
+        ...args.items,
+        {
+          id: randomId,
+          title: `Item ${randomId}`,
+        },
+      ],
+    });
+  }, [updateArgs, args.items]);
+
+  const handleDelete = useCallback(
+    (key: string) => {
+      updateArgs({ items: args.items.filter(({ id }) => id != key) });
+    },
+    [updateArgs, args.items],
+  );
+
+  const handleSelect = useCallback((id: string) => updateArgs({ selected: id }), [updateArgs]);
+
+  const handleItemMove = useCallback(
+    (id: string, targetIndex: number) => {
+      const currentIndex = args.items.findIndex(item => item.id === id);
+      if (currentIndex === -1 || currentIndex === targetIndex) return;
+
+      const updatedItems = [...args.items];
+      const [movedItem] = updatedItems.splice(currentIndex, 1);
+      updatedItems.splice(targetIndex, 0, movedItem);
+
+      updateArgs({ items: updatedItems });
+    },
+    [updateArgs, args.items],
+  );
+  const handleItemNameUpdate = useCallback(
+    (id: string, newTitle: string) => {
+      const updatedItems = args.items.map(item =>
+        item.id === id ? { ...item, title: newTitle } : item,
+      );
+      updateArgs({ items: updatedItems });
+    },
+    [updateArgs, args.items],
+  );
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "10px",
+        width: "500px",
+        margin: "0 auto",
+      }}>
+      <ListField
+        {...args}
+        atLeastOneItem={true}
+        onItemAdd={handleAdd}
+        onItemDelete={handleDelete}
+        onItemSelect={handleSelect}
+        onItemMove={handleItemMove}
+        onItemNameUpdate={handleItemNameUpdate}
+      />
+    </div>
+  );
+};
+
+Default.args = {
+  commonTitle: "List Field",
+  description: "List field Sample description",
+  items: [
+    {
+      id: "1",
+      title: "Item 1",
+    },
+    {
+      id: "2",
+      title: "Item 2",
+    },
+    {
+      id: "3",
+      title: "Item 3",
+    },
+    {
+      id: "4",
+      title: "Item 4",
+    },
+    {
+      id: "5",
+      title: "Item 5",
+    },
+    {
+      id: "6",
+      title: "Item 6",
+    },
+  ],
+};
diff --git a/web/src/beta/ui/fields/ListField/index.tsx b/web/src/beta/ui/fields/ListField/index.tsx
new file mode 100644
index 0000000000..22450dd794
--- /dev/null
+++ b/web/src/beta/ui/fields/ListField/index.tsx
@@ -0,0 +1,120 @@
+import { FC, useCallback, useEffect, useMemo, useState } from "react";
+
+import { Button, DragAndDropList } from "@reearth/beta/lib/reearth-ui";
+import { styled } from "@reearth/services/theme";
+
+import CommonField, { CommonFieldProps } from "../CommonField";
+
+import ListItem from "./ListItem";
+
+const LIST_FIELD_DRAG_HANDLE_CLASS_NAME = "reearth-visualizer-editor-list-field-drag-handle";
+
+export type ListItemProps = {
+  id: string;
+  title: string;
+};
+
+export type ListFieldProps = CommonFieldProps & {
+  items: ListItemProps[];
+  selected?: string;
+  atLeastOneItem?: boolean;
+  onItemAdd?: () => void;
+  onItemSelect?: (id: string) => void;
+  onItemDelete?: (id: string) => void;
+  onItemMove?: (id: string, targetIndex: number) => void;
+  onItemNameUpdate?: (id: string, value: string) => void;
+};
+
+const ListField: FC<ListFieldProps> = ({
+  commonTitle,
+  description,
+  items,
+  selected,
+  atLeastOneItem,
+  onItemAdd,
+  onItemSelect,
+  onItemDelete,
+  onItemMove,
+  onItemNameUpdate,
+}) => {
+  useEffect(() => {
+    if (!atLeastOneItem) return;
+    const updateSelected = !selected || !items.find(({ id }) => id === selected);
+    if (updateSelected) {
+      onItemSelect?.(items[0]?.id);
+    }
+  }, [selected, items, atLeastOneItem, onItemSelect]);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const DraggableListItems = useMemo(
+    () =>
+      items.map(item => ({
+        id: item.id,
+        content: (
+          <ListItem
+            item={item}
+            dragHandleClassName={LIST_FIELD_DRAG_HANDLE_CLASS_NAME}
+            isDragging={isDragging}
+            selectedItem={selected}
+            onItemDelete={onItemDelete}
+            onItemSelect={onItemSelect}
+            onItemNameUpdate={onItemNameUpdate}
+          />
+        ),
+      })),
+    [items, isDragging, selected, onItemDelete, onItemSelect, onItemNameUpdate],
+  );
+
+  const handleMoveStart = useCallback(() => {
+    setIsDragging(true);
+  }, []);
+
+  const handleMoveEnd = useCallback(
+    (itemId?: string, newIndex?: number) => {
+      if (itemId !== undefined && newIndex !== undefined) {
+        onItemMove?.(itemId, newIndex);
+      }
+      setIsDragging(false);
+    },
+    [onItemMove],
+  );
+
+  return (
+    <CommonField commonTitle={commonTitle} description={description}>
+      <FieldContainer>
+        <Button
+          onClick={onItemAdd}
+          icon="plus"
+          appearance="secondary"
+          title="New Item"
+          size="small"
+          extendWidth
+        />
+        <FieldWrapper>
+          <DragAndDropList
+            items={DraggableListItems}
+            handleClassName={LIST_FIELD_DRAG_HANDLE_CLASS_NAME}
+            onMoveStart={handleMoveStart}
+            onMoveEnd={handleMoveEnd}
+          />
+        </FieldWrapper>
+      </FieldContainer>
+    </CommonField>
+  );
+};
+
+const FieldContainer = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing.smallest,
+}));
+
+const FieldWrapper = styled("div")(({ theme }) => ({
+  maxHeight: "136px",
+  borderRadius: theme.radius.small,
+  padding: theme.spacing.smallest,
+  border: `1px solid ${theme.outline.weak}`,
+  overflow: "auto",
+}));
+
+export default ListField;
diff --git a/web/src/beta/ui/fields/QuartetInputField.tsx b/web/src/beta/ui/fields/QuartetInputField.tsx
new file mode 100644
index 0000000000..1dbded2434
--- /dev/null
+++ b/web/src/beta/ui/fields/QuartetInputField.tsx
@@ -0,0 +1,83 @@
+import { FC, useCallback, useEffect, useState } from "react";
+
+import { NumberInput, NumberInputProps, Typography } from "@reearth/beta/lib/reearth-ui";
+import { styled, useTheme } from "@reearth/services/theme";
+
+import CommonField, { CommonFieldProps } from "./CommonField";
+
+type commonTurple = [number, number, number, number];
+export type TripletInputFieldProps = CommonFieldProps &
+  Omit<NumberInputProps, "onBlur" | "onChange" | "placeholder" | "value"> & {
+    values: commonTurple;
+    placeholders?: [string, string, string, string];
+    content?: [string, string, string, string];
+    onChange?: (values: commonTurple) => void;
+    onBlur?: (values: commonTurple) => void;
+  };
+
+const TripletInputField: FC<TripletInputFieldProps> = ({
+  commonTitle,
+  description,
+  values,
+  placeholders,
+  content,
+  onChange,
+  onBlur,
+  ...props
+}) => {
+  const [inputValues, setInputValues] = useState<commonTurple>(values);
+
+  const theme = useTheme();
+  const handleChange = useCallback(() => {
+    const newValues = [...inputValues] as commonTurple;
+    setInputValues(newValues);
+    onChange?.(newValues);
+  }, [inputValues, onChange]);
+
+  const handleBlur = useCallback(() => {
+    onBlur?.(inputValues);
+  }, [inputValues, onBlur]);
+
+  useEffect(() => {
+    setInputValues(values);
+  }, [values]);
+
+  return (
+    <CommonField commonTitle={commonTitle} description={description}>
+      <Wrapper>
+        {inputValues.map((value, index) => (
+          <InputWrapper key={index}>
+            <NumberInput
+              value={value}
+              placeholder={placeholders?.[index]}
+              onChange={handleChange}
+              onBlur={handleBlur}
+              extendWidth
+              {...props}
+            />
+            <Typography size="body" color={theme.content.weak}>
+              {content?.[index]}
+            </Typography>
+          </InputWrapper>
+        ))}
+      </Wrapper>
+    </CommonField>
+  );
+};
+
+export default TripletInputField;
+
+const Wrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  gap: `${theme.spacing.smallest}px`,
+  alignItems: "flex-start",
+  width: "100%",
+}));
+
+const InputWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: theme.spacing.smallest,
+  width: "100%",
+}));
diff --git a/web/src/beta/ui/fields/SelectField.tsx b/web/src/beta/ui/fields/SelectField.tsx
new file mode 100644
index 0000000000..187e5421aa
--- /dev/null
+++ b/web/src/beta/ui/fields/SelectField.tsx
@@ -0,0 +1,17 @@
+import { FC } from "react";
+
+import { Selector, SelectorProps } from "@reearth/beta/lib/reearth-ui";
+
+import CommonField, { CommonFieldProps } from "./CommonField";
+
+export type SelectorFieldProps = CommonFieldProps & SelectorProps;
+
+const SelectorField: FC<SelectorFieldProps> = ({ commonTitle, description, ...props }) => {
+  return (
+    <CommonField commonTitle={commonTitle} description={description}>
+      <Selector {...props} />
+    </CommonField>
+  );
+};
+
+export default SelectorField;
diff --git a/web/src/beta/ui/fields/SpacingField.tsx b/web/src/beta/ui/fields/SpacingField.tsx
new file mode 100644
index 0000000000..ac60360482
--- /dev/null
+++ b/web/src/beta/ui/fields/SpacingField.tsx
@@ -0,0 +1,93 @@
+import { FC, useCallback, useMemo, useState } from "react";
+
+import { NumberInput, NumberInputProps } from "@reearth/beta/lib/reearth-ui";
+import { styled } from "@reearth/services/theme";
+
+import CommonField, { CommonFieldProps } from "./CommonField";
+
+export type SpacingValues = {
+  top: number;
+  left: number;
+  right: number;
+  bottom: number;
+};
+
+export type SpacingFieldProps = CommonFieldProps &
+  Pick<NumberInputProps, "max" | "min" | "disabled"> & {
+    value?: SpacingValues;
+    onChange?: (values: SpacingValues) => void;
+    onBlur?: (values: SpacingValues) => void;
+  };
+
+const spacingPosition = ["top", "left", "right", "bottom"];
+
+const SpacingField: FC<SpacingFieldProps> = ({
+  commonTitle,
+  description,
+  value,
+  onChange,
+  onBlur,
+  ...props
+}) => {
+  const [spacingValues, setSpacingValues] = useState<SpacingValues>(
+    value || { top: 0, left: 0, right: 0, bottom: 0 },
+  );
+
+  const processedSpacingValues = useMemo(
+    () => spacingPosition.map(position => spacingValues[position as keyof SpacingValues]),
+    [spacingValues],
+  );
+
+  const handleChange = (position: keyof SpacingValues, newValue?: number) => {
+    const updatedValues = { ...spacingValues, [position]: newValue };
+    setSpacingValues(updatedValues);
+    onChange?.(updatedValues);
+  };
+
+  const handleBlur = useCallback(() => {
+    onBlur?.(spacingValues);
+  }, [onBlur, spacingValues]);
+
+  const renderInputs = () => {
+    return spacingPosition.map((position, index) => (
+      <CenteredInput key={index} position={position}>
+        <NumberInput
+          value={processedSpacingValues[index]}
+          onChange={value => handleChange(position as keyof SpacingValues, value)}
+          onBlur={handleBlur}
+          unit="px"
+          {...props}
+        />
+      </CenteredInput>
+    ));
+  };
+
+  return (
+    <CommonField commonTitle={commonTitle} description={description}>
+      <InputWrapper>{renderInputs()}</InputWrapper>
+    </CommonField>
+  );
+};
+
+export default SpacingField;
+
+const InputWrapper = styled("div")(({ theme }) => ({
+  display: "grid",
+  gridTemplateAreas: `
+    ". top ."
+    "left . right"
+    ". bottom ."
+  `,
+  gap: `${theme.spacing.smallest}px`,
+  height: "97px",
+  width: "100%",
+  position: "relative",
+  border: `1px dashed ${theme.outline.weak}`,
+}));
+
+const CenteredInput = styled("div")<{ position: string }>(({ position }) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  gridArea: position,
+}));
diff --git a/web/src/beta/ui/fields/SwitchField.tsx b/web/src/beta/ui/fields/SwitchField.tsx
index 7b350e710c..12beb50a49 100644
--- a/web/src/beta/ui/fields/SwitchField.tsx
+++ b/web/src/beta/ui/fields/SwitchField.tsx
@@ -4,12 +4,11 @@ import { Switcher, SwitcherProps } from "@reearth/beta/lib/reearth-ui";
 
 import CommonField, { CommonFieldProps } from "./CommonField";
 
-export type SwitchFieldProps = CommonFieldProps &
-  Pick<SwitcherProps, "value" | "onChange" | "disabled">;
+export type SwitchFieldProps = CommonFieldProps & SwitcherProps;
 
-const SwitchField: FC<SwitchFieldProps> = ({ title, description, ...props }) => {
+const SwitchField: FC<SwitchFieldProps> = ({ commonTitle, description, ...props }) => {
   return (
-    <CommonField title={title} description={description}>
+    <CommonField commonTitle={commonTitle} description={description}>
       <Switcher {...props} />
     </CommonField>
   );
diff --git a/web/src/beta/ui/fields/TextareaField.tsx b/web/src/beta/ui/fields/TextareaField.tsx
new file mode 100644
index 0000000000..f76d63d74b
--- /dev/null
+++ b/web/src/beta/ui/fields/TextareaField.tsx
@@ -0,0 +1,17 @@
+import { FC } from "react";
+
+import { TextArea, TextAreaProps } from "@reearth/beta/lib/reearth-ui";
+
+import CommonField, { CommonFieldProps } from "./CommonField";
+
+export type TextAreaFieldProps = CommonFieldProps & TextAreaProps;
+
+const TextAreaField: FC<TextAreaFieldProps> = ({ commonTitle, description, ...props }) => {
+  return (
+    <CommonField commonTitle={commonTitle} description={description}>
+      <TextArea {...props} />
+    </CommonField>
+  );
+};
+
+export default TextAreaField;
diff --git a/web/src/beta/ui/fields/TimePeriodField/EditModal.tsx b/web/src/beta/ui/fields/TimePeriodField/EditModal.tsx
new file mode 100644
index 0000000000..dc0fdc60d5
--- /dev/null
+++ b/web/src/beta/ui/fields/TimePeriodField/EditModal.tsx
@@ -0,0 +1,134 @@
+import { FC, useMemo } from "react";
+
+import { getTimeZone } from "@reearth/beta/features/Visualizer/Crust/StoryPanel/utils";
+import { Button, Icon, Modal, ModalPanel } from "@reearth/beta/lib/reearth-ui";
+import { useT } from "@reearth/services/i18n";
+import { styled } from "@reearth/services/theme";
+
+import TimePointField from "../TimePointField";
+
+import useHooks from "./hooks";
+
+import { TimePeriodFieldProp } from ".";
+
+type EditPanelProps = {
+  visible: boolean;
+  timePeriodValues?: TimePeriodFieldProp;
+  onClose?: () => void;
+  onChange?: (value?: TimePeriodFieldProp) => void;
+  setTimePeriodValues?: (value?: TimePeriodFieldProp) => void;
+};
+
+const EditModal: FC<EditPanelProps> = ({
+  visible,
+  timePeriodValues,
+  setTimePeriodValues,
+  onClose,
+  onChange,
+}) => {
+  const t = useT();
+  const {
+    isDisabled,
+    warning,
+    disabledFields,
+    setDisabledFields,
+    handleChange,
+    handleSubmit,
+    handleTimePointPopup,
+  } = useHooks({
+    timePeriodValues,
+    onChange,
+    onClose,
+    setTimePeriodValues,
+  });
+
+  const timezoneMatches = useMemo(() => {
+    if (!timePeriodValues) return false;
+
+    const startTimezone = getTimeZone(timePeriodValues?.startTime);
+    const currentTimezone = getTimeZone(timePeriodValues?.currentTime);
+    const endTimezone = getTimeZone(timePeriodValues?.endTime);
+
+    const checkTimezones = startTimezone === currentTimezone && currentTimezone === endTimezone;
+    return checkTimezones;
+  }, [timePeriodValues]);
+
+  return (
+    <Modal visible={visible} size="small">
+      <ModalPanel
+        title={t("Time Period Settings")}
+        onCancel={onClose}
+        actions={
+          <>
+            <Button onClick={onClose} size="normal" title="Cancel" />
+            <Button
+              size="normal"
+              title="Apply"
+              appearance="primary"
+              disabled={!isDisabled || warning || !timezoneMatches}
+              onClick={handleSubmit}
+            />
+          </>
+        }>
+        <FieldsWrapper>
+          <TimePointField
+            commonTitle={t("* Start Time")}
+            description={t("Start time for the timeline")}
+            onChange={newValue => handleChange(newValue || "", "startTime")}
+            value={timePeriodValues?.startTime}
+            fieldName={"startTime"}
+            disabledField={disabledFields.includes("startTime")}
+            setDisabledFields={setDisabledFields}
+            onTimePointPopupOpen={handleTimePointPopup}
+          />
+          <TimePointField
+            commonTitle={t("* Current Time")}
+            description={t("Current time should be between start and end time")}
+            onChange={newValue => handleChange(newValue || "", "currentTime")}
+            value={timePeriodValues?.currentTime}
+            disabledField={disabledFields.includes("currentTime")}
+            fieldName={"currentTime"}
+            setDisabledFields={setDisabledFields}
+            onTimePointPopupOpen={handleTimePointPopup}
+          />
+          <TimePointField
+            commonTitle={t("* End Time")}
+            onChange={newValue => handleChange(newValue || "", "endTime")}
+            description={t("End time for the timeline")}
+            value={timePeriodValues?.endTime}
+            fieldName={"endTime"}
+            disabledField={disabledFields.includes("endTime")}
+            setDisabledFields={setDisabledFields}
+            onTimePointPopupOpen={handleTimePointPopup}
+          />
+          {warning && (
+            <Warning>
+              <Icon icon="warning" size="large" />
+              {t("Please make sure the Current time must between the Start time and End Time.")}
+            </Warning>
+          )}
+        </FieldsWrapper>
+      </ModalPanel>
+    </Modal>
+  );
+};
+
+const FieldsWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  gap: theme.spacing.largest,
+  padding: theme.spacing.super,
+  flexDirection: "column",
+  background: theme.bg[0],
+}));
+
+const Warning = styled("div")(({ theme }) => ({
+  display: "flex",
+  gap: theme.spacing.small,
+  paddingTop: theme.spacing.small,
+  color: theme.dangerous.main,
+  alignItems: "center",
+  fontSize: theme.fonts.sizes.body,
+  fontWeight: theme.fonts.weight.regular,
+}));
+
+export default EditModal;
diff --git a/web/src/beta/ui/fields/TimePeriodField/hooks.ts b/web/src/beta/ui/fields/TimePeriodField/hooks.ts
new file mode 100644
index 0000000000..cd2b9d8765
--- /dev/null
+++ b/web/src/beta/ui/fields/TimePeriodField/hooks.ts
@@ -0,0 +1,106 @@
+import { useCallback, useMemo, useState } from "react";
+
+import { TimePeriodFieldProp } from ".";
+
+type Props = {
+  timePeriodValues?: TimePeriodFieldProp;
+  onChange?: (value?: TimePeriodFieldProp) => void;
+  onClose?: () => void;
+  setTimePeriodValues?: (value?: TimePeriodFieldProp) => void;
+};
+
+export default ({ timePeriodValues, onChange, onClose, setTimePeriodValues }: Props) => {
+  const [warning, setWarning] = useState(false);
+
+  const handleChange = useCallback(
+    (newValue: string, fieldId: string) => {
+      const updatedData: TimePeriodFieldProp = {
+        ...timePeriodValues,
+        currentTime: timePeriodValues?.currentTime || "",
+        startTime: timePeriodValues?.startTime || "",
+        endTime: timePeriodValues?.endTime || "",
+      };
+
+      switch (fieldId) {
+        case "startTime":
+          updatedData.startTime = newValue || "";
+          break;
+        case "currentTime":
+          updatedData.currentTime = newValue;
+          if (
+            updatedData.startTime &&
+            new Date(updatedData.currentTime.substring(0, 19)) <
+              new Date(updatedData.startTime.substring(0, 19))
+          ) {
+            setWarning(true);
+          } else {
+            setWarning(false);
+          }
+          break;
+        case "endTime":
+          updatedData.endTime = newValue;
+          if (
+            updatedData.endTime &&
+            new Date(updatedData.currentTime.substring(0, 19)) >
+              new Date(updatedData?.endTime?.substring(0, 19))
+          ) {
+            setWarning(true);
+          } else {
+            setWarning(false);
+          }
+          break;
+        default:
+          break;
+      }
+      setTimePeriodValues?.(updatedData);
+    },
+    [timePeriodValues, setTimePeriodValues],
+  );
+
+  const [disabledFields, setDisabledFields] = useState<string[]>([]);
+
+  const handleTimePointPopup = useCallback((fieldId?: string) => {
+    switch (fieldId) {
+      case "startTime":
+        setDisabledFields(["endTime", "currentTime"]);
+        break;
+      case "endTime":
+        setDisabledFields(["startTime", "currentTime"]);
+        break;
+      case "currentTime":
+        setDisabledFields(["startTime", "endTime"]);
+        break;
+      default:
+        setDisabledFields([]);
+        break;
+    }
+  }, []);
+
+  const handleSubmit = useCallback(() => {
+    if (
+      timePeriodValues?.currentTime !== "" &&
+      timePeriodValues?.startTime !== "" &&
+      timePeriodValues?.endTime !== ""
+    ) {
+      onChange?.(timePeriodValues);
+      onClose?.();
+    }
+  }, [timePeriodValues, onChange, onClose]);
+
+  const isDisabled = useMemo(() => {
+    if (timePeriodValues) {
+      return Object.values(timePeriodValues).every(value => value !== "");
+    }
+    return false;
+  }, [timePeriodValues]);
+
+  return {
+    warning,
+    isDisabled,
+    disabledFields,
+    setDisabledFields,
+    handleChange,
+    handleTimePointPopup,
+    handleSubmit,
+  };
+};
diff --git a/web/src/beta/ui/fields/TimePeriodField/index.tsx b/web/src/beta/ui/fields/TimePeriodField/index.tsx
new file mode 100644
index 0000000000..e90216934e
--- /dev/null
+++ b/web/src/beta/ui/fields/TimePeriodField/index.tsx
@@ -0,0 +1,170 @@
+import { FC, useCallback, useEffect, useMemo, useState } from "react";
+
+import { Button, Typography } from "@reearth/beta/lib/reearth-ui";
+import { useT } from "@reearth/services/i18n";
+import { styled, useTheme } from "@reearth/services/theme";
+
+import CommonField, { CommonFieldProps } from "../CommonField";
+
+import EditModal from "./EditModal";
+
+export type TimePeriodFieldProp = {
+  currentTime: string;
+  startTime: string;
+  endTime: string;
+};
+
+export type TimePeriodFieldProps = CommonFieldProps & {
+  value?: TimePeriodFieldProp;
+  onChange?: (value?: TimePeriodFieldProp) => void;
+};
+
+const TimePeriodField: FC<TimePeriodFieldProps> = ({
+  commonTitle,
+  description,
+  value,
+  onChange,
+}) => {
+  const [openEditModal, setOpenEditModal] = useState(false);
+  const [timePeriodValues, setTimePeriodValues] = useState(value);
+
+  const t = useT();
+  const theme = useTheme();
+  const handleEditorModalClose = useCallback(() => setOpenEditModal(false), []);
+
+  const handleEditorModalOpen = useCallback(() => setOpenEditModal(true), []);
+
+  const handleTimePeriodSettingDelete = useCallback(() => {
+    if (!value) return;
+    setTimePeriodValues(undefined);
+    onChange?.();
+  }, [value, onChange]);
+
+  useEffect(() => {
+    setTimePeriodValues(value);
+  }, [value]);
+
+  const checkAllFieldsSet = useMemo(
+    () => timePeriodValues?.startTime && timePeriodValues?.currentTime && timePeriodValues?.endTime,
+    [timePeriodValues?.currentTime, timePeriodValues?.endTime, timePeriodValues?.startTime],
+  );
+
+  return (
+    <CommonField commonTitle={commonTitle} description={description}>
+      <Wrapper>
+        <TimePeriodWrapper>
+          <ProgressSteps>
+            <Circle filled />
+            <Circle />
+            <Circle filled />
+          </ProgressSteps>
+          <NoteIcon>
+            {!checkAllFieldsSet ? (
+              <Typography size="body" color={theme.content.weak}>
+                {t("Not set")}
+              </Typography>
+            ) : (
+              <>
+                <Typography size="body">
+                  {timePeriodValues?.startTime && timePeriodValues?.startTime}
+                </Typography>
+                <Typography size="body">
+                  {timePeriodValues?.currentTime && timePeriodValues?.currentTime}
+                </Typography>
+                <Typography size="body">
+                  {timePeriodValues?.endTime && timePeriodValues?.endTime}
+                </Typography>
+              </>
+            )}
+          </NoteIcon>
+          <Button
+            iconButton
+            icon="trash"
+            onClick={handleTimePeriodSettingDelete}
+            disabled={!timePeriodValues}
+            appearance="simple"
+          />
+        </TimePeriodWrapper>
+        <ButtonWrapper>
+          <Button
+            appearance="secondary"
+            title={t("set")}
+            icon="clock"
+            size="small"
+            onClick={handleEditorModalOpen}
+          />
+        </ButtonWrapper>
+      </Wrapper>
+      {openEditModal && (
+        <EditModal
+          timePeriodValues={timePeriodValues}
+          onChange={onChange}
+          onClose={handleEditorModalClose}
+          visible={openEditModal}
+          setTimePeriodValues={setTimePeriodValues}
+        />
+      )}
+    </CommonField>
+  );
+};
+
+const Wrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  gap: theme.spacing.smallest,
+  width: "100%",
+}));
+
+const TimePeriodWrapper = styled("div")<{}>(({ theme }) => ({
+  border: `1px solid ${theme.outline.weak}`,
+  borderRadius: theme.radius.small,
+  background: theme.bg[1],
+  display: "flex",
+  width: "100%",
+  boxShadow: theme.shadow.input,
+}));
+
+const ButtonWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  gap: theme.spacing.smallest,
+  height: "30px",
+}));
+
+const NoteIcon = styled("div")(({ theme }) => ({
+  position: "relative",
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  paddingTop: theme.spacing.smallest,
+  gap: theme.spacing.small,
+}));
+
+const ProgressSteps = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  padding: theme.spacing.small,
+  gap: theme.spacing.large,
+  position: "relative",
+}));
+
+const Circle = styled("div")<{ filled?: boolean }>(({ theme, filled }) => ({
+  width: "8px",
+  height: "8px",
+  borderRadius: "50%",
+  background: filled ? theme.bg[3] : "transparent",
+  border: `1px solid ${theme.outline.weak}`,
+  position: "relative",
+  "&:not(:last-child)::after": {
+    content: '""',
+    width: "1px",
+    height: "13px",
+    background: theme.outline.weak,
+    position: "absolute",
+    top: "10px",
+    left: "50%",
+    transform: "translateX(-50%)",
+    zIndex: 0,
+  },
+}));
+
+export default TimePeriodField;
diff --git a/web/src/beta/ui/fields/TimePointField/EditPanel.tsx b/web/src/beta/ui/fields/TimePointField/EditPanel.tsx
new file mode 100644
index 0000000000..79c29ffe17
--- /dev/null
+++ b/web/src/beta/ui/fields/TimePointField/EditPanel.tsx
@@ -0,0 +1,108 @@
+import { FC } from "react";
+
+import { Button, DatePicker, PopupPanel, Selector, TimePicker } from "@reearth/beta/lib/reearth-ui";
+import { useT } from "@reearth/services/i18n";
+import { styled } from "@reearth/services/theme";
+
+import useHooks from "./hooks";
+
+type Props = {
+  value?: string;
+  onChange?: (value?: string | undefined) => void;
+  onClose: () => void;
+  setDateTime?: (value?: string | undefined) => void;
+};
+
+const EditPanel: FC<Props> = ({ onChange, onClose, value, setDateTime }) => {
+  const t = useT();
+  const {
+    date,
+    time,
+    selectedTimezone,
+    offsetFromUTC,
+    handleDateChange,
+    handleTimezoneSelect,
+    handleApply,
+    handleTimeChange,
+  } = useHooks({ value, onChange, onClose, setDateTime });
+
+  return (
+    <PopupPanel
+      width={247}
+      title={t("Set Time")}
+      onCancel={onClose}
+      actions={
+        <ButtonWrapper>
+          <Button extendWidth size="small" title="Cancel" onClick={onClose} />
+          <Button
+            extendWidth
+            size="small"
+            title="Apply"
+            appearance="primary"
+            onClick={handleApply}
+          />
+        </ButtonWrapper>
+      }>
+      <EditorWrapper>
+        <Wrapper>
+          <Label>{t("Date")}</Label>
+          <InputWrapper>
+            <DatePicker value={date} onChange={handleDateChange} />
+          </InputWrapper>
+        </Wrapper>
+        <Wrapper>
+          <Label>{t("Time")}</Label>
+          <InputWrapper>
+            <TimePicker value={time} onChange={handleTimeChange} />
+          </InputWrapper>
+        </Wrapper>
+        <Wrapper>
+          <Label>{t("Time Zone")}</Label>
+          <InputWrapper>
+            <Selector
+              value={selectedTimezone.timezone}
+              options={offsetFromUTC.map(timezone => ({
+                label: timezone.offset,
+                value: timezone?.timezone,
+              }))}
+              maxHeight={200}
+              onChange={handleTimezoneSelect}
+            />
+          </InputWrapper>
+        </Wrapper>
+      </EditorWrapper>
+    </PopupPanel>
+  );
+};
+
+const EditorWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  gap: theme.spacing.normal,
+}));
+
+const Wrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "flex-start",
+  gap: theme.spacing.small,
+}));
+
+const Label = styled("div")(({ theme }) => ({
+  color: theme.content.main,
+  fontSize: theme.fonts.sizes.body,
+  fontWeight: theme.fonts.weight.regular,
+}));
+
+const InputWrapper = styled("div")(() => ({
+  width: "100%",
+}));
+const ButtonWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "flex-start",
+  gap: theme.spacing.small,
+}));
+
+export default EditPanel;
diff --git a/web/src/beta/ui/fields/TimePointField/hooks.ts b/web/src/beta/ui/fields/TimePointField/hooks.ts
new file mode 100644
index 0000000000..8325d5c509
--- /dev/null
+++ b/web/src/beta/ui/fields/TimePointField/hooks.ts
@@ -0,0 +1,98 @@
+import moment from "moment-timezone";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import { getUniqueTimezones } from "@reearth/beta/utils/moment-timezone";
+
+type Props = {
+  value?: string;
+  onChange?: (value?: string | undefined) => void;
+  setDateTime?: (value?: string | undefined) => void;
+  onClose: () => void;
+};
+
+type TimezoneInfo = {
+  timezone: string;
+  offset: string;
+};
+
+export default ({ value, onChange, setDateTime, onClose }: Props) => {
+  const [date, setDate] = useState("");
+  const [time, setTime] = useState("");
+  const [selectedTimezone, setSelectedTimezone] = useState<TimezoneInfo>({
+    offset: "+00:00",
+    timezone: "Africa/Abidjan",
+  });
+
+  const handleTimeChange = useCallback((newValue: string) => {
+    if (!newValue) return;
+    setTime(newValue);
+  }, []);
+
+  const handleDateChange = useCallback((newValue: string) => {
+    if (!newValue) return;
+    setDate(newValue);
+  }, []);
+
+  const offsetFromUTC: TimezoneInfo[] = useMemo(() => {
+    return getUniqueTimezones(moment.tz.names());
+  }, []);
+
+  const handleTimezoneSelect = useCallback(
+    (newValue: string | string[]) => {
+      const updatedTimezone = offsetFromUTC.find(info => info.timezone === newValue);
+      setSelectedTimezone(updatedTimezone || selectedTimezone);
+    },
+    [offsetFromUTC, selectedTimezone],
+  );
+
+  const handleApply = useCallback(() => {
+    const selectedTimezoneInfo = offsetFromUTC.find(
+      info => info.timezone === selectedTimezone.timezone,
+    );
+    if (selectedTimezoneInfo) {
+      const formattedDateTime = `${date}T${time}${selectedTimezoneInfo.offset}`;
+      setDateTime?.(formattedDateTime);
+      onChange?.(formattedDateTime);
+    }
+    onClose?.();
+  }, [offsetFromUTC, onClose, selectedTimezone.timezone, date, time, setDateTime, onChange]);
+
+  useEffect(() => {
+    if (value) {
+      const [parsedDate, timeWithOffset] = value.split("T");
+      const [parsedTime, timezoneOffset] = timeWithOffset.split(/[-+]/);
+      const [timezoneOffsetHour, timezoneOffsetMinute] = timezoneOffset.split(":");
+      const formattedTimezoneOffset =
+        timezoneOffsetHour.length === 2
+          ? timezoneOffset
+          : `${timezoneOffsetHour.padStart(2, "0")}:${timezoneOffsetMinute}`;
+
+      setTime(parsedTime);
+      setDate(parsedDate);
+
+      const updatedTimezone = offsetFromUTC.find(
+        info =>
+          info.offset ===
+          (timeWithOffset.includes("-")
+            ? `-${formattedTimezoneOffset}`
+            : `+${formattedTimezoneOffset}`),
+      );
+      updatedTimezone && setSelectedTimezone(updatedTimezone);
+    } else {
+      setDate("");
+      setTime("");
+      setSelectedTimezone({ offset: "+00:00", timezone: "Africa/Abidjan" });
+    }
+  }, [value, offsetFromUTC]);
+
+  return {
+    date,
+    time,
+    selectedTimezone,
+    offsetFromUTC,
+    handleTimeChange,
+    handleTimezoneSelect,
+    handleDateChange,
+    handleApply,
+  };
+};
diff --git a/web/src/beta/ui/fields/TimePointField/index.tsx b/web/src/beta/ui/fields/TimePointField/index.tsx
new file mode 100644
index 0000000000..030f92e81b
--- /dev/null
+++ b/web/src/beta/ui/fields/TimePointField/index.tsx
@@ -0,0 +1,111 @@
+import { FC, useCallback, useEffect, useState } from "react";
+
+import { Button, Popup, TextInput } from "@reearth/beta/lib/reearth-ui";
+import { useT } from "@reearth/services/i18n";
+import { styled, useTheme } from "@reearth/services/theme";
+
+import CommonField, { CommonFieldProps } from "../CommonField";
+
+import EditPanel from "./EditPanel";
+
+export type TimePointFieldProps = CommonFieldProps & {
+  value?: string;
+  disabledField?: boolean;
+  fieldName?: string;
+  onChange?: (value?: string | undefined) => void;
+  onTimePointPopupOpen?: (fieldId?: string) => void;
+  setDisabledFields?: (value: string[]) => void;
+};
+
+const TimePointField: FC<TimePointFieldProps> = ({
+  commonTitle,
+  description,
+  value,
+  disabledField,
+  fieldName,
+  onChange,
+  onTimePointPopupOpen,
+  setDisabledFields,
+}) => {
+  const [open, setOpen] = useState(false);
+  const t = useT();
+  const theme = useTheme();
+
+  const handlePopOver = useCallback(() => {
+    if (disabledField) {
+      setOpen(false);
+    } else {
+      onTimePointPopupOpen?.(fieldName);
+      setOpen(!open);
+    }
+    if (open) setDisabledFields?.([]);
+  }, [disabledField, open, onTimePointPopupOpen, setDisabledFields, fieldName]);
+
+  const handleTimeSettingDelete = useCallback(() => {
+    if (!value) return;
+    setDateTime("");
+    onChange?.();
+  }, [value, onChange]);
+
+  const [dateTime, setDateTime] = useState(value);
+
+  useEffect(() => {
+    setDateTime(value);
+  }, [value]);
+
+  const DeleteAction: FC = () => (
+    <Button
+      icon="trash"
+      size="small"
+      iconButton
+      appearance="simple"
+      disabled={!dateTime}
+      onClick={handleTimeSettingDelete}
+      iconColor={dateTime ? theme.content.main : theme.content.weak}
+    />
+  );
+  return (
+    <CommonField commonTitle={commonTitle} description={description}>
+      <Wrapper>
+        <TextInput
+          appearance="readonly"
+          value={value && dateTime}
+          actions={[DeleteAction]}
+          disabled
+          placeholder={"YYYY-MM-DDThh:mm:ss±hh:mm"}
+        />
+        <Popup
+          trigger={
+            <Button
+              appearance="secondary"
+              title={t("set")}
+              icon="clock"
+              size="small"
+              onClick={handlePopOver}
+            />
+          }
+          open={open}
+          offset={8}
+          placement="bottom-end">
+          {open && (
+            <EditPanel
+              setDateTime={setDateTime}
+              value={dateTime}
+              onChange={onChange}
+              onClose={handlePopOver}
+            />
+          )}
+        </Popup>
+      </Wrapper>
+    </CommonField>
+  );
+};
+
+export default TimePointField;
+
+const Wrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  width: "100%",
+  gap: theme.spacing.small,
+  flexWrap: "wrap",
+}));
diff --git a/web/src/beta/ui/fields/TripletInputField.tsx b/web/src/beta/ui/fields/TripletInputField.tsx
new file mode 100644
index 0000000000..bbbe1c5410
--- /dev/null
+++ b/web/src/beta/ui/fields/TripletInputField.tsx
@@ -0,0 +1,84 @@
+import { FC, useCallback, useEffect, useState } from "react";
+
+import { NumberInput, NumberInputProps, Typography } from "@reearth/beta/lib/reearth-ui";
+import { styled, useTheme } from "@reearth/services/theme";
+
+import CommonField, { CommonFieldProps } from "./CommonField";
+
+type commonTurple = [number, number, number];
+export type TripletInputFieldProps = CommonFieldProps &
+  Omit<NumberInputProps, "onBlur" | "onChange" | "placeholder" | "value"> & {
+    values: commonTurple;
+    placeholders?: [string, string, string];
+    content?: [string, string, string];
+    onChange?: (values: commonTurple) => void;
+    onBlur?: (values: commonTurple) => void;
+  };
+
+const TripletInputField: FC<TripletInputFieldProps> = ({
+  commonTitle,
+  description,
+  values,
+  placeholders,
+  content,
+  onChange,
+  onBlur,
+  ...props
+}) => {
+  const [inputValues, setInputValues] = useState<commonTurple>(values);
+
+  const theme = useTheme();
+
+  const handleChange = useCallback(() => {
+    const newValues = [...inputValues] as commonTurple;
+    setInputValues(newValues);
+    onChange?.(newValues);
+  }, [inputValues, onChange]);
+
+  const handleBlur = useCallback(() => {
+    onBlur?.(inputValues);
+  }, [inputValues, onBlur]);
+
+  useEffect(() => {
+    setInputValues(values);
+  }, [values]);
+
+  return (
+    <CommonField commonTitle={commonTitle} description={description}>
+      <Wrapper>
+        {inputValues.map((value, index) => (
+          <InputWrapper key={index}>
+            <NumberInput
+              value={value}
+              placeholder={placeholders?.[index]}
+              onChange={handleChange}
+              onBlur={handleBlur}
+              extendWidth
+              {...props}
+            />
+            <Typography size="body" color={theme.content.weak}>
+              {content?.[index]}
+            </Typography>
+          </InputWrapper>
+        ))}
+      </Wrapper>
+    </CommonField>
+  );
+};
+
+export default TripletInputField;
+
+const Wrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  gap: `${theme.spacing.smallest}px`,
+  alignItems: "flex-start",
+  width: "100%",
+}));
+
+const InputWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: theme.spacing.smallest,
+  width: "100%",
+}));
diff --git a/web/src/beta/ui/fields/TwinInputField.tsx b/web/src/beta/ui/fields/TwinInputField.tsx
new file mode 100644
index 0000000000..2c20e1a877
--- /dev/null
+++ b/web/src/beta/ui/fields/TwinInputField.tsx
@@ -0,0 +1,84 @@
+import { FC, useCallback, useEffect, useState } from "react";
+
+import { NumberInput, NumberInputProps, Typography } from "@reearth/beta/lib/reearth-ui";
+import { styled, useTheme } from "@reearth/services/theme";
+
+import CommonField, { CommonFieldProps } from "./CommonField";
+
+type commonTupleProps = [number, number];
+export type TwinInputFieldProps = CommonFieldProps &
+  Omit<NumberInputProps, "onBlur" | "onChange" | "placeholder" | "value"> & {
+    values: commonTupleProps;
+    placeholders?: [string, string];
+    content?: [string, string];
+    onChange?: (values: commonTupleProps) => void;
+    onBlur?: (values: commonTupleProps) => void;
+  };
+
+const TwinInputField: FC<TwinInputFieldProps> = ({
+  commonTitle,
+  description,
+  values,
+  placeholders,
+  content,
+  onChange,
+  onBlur,
+  ...props
+}) => {
+  const [inputValues, setInputValues] = useState<commonTupleProps>(values);
+
+  const theme = useTheme();
+  const handleChange = useCallback(() => {
+    const newValues = [...inputValues] as commonTupleProps;
+    setInputValues(newValues);
+    onChange?.(newValues);
+  }, [inputValues, onChange]);
+
+  const handleBlur = useCallback(() => {
+    onBlur?.(inputValues);
+  }, [inputValues, onBlur]);
+
+  useEffect(() => {
+    setInputValues(values);
+  }, [values]);
+
+  return (
+    <CommonField commonTitle={commonTitle} description={description}>
+      <Wrapper>
+        {inputValues.map((value, index) => (
+          <InputWrapper key={index}>
+            <NumberInput
+              value={value}
+              onChange={handleChange}
+              onBlur={handleBlur}
+              placeholder={placeholders?.[index]}
+              extendWidth
+              {...props}
+            />
+            <Typography size="body" color={theme.content.weak}>
+              {content?.[index]}
+            </Typography>
+          </InputWrapper>
+        ))}
+      </Wrapper>
+    </CommonField>
+  );
+};
+
+export default TwinInputField;
+
+const Wrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  gap: `${theme.spacing.smallest}px`,
+  alignItems: "flex-start",
+  width: "100%",
+}));
+
+const InputWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: theme.spacing.smallest,
+  width: "100%",
+  boxSizing: "border-box",
+}));
diff --git a/web/src/beta/ui/fields/index.stories.tsx b/web/src/beta/ui/fields/index.stories.tsx
new file mode 100644
index 0000000000..db929a181d
--- /dev/null
+++ b/web/src/beta/ui/fields/index.stories.tsx
@@ -0,0 +1,133 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import {
+  CommonField,
+  InputField,
+  TwinInputField,
+  TripletInputField,
+  QuartetInputField,
+  AssetField,
+  SelectField,
+  TextareaField,
+  SwitchField,
+  CodeField,
+  ColorField,
+  SpacingField,
+  CameraField,
+  TimePeriodField,
+  TimePointField,
+} from "./index";
+
+const meta: Meta<typeof InputField> = {
+  component: InputField,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InputField>;
+export const Components: Story = {
+  render: () => (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "20px",
+        maxWidth: "500px",
+        padding: "24px",
+        margin: "0 auto",
+      }}>
+      <CommonField
+        commonTitle="CommonField"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla."
+      />
+
+      <InputField
+        placeholder="Text"
+        commonTitle="InputField"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla."
+      />
+      <TwinInputField
+        values={[3.1415926, 3.1415926]}
+        content={["Latitude", "Longitude"]}
+        commonTitle="TwinInputField"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla."
+      />
+      <TripletInputField
+        values={[3.1415926, 3.1415926, 3.1415926]}
+        content={["Heading", "Pitch", "Roll"]}
+        commonTitle="TripletInputField"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla."
+      />
+      <QuartetInputField
+        values={[3.1415926, 3.1415926, 3.1415926, 3.1415926]}
+        content={["x", "y", "z", "w"]}
+        commonTitle="QuartetInputField"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla."
+      />
+      <TextareaField
+        placeholder="Text"
+        commonTitle="TextareaField"
+        value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla."
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla."
+      />
+      <SelectField
+        options={[
+          { label: "Option 1", value: "option1" },
+          { label: "Option 2", value: "option2" },
+          { label: "Option 3", value: "option3" },
+        ]}
+        multiple={true}
+        commonTitle="SelectField"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla."
+      />
+
+      <SwitchField
+        value={true}
+        onChange={() => {}}
+        commonTitle="SwitchField"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla."
+      />
+      <CodeField
+        value="const a = 1; const a = 1; const a = 1;"
+        height={200}
+        commonTitle="CodeField"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla."
+      />
+      <ColorField
+        value="#000000"
+        commonTitle="ColorField"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla."
+      />
+      <AssetField
+        fileType="asset"
+        placeholder="Asset"
+        commonTitle="AssetField"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla."
+      />
+      <CameraField
+        onSave={() => {}}
+        commonTitle="CameraField"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla."
+      />
+      <SpacingField
+        commonTitle="SpacingField"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla."
+      />
+      <TimePointField
+        value="2023-10-24T00:00:00+09:00"
+        commonTitle="TimePointField"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla."
+      />
+      <TimePeriodField
+        value={{
+          currentTime: "2024-07-19T11:03:56+00:00",
+          startTime: "2024-07-20T11:03:56+00:00",
+          endTime: "2024-07-24T11:03:56+00:00",
+        }}
+        onChange={() => {}}
+        commonTitle="TimePeriodField"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla."
+      />
+    </div>
+  ),
+};
diff --git a/web/src/beta/ui/fields/index.ts b/web/src/beta/ui/fields/index.ts
index 759a610aa5..bb26c82984 100644
--- a/web/src/beta/ui/fields/index.ts
+++ b/web/src/beta/ui/fields/index.ts
@@ -1,4 +1,16 @@
-export * from "./CommonField";
-export * from "./InputField";
-export * from "./ColorField";
-export * from "./SwitchField";
+export { default as CommonField } from "./CommonField";
+export { default as InputField } from "./InputField";
+export { default as ColorField } from "./ColorField";
+export { default as CodeField } from "./CodeField";
+export { default as SwitchField } from "./SwitchField";
+export { default as SelectField } from "./SelectField";
+export { default as TextareaField } from "./TextareaField";
+export { default as TwinInputField } from "./TwinInputField";
+export { default as TripletInputField } from "./TripletInputField";
+export { default as QuartetInputField } from "./QuartetInputField";
+export { default as AssetField } from "./AssetField";
+export { default as CameraField } from "./CamersField";
+export { default as SpacingField } from "./SpacingField";
+export { default as TimePeriodField } from "./TimePeriodField";
+export { default as ListField } from "./ListField";
+export { default as TimePointField } from "./TimePointField";
diff --git a/web/src/services/i18n/translations/en.yml b/web/src/services/i18n/translations/en.yml
index 5a1509ad01..2f00ff3691 100644
--- a/web/src/services/i18n/translations/en.yml
+++ b/web/src/services/i18n/translations/en.yml
@@ -83,7 +83,8 @@ Value: Value
 Input data here: Input data here
 Prioritize Performance: Prioritize Performance
 Add to Layer: Add to Layer
-Visualizer currently only supports CSV point data. Please specify the column names for latitude and longitude in your data below.: 'Visualizer currently only supports CSV point data. Please specify the column names for latitude and longitude in your data below.'
+Visualizer currently only supports CSV point data. Please specify the column names for latitude and longitude in your data below.:
+  Visualizer currently only supports CSV point data. Please specify the column names for latitude and longitude in your data below.
 Latitude Column Name: ''
 Column Name: ''
 Longitude Column Name: ''
@@ -326,6 +327,9 @@ Strikethrough: Strikethrough
 Subscript: Subscript
 Superscript: Superscript
 Clear Formatting: Clear Formatting
+Position Capture: ''
+value: ''
+Time Period Settings: Time Period Settings
 Drop here: Drop here
 Close timeline: Close timeline
 Playback timeline: Playback timeline
diff --git a/web/src/services/i18n/translations/ja.yml b/web/src/services/i18n/translations/ja.yml
index e6931b7ba1..11114ef274 100644
--- a/web/src/services/i18n/translations/ja.yml
+++ b/web/src/services/i18n/translations/ja.yml
@@ -307,6 +307,9 @@ Strikethrough: 取り消し線
 Subscript: 下付き文字
 Superscript: 上付き文字
 Clear Formatting: 書式をクリア
+Position Capture: ''
+value: ''
+Time Period Settings: ''
 Drop here: ここにドロップ
 Close timeline: タイムラインを閉じる
 Playback timeline: タイムラインを逆再生する